I checked my website on https://observatory.mozilla.org/analyze.html?host=michael.walter.berlin and it is permamently saying that I did not implement a CSP-Header. I implemented it, which can be seen in the headers in Google Chrome and even on the website of Mozilla.
My .htaccess is setting the headers and looks like this:
[...]
Header set X-Content-Security-Policy "default-src 'self';style-src 'self' https://fonts.googleapis.com;font-src 'self' https://fonts.gstatic.com;script-src 'self' https://oss.maxcdn.com;"
[...]
The output from mozilla's observatory is
X-Content-Security-Policy: default-src 'self';style-src 'self' https://fonts.googleapis.com;font-src 'self' https://fonts.gstatic.com;script-src 'self' https://oss.maxcdn.com;
The CSP-Header is recognized from my browser and shows errors in the console when I am violating these rules.
Can anyone tell me what I am doing wrong?
Thanks in advance.
Related
I have a Safari extension which loads images from Unsplash from the domain https://images.unsplash.com. I recently migrated to manifest v3 and used the following CSP in manifest.json:
"content_security_policy": {
"extension_pages": "img-src https://images.unsplash.com data:; script-src 'self'; object-src 'self';"
},
This allows images to load correctly on Chrome, both the initial request from images.unsplash.com and a preload mechanism that loads them via a data: scheme.
On Safari, I get an error:
Refused to load https://images.unsplash.com/photo-1587830290334-020efdcbc345?crop=entropy&cs=tinysrgb&fit=max&fm=webp&ixid=MnwxNzkyODZ8MHwxfGFsbHx8fHx8fHx8fDE2MTczMjkzMDc&ixlib=rb-1.2.1&q=80&w=400 because it does not appear in the img-src directive of the Content Security Policy.
I get this even if I use that exact URL in the CSP. It seems to work as expected in other browsers, with images loading successfully. Is my CSP definition not technically correct and it's more strictly enforced in Safari, or some other issue?
References
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src
https://developer.chrome.com/docs/extensions/mv3/intro/
As #wOxxOm points out, there is indeed a bug. If you set a CSP via meta tag instead, it will behave as expected. So when submitting a build to App Store, remove the CSP key from manifest.json and Safari will rely on the CSP set via meta tag.
Works:
<meta
http-equiv="Content-Security-Policy"
content="img-src https://images.unsplash.com data:; script-src 'self'; object-src 'self';"
/>
Tracking bug in Webkit: https://bugs.webkit.org/show_bug.cgi?id=243349
I added Facebook signIn button and on https://localhost:3000/ everything works just fine but when I deploy my app it throws the following error in the console:
Refused to load the script 'https://connect.facebook.net/en_US/sdk.js' because it violates the following Content Security Policy directive: "script-src-elem 'self' 'unsafe-inline' https://apis.google.com/ ".
I tried to add this line into my manifest.json: "content_security_policy": "script-src 'self' 'unsafe-inline' https://connect.facebook.net 'unsafe-eval'; object-src 'self'"
But it doesn't help. Could someone explain me what's the problem?
because it violates the following Content Security Policy directive: "script-src-elem 'self' 'unsafe-inline'
This violation message says that you use script-src-elem directive in the CSP. But you add the https://connect.facebook.net source into script-src directive.
Chrome browser follows the script-src-elem if it presents, and script-src is used as fallback only if script-src-elem is omitted.
You have to add https://connect.facebook.net into both script-src-elem and script-src.
I'm currently using jQuery 3.4.1 and jQuery-UI 1.12.1 (for autocomplete) on my website. I'm also using unsafe-inline and unsafe-eval which I don't want to use.
My <meta/> tag:
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-eval' https: cdnjs.cloudflare.com code.highcharts.com stackpath.bootstrapcdn.com cdn.jsdelivr.net code.jquery.com 'unsafe-inline'; connect-src 'self' news.google.com; worker-src 'self'; manifest-src 'self';"
>
Expanded, that content is:
script-src
'self'
'unsafe-eval'
https:
cdnjs.cloudflare.com
code.highcharts.com
stackpath.bootstrapcdn.com
cdn.jsdelivr.net
code.jquery.com
'unsafe-inline';
connect-src
'self'
news.google.com;
worker-src
'self';
manifest-src
'self';
Whenever the AJAX call happens in jQuery-UI autocomplete, it throws an error saying it violates CSP policy.
What do I need to do to properly enable CSP on my website with jQuery? I don't want to use unsafe-eval and unsafe-inline on my website.
Console Error:
Whenever the AJAX call happens in jQuery-UI autocomplete, it throws an
error saying it violates CSP policy.
Show me the text of this CSP error and I'll say you what to do (Chrome console is prefer).
As can be seen from CSS for jQuery-UI 1.12.1 you need to have img-src data: in your policy.
As can be seen from the script 1.12.1/jquery-ui.js - it does not use unsafe eval calls. Maybe you use those in your scripts. Remove 'unsafe-eval' from the script-src and check errors raised in the console.
If there is not messages like Refused to evaluate a string as JavaScript because unsafe-eval is not an allowed or the page's settings blocked the loading of a resource at eval - you do not need to have 'unsafe-eval' in the script-src.
.
The best practice is to forget about insecure HTTP: and use HTTPS:. There were cases when Internet providers (in the RU-segment of the Internet) interfered with the client's traffic and injects ads into jquery lib. So:
The rule connect-src 'self' news.google.com; should be connect-src 'self' https://news.google.com; since news.google.com always retirects to HTTPS:. All $ajax-request to news.google.com should use the https:// scheme too.
the same is with cdn.jsdelivr.net, it always redirects to HTTPS:
Therefore safe rules should be:
script-src 'self' 'unsafe-eval' https://cdnjs.cloudflare.com https://code.highcharts.com https://stackpath.bootstrapcdn.com https://cdn.jsdelivr.net https://code.jquery.com
and all call the scripts should be done with HTTPS: <script src='https://cdn.jsdelivr.net/npm/jquery#3.2.1/dist/jquery.min.js'...
When you specify just scheme-source https: in the script-src - it leads to zero-protection since any sources will be allowed via https:.
This additionally helps to avoid problems of mixed content blocking.
I've tried all possible setups for the CSP settings in my manifest.json, this is my current (very open and unsafe, I know).
When I open the background inspect for the extension, the first time after reloading it's fine, sometimes up until the fifth time, and then all of a sudden the errors below start pouring in..
"content_security_policy": "default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';"
And still I'm getting the following error
Refused to load the script 'https://myapp-12345.firebaseio.com/.lp?start=t&ser=1234567&cb=15&v=5' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
What I've tried
Removing the chrome extension when I change the manifest.json
Is there anything I'm missing?
You can only relax CSP in Chrome extensions to a certain extent
"content_security_policy" entry in Chrome Extension manifest allows developers to relax the CSP to a certain extent only. The subset of values allowed for style-src is very limited, quote from the official documentation:
Currently, developers can allowlist origins with the following
schemes: blob, filesystem, https, and chrome-extension. The host part
of the origin must explicitly be specified for the https and
chrome-extension schemes. Generic wildcards such as https:, https://*
and https://*.com are not allowed; ...
Many of the values specified in your CSP (eg. * and 'unsafe-inline' for script-src) are not valid in "content_security_policy" and Chrome ignores them (with a warning) when parsing manifest.json.
Why you don't see warnings or errors about the invalid CSP values
I suspect that you might be checking errors in JavaScript console of the background page. You need to check the errors and warnings generated for your manifest.json first. Go to chrome://extensions/ and click on the Errors button for your extension. There will be several warnings such as this:
content_security_policy': Ignored insecure CSP value "*" in directive
'script-src'.
Edit:
I just noticed that the Errors page (chrome://extensions/?errors=<extension-id>) behaves inconsistently. There seems to be a bug that causes the warnings about ignored CSP values to only show up after reloading the extension.
Links to documentation:
"content_security_policy" in Chrome
"content_security_policy" in Firefox
(The specification is basically identical but I find the documentation on MDN nicer and easier to follow.)
I am making a site that uses webpack.
I am about to launch it and I want to put on addThis share widget. I am adding the addThis code in the index.html right before closing body tag as advised by addThis. Like this:
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript"
src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-
###MY_NUMBERS###"></script>
</body>
this generates the following error in chrome-inspect console:
Refused to load the script
'http://s7.addthis.com/js/300/addthis_widget.js' because it violates
the following Content Security Policy directive: "script-src 'self'".
I have read up a little on it and it does not seem to work to seperate addThis to another js-file and save that locally to load it to DOM.
I tried add this to my manifest.json:
"content_security_policy": "script-src 'self' http://s7.addthis.com/js/300/addthis_widget.js; object-src 'self'"
No success. Is there a way to override CSP settings to allow for addThis-widget?
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'
'unsafe-eval' https://*.addthis.com https://addthis.com;child-src 'self' 'unsafe-
inline' 'unsafe-eval' https://*.addthis.com https://addthis.com; object-src 'self'
'unsafe-inline' 'unsafe-eval' https://*.addthis.com https://addthis.com; script-src
'self' 'unsafe-inline' 'unsafe-eval' https://*.addthis.com https://addthis.com; img-src
'self' 'unsafe-inline' 'unsafe-eval' https://*.addthis.com https://addthis.com;">
Adding this to your header will allow the addthis widget to load. Might not be secure, which will defeat the purpose of Content-Security-Policies...
I always set my CSP through the .htaccess if it's available.
Here are some good tips: https://content-security-policy.com/
You're basically there, but unsure how it works with manifest.json.
Try similar in .htaccess:
Header set Content-Security-Policy "default-src 'none'; script-src 'self' http://*.addthis.com
Some things to be aware of with .htaccess files: https://www.digitalocean.com/community/tutorials/how-to-use-the-htaccess-file
Also, using a CSP, you will need to specifiy all the external sources you use basically.
It's worth looking into CSPs in more detail and being aware of all the various sources of images, fonts, etc etc. you use.
Any problems, let me know and I'll expanded further.