I followed the README instructions from vfat.tools (https://github.com/vfat-tools/vfat-tools), i.e. ran npm install and finally npm run dev. I see the following on the console:
[Browsersync] Access URLs:
Local: http://localhost:3000
External: http://192.168.0.197:3000
UI: http://localhost:3001
UI External: http://localhost:3001
[Browsersync] Serving files from: dist
[Browsersync] Watching files...
However, when I open localhost:3000 to access the UI, I see the following error on Chrome`s console:
Refused to execute inline script because it violates the following Content Security Policy
directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-
ACotEtBlkqjCUAsddlA/3p2h7Q0iHuDXxk577uNsXwA='), or a nonce ('nonce-...') is required to enable
inline execution. Note also that 'script-src' was not explicitly set, so 'default-src'
is used as a fallback.
Options to solve this problem include adding unsafe-inline somewhere in the code (for example -> Script causes “Refused to execute inline script: Either the 'unsafe-inline' keyword, a hash… or a nonce is required to enable inline execution”), but I also have the impression this is not good practice.
How can I get the webpage to load properly?
There is 3 kinds of inline scripts: <script>...</script>, <a href='javascript:void(0)' and <a onclick='eventHandler()'.
The first one you can resolve using 'nonce-value' or 'hash-value', the last two require using of mandatory 'unsafe-inline' (or code refactoring).
Therefore to get rid of this error you need to know which kind of inline script caused a violation.
As I can see vfat.tools uses document.getElementById("theme-button").onclick = setTheme (and maybe somewhere else something like that is used). Therefore you have to use 'unsafe-inline' or to rewrite this part of code using addEventListener() function to bind an event listener.
Related
I have been using a content-security-policy-report-only header for multiple weeks and have been seeing violations for multiple domains which are allowlisted in the same csp header. I placed all the domains I want to allowlist in the default src and don't have any other directives (other than style src for a nonce). I see other traffic which seem to pass and when I test the url on my own browser it succeeds without any violations. I have been looking at possible reasons behind this and that lead me to posts such as Content-Security-Policy Blocking Whitelisted Domains, Why is script-src-elem not using values from script-src as a fallback?, and https://csplite.com/csp277/
These links say that status code 0 or empty indicate the request was blocked while the browser tries to load the link and can happen due to ad blockers. I was also seeing these status code 0 violations reports and have filtered out status code 0/empty. But even after the change I still see a few requests that violate on allowlisted domains and with status code 200. Could this also be due to adblockers?
I did notice that some violations caused by extensions would list in source-file as chrome-extension so unsure if this could be due to extensions.
One thing I did notice was that if a report had a blocked uri that was not in the allow list in the default src, the violated directive would be a frame-src (which should default to default-src where there would be no domain so violation is expected). But in the case of a report with a blocked uri that was in the allow list, the violated directive and effective directive would be an img-src (which should also default to default but maybe it's not seeing the allowlisted domain there)
Example Report
{"linenumber":"",
"request":"",
"documenturi":"mysite.com",
"originalpolicy":"default-src 'self' mysite.com *.redirectsite.com redirectsite.com; style-src 'nonce-d93e18cc'; report-uri /csp-reports",
"violateddirective":"img-src",
"statuscode":"200",
"referrer":"",
"scriptsample":"",
"effectivedirective":"img-src",
"columnnumber":"",
"requestheaders":"",
"blockeduri":"https://x.redirectsite.com/s........",
"sourcefile":""}
Does anyone have any experience with this?
Ended up switching from content-security-policy-report-only to content-security-policy header even though was seeing these status code 200 violations. After switching, still saw status code 0 violations but status code 200 disappeared. Perhaps it is a bug with how browsers support the content-security-policy-report-only header. But ended up working out for this usecase. Hope this helps someone else
I have a stripe elements integration on my project.
I use sapper on front end and ruby on the backend.
I followed the tutorial to setup the server to generate payment intent using stripe private key and front end to show stripe embeddable UI using stripe publish key, everything works fine the only problem is as follows.
Once a payment is done using test card details I get the following error
Refused to load the image 'https://hooks.stripe.com/img/favicon.png' because it violates the following Content Security Policy directive: "img-src data: https://q.stripe.com".
The issue that you describe is related to the CSP and how it is configured for your project. Stripe has documentation related to the CSP describing all the required directives https://stripe.com/docs/security/guide#content-security-policy. It requires img-src directive to allow loading of the content from https://*.stripe.com while your current directive permits only data: and https://q.stripe.com.
Extending your current directive with the requirements from Stripe should solve the issue.
What am I doing ?
I wrote a script that runs every 1 second and sends a POST request with some data to a server which is running locally. Since the page that I am trying this on has some response headers attached to it (CSP headers). Therefore, the request is unable to proceed to CSP policy in chrome.
Here is the error I get
Refused to connect to 'https://domain.in/api/users' because it
violates the following Content Security Policy directive: "connect-src
'self' https://.whatsapp.net https://www.facebook.com
https://.giphy.com https://.tenor.co blob:
https://crashlogs.whatsapp.net/wa_clb_data
https://crashlogs.whatsapp.net/wa_fls_upload_check
https://www.bingapis.com/api/v6/images/search
https://.google-analytics.com wss://*.web.whatsapp.com
wss://web.whatsapp.com https://dyn.web.whatsapp.com"
What I want ?
Since I am just testing few things, I can bear an insecure environment by disabling the CSP in chrome. So please tell me how to do that ?
What have I tried/read so far ?
I have tried searching for this online and even some of the questions on SO but none of them gave a satisfying and completely working example. Some have suggested using this plugin but I can't see it working in my case.
Please suggest all that you can.
Using the Disable CSP plugin actually works but it fails sometimes. This may be because the server sends the CSP header as soon as the connection between the client and server completes. I needed to toggle this plugin just before that for it to work.
That is how I got it working.
I have a gulp task that runs browsersync.
var options = {
proxy : 'localhost:9000/html' ,
port : 3000 ,
files : [
config.root + config.srcPaths.htmlBundle ,
config.htmlRoot + 'main.css' ,
'!' + config.htmlRoot + '**/*.scss'
] ,
injectChanges : false ,
logFileChanges : true ,
logPrefix : 'broserSync ->' ,
notify : true ,
reloadDelay : 1000
};
browserSync( options );
browsersync detects changes and tries to inject them but chrome blocks it with this error:
Refused to connect to
'ws://localhost:3000/browser-sync/socket.io/?EIO=3&transport=websocket&sid=gOQQPSAc3RBJD2onAAAA'
because it violates the following Content Security Policy directive:
"default-src 'self'". Note that 'connect-src' was not explicitly set,
so 'default-src' is used as a fallback.
Uncaught
SecurityError: Failed to construct 'WebSocket': Refused to connect to
'ws://localhost:3000/browser-sync/socket.io/?EIO=3&transport=websocket&sid=gOQQPSAc3RBJD2onAAAA'
because it violates the document's Content Security Policy.
How can i overcome this issue? Can i turn off the security policy?
Or you can add rules to your content security policy in the main html file (ex. index.html) to accept web socket connections from browser-sync. You can do it by adding ws://localhost:* to your default-src, for example like that:
<meta http-equiv="Content-Security-Policy"
content="
default-src 'self' ws://localhost:*">
You can also specify the exact browser-sync port like that:
<meta http-equiv="Content-Security-Policy"
content="
default-src 'self' ws://localhost:3000">
Just remember to remove this from policy before publishing to production servers!!
Not sure if it's the best solution, but what i ended up doing is to install a chrome plugin that disables the csp:
https://chrome.google.com/webstore/detail/disable-content-security/ieelmcmcagommplceebfedjlakkhpden
If anyone has a better solution i'll be glad to hear it.
If the CSP is set in the html meta tag then a slightly less ugly solution is to have browser-sync disable this itself. Adding something like this to the browser-sync config should do the trick:
rewriteRules: [
{
match: /Content-Security-Policy/,
fn: function (match) {
return "DISABLED-Content-Security-Policy";
}
}
],
If you're really smart you could inject the correct CSP rules that permit browser-sync to do its stuff. Perhaps one diligent soul will end up writing a plugin to do just this?
Below is my JSON code
$.getJSON("http://xyz.com",function(result){
alert(result);
]});
I get this error whitelist rejection: url='http://xyz.com' ON IPHONE
In cordova/phonegap all external URLs are blocked by default. To change this, you have to add the url in question to the whitelist exception in Cordova.plist (XCode).
Alternatively, you could add a * wildcard to allow all domains as shown below.
cordova.2.9/phonegap after have accept all external URLs are by default.
For phonegap 2+ upwards the external hosts are added in the config.xml file: or replace * with the url like google.com see the second solution here: Error: Whitelist rejection in Phonegap