I defined content security policies for one of the application which uses JavaScript files from https://www.youtube.com/iframe_api as follows;
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' https://www.youtube.com;
child-src https://www.youtube.com;">
Now on chrome dev tools, I get the error below:
Refused to load the script 'https://s.ytimg.com/yts/jsbin/www-widgetapi-vflaaT2_k/www-widgetapi.js' because it violates the following Content Security Policy directive: "script-src 'self' https://www.youtube.com".
Should I add https://s.ytimg.com to the content security policy settings?
If yes, does it constitute a security risk as one cannot guarantee whether it may change over time?
How can I effectively define content security policies for YouTube?
Yes that's exactly what you need to do. Ytimg is YouTube's CDN for static files.
Related
If the user has no activity(mouse, keyboard) in some period of time, API'S not working, I inspected and went to the network tab and found CSP is blocking.
Attempt:
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';script-src 'unsafe-hashes' 'unsafe-inline' 'my-urls' ;">
Tried by adding meta link, but it's not working.
Since you observe CSP blocking, you already have a CSP published in the page. You can't relax this CSP by publishing a second CSP in meta tag, you need to edit a first one.
You can check what CSP your already have in browser, a tutorial is here.
XHR requests are covered by connect-src directive, therefore you have to add connect-src 'self' or connect-src https://your_domain.com if you perform connect to a site's own domain.
But first check a "Console tab" - it should be a CSP violation message like:
Refused to connect to wss://example.com/ because it violates the following Content Security Policy directive ...
Refused to connect to https://example.com/ because it violates the following Content Security Policy directive ...
You need to verify that wss://example.com/ or https://example.com/ is your legitimate domain, because this can be antics of some browser plugin or third-party iframe on page.
After thar you can add wss://example.com/ or https://example.com/ (depending what is blocked) into connect-src directive.
I am trying to use a hash with my content security policy...
Below are two example errors in my console:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' apis.google.com cdn.iubenda.com cdnjs.cloudflare.com www.googletagmanager.com". Either the 'unsafe-inline' keyword, a hash ('sha256-oKmCrr+GWRARSXYeVJshOWETr0oqOtt73CNO8efpujQ='), or a nonce ('nonce-...') is required to enable inline execution.
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' apis.google.com cdn.iubenda.com cdnjs.cloudflare.com www.googletagmanager.com". Either the 'unsafe-inline' keyword, a hash ('sha256-pS4Uy3ilo+JLn8IadtJGfyO9z7jqIrGUONfEUDLxoPk='), or a nonce ('nonce-...') is required to enable inline execution.
Here is the corresponding content security policy directive:
add_header Content-Security-Policy "default-src 'self'; script-src 'self' apis.google.com cdn.iubenda.com cdnjs.cloudflare.com www.googletagmanager.com; style-src 'self' fonts.googleapis.com; img-src 'self' cdn.shortpixel.ai secure.gravatar.com; font-src 'self' fonts.googleapis.com fonts.gstatic.com";
Specifically in this example:
script-src 'self' apis.google.com cdn.iubenda.com cdnjs.cloudflare.com www.googletagmanager.com;
From what I gathered from reading the CSP guide on hashes, I should be able to add the hash as per my console to the directive...
The easiest way to generate it is to just open the developer tools console and it will output what the expected hash of your script was in the console error message.
But if I modify my directive to include the hash (example below), I still get the same error in console (obviously with a different hash).
script-src 'self' apis.google.com cdn.iubenda.com cdnjs.cloudflare.com www.googletagmanager.com 'sha256-oKmCrr+GWRARSXYeVJshOWETr0oqOtt73CNO8efpujQ=';
How exactly is the correct way to hash a CSP directive? And why are there multiple errors for the same directive, is this basically one for each domain specified? Should one hash cover all the domains specified?
Not really sure how I should be doing this.
From what I gathered from reading the
content-security-policy.com/hash/ CSP guide on hashes, I should be
able to add the hash as per my console to the directive...
Yeah, it's working only "theoretically", the "practice" is more hard. Yes, Google Chrome calcs hashes, but you need to read the error message carefully to determine what is really blocked: inline script, javascript: navigation or inline event handler. Because each of these have own way how to fix.
- Inline scripts can be just allowed by 'sha256-VALUE' token.
- to allow javascript: navigation and inline event handlers you need to use 'sha256-VALUE' tokens with 'unsafe-hashes'. And not all browsers support 'unsafe-hashes' for javascript: navigation as for now.
But if I modify my directive to include the hash (example below), I
still get the same error in console (obviously with a different hash).
Why do you stopped? I see you use www.googletagmanager.com (GTM), do you think GTM has only one inline script? You allowed the parent script, it began to load the child ones, so you need hashes for both.
You can use parent script hash + 'strict-dynamic' token to allow all the childs ones, but it does not work in Safari as for now.
At the final you will get a lot of hashes for all inline scripts. Bad thing is that GTM and others can time to time change content of it inline scripts, so you have to add a new hashes and to remove obsoletes. But you don't know which hash to which script belongs.
Therefore the preferable way is to use 'nonce-value' for any inline scripts, all the more since GTM distributes 'nonce' to all inline scripts except Custom HTML Tags. For Custom HTML Tags(if used) you can use hashes, because those scripts is under your control.
It's better to investigate all inline scripts manually before decide how it easier and reliable way to allow them.
PS: GTM is a hard nuts for CSP because GTM can be used to inject a open list of inline/external scripts. And if use the custom JavaScript variable names are used for the «Custom HTML tag», it required to allow 'unsafe-eval'.
You can test your GTM ID for what additional scripts it loads and which CSP is enough for it.
I faced this problem when I try to reload my react application web page.
Note: In the development phase there was no issue with this kind of thing, but when I deploy it to production I faced this issue. Thank you.
Refused to load the image 'http://104.248.153.121:8080/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
Here is an error image log: Error Log Refuse to load image
The Content-Security-Policy meta-tag allows you to reduce the risk of XSS attacks by allowing you to define where resources can be loaded from, preventing browsers from loading data from any other locations. This makes it harder for an attacker to inject malicious code into your site.
Sample that says content="default-src 'self'" means this:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
How to allow multiple sources?
You can simply list your sources after a directive as a space separated list:
content="default-src 'self' https://example.com/js/"
Note that there are no quotes around parameters other than the special ones, like 'self'. Also, there's no colon (:) after the directive. Just the directive, then a space-separated list of parameters.
I need to relax the CSP (Content Security Policy) in Chrome to enable a redirect with some get parameters to the Azure login page. When processing such redirects Chrome applies policy restrictions related to form submissions. The default policy in such cases amounts to
<meta http-equiv="Content-Security-Policy" content="form-action 'self' javascript:"/>
In this case the redirect to https://login.microsoftonline.com/...
wont' work. The MDN says that you can expand the list of allowed destinations, which I tried like so:
<meta http-equiv="Content-Security-Policy" content="form-action 'self' https://*.microsoftonline.com javascript:"/>
It appears to have no effect at all as still get the same error on the console:
Refused to send form data to 'https://login.microsoftonline.com' because it violates the following Content Security Policy directive: "form-action 'self' javascript:"
Note also that playing with the order of the attributes or removing the javascript: part does help. However, removing the self part is evidently paid some attention to by Chrome as in this case I'm not able to send data back to the origin. It is almost like they let you tighten up the policy but not relax it.
Any help will be greatly appreciated.
I think that it is caused because form-action (according to the documentation):
The HTTP Content-Security-Policy (CSP) form-action directive restricts the URLs which can be used as the target of a form submissions from a given context.
Maybe you could try the default-src directive:
default-src
The HTTP Content-Security-Policy (CSP) default-src directive serves as a fallback for the other CSP fetch directives.
Hope it helps!
Do not include the protocol (https) and i think it will work
I am trying to load some css and scripts via some CDNs to improve loading times but I am getting a content security policy issue, but after a fair amount of time reading up on it and trying out different polices it is still giving my the same error.
Currently my policy looks like this -
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://code.jquery.com/ https://cdnjs.cloudflare.com/ https://maxcdn.bootstrapcdn.com/">
which from my understanding should mean I can load anything from the site itself and the 3 URLs E.G for maxcdn I should be able to load https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
I did try the very simple and not to be used policy of
<meta http-equiv="Content-Security-Policy" content="default-src *">
but that didn't change anything.
The error I'm getting is -
Refused to load the script 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
The script its trying to load (I will do fall backs after i get this working)-
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
I have tested in chrome (55.0.2883.87) and Edge.
From the error message its as if its not taking my policy but using the default policy set by the browser?
Any help would be much appreciated :)
The script loads without a problem when I test it with a CSP provided by the meta tag you included in your question.
I was able to reproduce the problem by including a conflicting CSP using an HTTP header.
A real HTTP header will trump a meta tag.
You need to make the changes to your server side code or HTTP server configuration instead of to the document.
I had a similar problem due to... an ad blocker (uBlock Origin)