I have made a browser extension for both chrome and firefox. The firefox one is developed using Web Extension APIs and so there are minimal code differences in these two extensions. As an important feature in the extension, some HTML elements become part of the webpage through Content Scripts. That also involves loading images which are hosted on some server and served over https. Now, these images are loading fine in chrome when the extension is running on top of twitter and github. But, interestingly, images are not loading at all in firefox when the corresponding extension is running over twitter and github. Even more interesting is the fact that the content-script-policy set by twitter in its response header is prohibiting that image load and hence firefox is behaving correctly. So, my question basically is if Chrome is violating the CSP here?
Attaching the csp set by twitter here--
script-src 'nonce-j0GK1zjoBy82/ZWhR7gw+g==' https://connect.facebook.net https://cm.g.doubleclick.net https://ssl.google-analytics.com https://graph.facebook.com https://twitter.com 'unsafe-eval' https://.twimg.com https://api.twitter.com https://analytics.twitter.com https://publish.twitter.com https://ton.twitter.com https://syndication.twitter.com https://www.google.com https://t.tellapart.com https://platform.twitter.com https://www.google-analytics.com 'self'; frame-ancestors 'self'; font-src https://twitter.com https://.twimg.com data: https://ton.twitter.com https://fonts.gstatic.com https://maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'; media-src https://twitter.com https://.twimg.com https://ton.twitter.com blob: 'self'; connect-src https://graph.facebook.com https://.giphy.com https://.twimg.com https://pay.twitter.com https://analytics.twitter.com https://media.riffsy.com https://upload.twitter.com https://api.mapbox.com 'self'; style-src https://fonts.googleapis.com https://twitter.com https://.twimg.com https://translate.googleapis.com https://ton.twitter.com 'unsafe-inline' https://platform.twitter.com https://maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'; object-src https://twitter.com https://pbs.twimg.com; default-src 'self'; frame-src https://staticxx.facebook.com https://twitter.com https://.twimg.com https://player.vimeo.com https://pay.twitter.com https://www.facebook.com https://ton.twitter.com https://syndication.twitter.com https://vine.co twitter: https://www.youtube.com https://platform.twitter.com https://upload.twitter.com https://s-static.ak.facebook.com 'self' https://donate.twitter.com; img-src https://graph.facebook.com https://.giphy.com https://twitter.com https://.twimg.com data: https://fbcdn-profile-a.akamaihd.net https://www.facebook.com https://ton.twitter.com https://.fbcdn.net https://syndication.twitter.com https://media.riffsy.com https://www.google.com https://stats.g.doubleclick.net https://*.tiles.mapbox.com https://www.google-analytics.com blob: 'self'; report-uri https://twitter.com/i/csp_report?a=NVQWGYLXFVZXO2LGOQ%3D%3D%3D%3D%3D%3D&ro=false;
Please notice "img-src" in this. Another question that bothers me is that the extension also has its own content-script-policy specified in the manifest file. How do these two policies play together?
Extensions can override CSP of pages if they really want to, but assuming no such response-header surgery, the page's CSP is still mostly respected.
I've made a recent answer regarding CSP in extensions, and will partly reproduce it here:
There are 3 CSPs at play in extensions:
content_security_policy directive only applies for extension's own pages (such as the background page). If not specified, it defaults to script-src 'self'; object-src 'self' and has some restrictions on how it can be modified.
Content script context is not subject to this CSP. unsafe-eval is unrestricted (since you can do executeScript with arbitrary code anyway), however, inline script and remote script restrictions just don't apply to content scripts, because:
Any script in the DOM of the page, be it inline or <script src="..."> tag is executed in the context of the page itself and is subject to the CSP of the page itself. There is precisely one exception, injecting a <script> /* code */ </script> in the page will bypass inline code restrictions for immediate execution.
Note that all of this covers scripts. I am not sure how images are affected. I don't know any docs that cover this.
Note that extensions in general get to override some web security features, for example CORS.
Related
I am working with firefox version 84.0.2 . I am creating a node web application hosted at https://parent.example.com which is configured to return response header as : Content-Security-Policy: frame-src https://child.example.com .
But I am able to open URLs in iframe other than https://child.example.com from https://parent.example.com in firefox.
But as the header suggest it should get blocked. The same thing is working fine in chrome.
I made a couple of research and found out that there is confusion between CSP:frame-src and CSP:child-src . and somewhere it was suggested to use both headers. (ref: How to use frame-src and child-src in Firefox and other browsers? and ).
Therefore, I added both the directives as: Content-Security-Policy: frame-src https://child.example.com; child-src https://child.example.com
But still, I get no success. So, could anyone let me know how to let things work in firefox ?
You have in Firefox some plugin installed which affects CSP header.
Because Firefox 84 definitely blocks any iframes not allowed in the frame-src directive.
Could you show me your HTML where frame-src does not work as intended?
Hello everybody thanks for reading.
I have a problem with Ckeditor, Now i use Content-Security-Policy and editor do not show buttons like the image
if i delete this line
Header always set Content-Security-Policy: "style-src 'self' www.site.com; child-src https://www.youtube.com"
work good
now what can i do , do you have a idea? Please help me, thanks a lot.
To publish CSP via the Header always set Content-Security-Policy:... is not good idea.
Such CSP header will be sent with any content: .js, .css, .jpeg and word always means that it will be send not only with pages having '200 OK' status, but for Error / Redirect / Not Modified / etc.
You have no flexibility to manage such header. If your web page will publish own Content-Security-Policy header, for example via PHP header("Content-Security-Policy: default-src 'self';", you will have 2 glued CSP headers with unpredictable consequences.
In your case - you do not need to publish CSP header in the admin panel (where you do use Ckeditor). But due to para 2 of above, you have the CSP header everywhere and have no possibility to switch it off.
Mush better to use some plugins for your CMS for CSP header management. Such plugins smart enough and do not publush CSP in the admin panel and for error/redirect pages.
If you do not use CMS, you can publish CSP, for example via header() PHP function in appropriate index.php (since you use Ahache web server).
PS: If you do use CKeditor in the site (non in the admin) - you need to expand your CSP rules to allow CKeditor scripts and styles.
UPDATE
Judging by the comments, webmasters are having difficulties with CSP for CKEditor, but no one said which version: 4 or 5.
Content Security Policy for Ckeditor-4 if it's loaded from cdn.ckeditor.com CDN:
connect-src https://pdf-converter.cke-cs.com;
form-action 'self';
img-src cdn.ckeditor.com;
script-src 'unsafe-inline' cdn.ckeditor.com;
style-src 'unsafe-inline' cdn.ckeditor.com;
* SKE-4 is incompatible with 'nonce-value' and requires mandatory 'unsafe-inline' because a lot of inline scripts.
Content Security Policy for Ckeditor-5 if it's loaded from cdn.ckeditor.com CDN:
connect-src https://docx-converter.cke-cs.com https://pdf-converter.cke-cs.com;
form-action 'self';
script-src 'unsafe-inline' https://cdn.ckeditor.com/ckeditor5/;
style-src 'unsafe-inline';
* SKE-5 scripts are compatible with 'nonce-value' so you can get rid of 'unsafe-inline' in script-src.
Content Security Policy for Ckeditor-5 if it's loaded from server where site is placed:
connect-src https://docx-converter.cke-cs.com https://pdf-converter.cke-cs.com;
form-action 'self';
script-src 'self' 'unsafe-inline';
style-src 'unsafe-inline';
PS: The connect-src https://docx-converter.cke-cs.com https://pdf-converter.cke-cs.com; is required only if "Export to PDF" and "Export to Word" buttons are used.
if use nonce, I do like this
(function(cke) {
var _owrite = cke.dom.document.prototype.write;
cke.dom.document.prototype.write = function(src) {
src = src.replace(/<script/gmi, '<script nonce="' + nonceValue + '"');
_owrite.apply(this, [src]);
};
})(CKEDITOR);
A simple solution i used in my project after several fail trials to whitelist Ckeditor, is to exclude CSP urls prefixes that going to use rich text editor.
In my case it was the product admin page.
Firefox 68 is refusing to load scripts if strict-dynamic is set. Removing it fixes the problem but I'm trying to figure out why strict-dynamic causes Firefox to block the scripts. (There are no errors in Chrome 76 or 77.)
Here is my current CSP:
default-src 'none';
base-uri 'self';
connect-src https://api.[mysite].com;
font-src 'self' https://use.typekit.net;
form-action 'self';
frame-ancestors 'self';
img-src 'self' data:;
manifest-src 'self';
object-src 'none';
script-src 'self' 'unsafe-inline' https: 'sha384-iNlFf0Eg2hINxMB9tToQV4RnxDkAZlsPP94pWd15ctvGZBv9ryRfQqFtFZNM7XiA' 'sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49' 'sha384-ZDHQDqvUUYauNA9cFuoaV9L+U+ZtxzdGF70k0b7fDra3FBacCe+Hngtw49T6CJb7' 'sha384-rNVOlvKt+mE/FuEDamC09wqzy3DjyosfTPCDkViitrbSMgS05HdT7pLifJLUpKkN' 'sha384-WCO1dM1VIjdz4wJR0FG7yGtGylSMdwCQDP5MoFjrc/u8970XcFh6zwXdjG76eCDS' 'sha384-+N7evcl7zrc6o9kMNnhuSkeAgOTW8X1IJ9QNoUeFg1Nk2F9iePwtyeN23Xmrfvl8' 'sha384-AQ+OmaAwyCDPM0nqlDUkKMa3qkWQ3oi/reAOFXu3Qpj+8qSrRlqoFd18NNJbOZVT' 'sha384-OAeN05/PeTav9WcYPjJBUnayKJllw2VgLFEpNY5rRWciopAb4v1ERIKclCaF6J/4' 'sha256-kzvsAqTDCfIphFz0XiR4pT52mnhHbvon43SO5jB18dk=' 'sha384-+StHyFUD2Qm2XSU/KU8ItNOwDenBX7rmg1dlwv/d2/UScI4z1E4NleDCQxN5bGFg' 'sha512-4SOBW3M7cPHveemHR+3DE/wa2TMg+IrV5KbofseWTiJdRGhP5fPy9kNGgHMnw3x7KuWuIqeY4O/jFFL8gio9Ag==' 'sha256-1qUviT9v0xAXIG4t/jw+97tZmTnpSdX/kJ2TZBkMBVA=' 'sha384-1oQ+rlRG29IUmyXJ19qy/3JkdRgR+FYDwdljaRj7hFK46jWfXOttNyJ6lgJIiYmx' 'sha512-+t+Sm1j5Sr1ZuxzwvYlZbZw+wODnAGe/YPgZ7BE00ZWwp6Ct5FKWt4EybojdgUxYrzaM20OBZ2I1Uh4U9Vl6WA==' 'strict-dynamic' 'report-sample';
style-src 'self' 'unsafe-inline' https://use.typekit.net/ldr0egh.css https://p.typekit.net 'report-sample';
report-uri https://[mysite].report-uri.com/r/d/csp/reportOnly;
report-to default
I would expect that Firefox would load the scripts since the hashes match. But with strict-dynamic enabled it chokes. Is this a bug in Firefox? Or do I need to be doing my CSP differently?
The errors in Firefox are:
Content Security Policy: The page's settings observed the loading of a resource at https://[mysite]/scripts/js/jquery.min.js ("script-src"). A CSP report is being sent.
Content Security Policy: The page's settings observed the loading of a resource at https://[mysite]/scripts/js/popper.min.js ("script-src"). A CSP report is being sent.
Content Security Policy: The page's settings observed the loading of a resource at https://[mysite]/scripts/js/bootstrap.min.js ("script-src"). A CSP report is being sent.
The hashes for the above resources are (the first three in script-src):
sha384-iNlFf0Eg2hINxMB9tToQV4RnxDkAZlsPP94pWd15ctvGZBv9ryRfQqFtFZNM7XiA
sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49
sha384-ZDHQDqvUUYauNA9cFuoaV9L+U+ZtxzdGF70k0b7fDra3FBacCe+Hngtw49T6CJb7
Support for hashes on external scripts was added in CSP Level 3 and is not implemented yet in Firefox.
Is there a secure way of whitelisting dynamically created scripts in a WebForms project using CSP (Content Security Policy)?
Using unsafe-inline like below it works but not recommended.
context.Response.Headers.Append("Content-Security-Policy", string.Format("default-src 'none'; connect-src 'self'; font-src 'self'; img-src 'self' data: https:; style-src 'self'; script-src 'self' 'unsafe-inline'"));
For any other options such as nonce-(random), we see this CSP error message:
Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'self'". Either the
'unsafe-inline' keyword, a hash, or a nonce is required to enable
inline execution.
There is no such thing as 'safe-inline' for dynamic scripts, try to use dynamic imports instead? (you can reload such script in code)..
You shouldn't normally have to use 'unsafe-inline', two things that often becomes problematic is the live-reloading in development and setTimeout/setInterval in your code, they can trigger CSP easily. So better to just disable CSP in development to increase your delivery speed. 'unsafe-inline' is to enable execution of dynamically created scripts.
Update
To solve this you need to load a custom script using the standard (perhaps with async/defer) <script src="/myscript.js"></script> and 'unsafe-inline' requirement goes away. However, your technology choice ("webforms") might limit your options to do that. To test anyway, use a cdn url or a separate server (internal or external) to deliver your script. I have tested this locally with nodejs and it works as expected. The "problem" you have is most likely because that you write code like this (or code is put there):
<script>function unsafeInline() { ... }</script>
Modernizr is now v3.6.0 you use v2.8.3 and to make your error go away you can add this to your header:
<header>
<title>CSP Test</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdnjs.cloudflare.com/;">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</header>
From a related SO question:
If modernizr is injecting all that inline stuff than it seems like your choices are to either (a) add all those hashes, (b) use 'unsafe-inline' (but which basically defeats the whole purpose of CSP…), or (c) don’t use modernizr.
The answer to that question is: remove "inline stuff" from modernizr. You can always use document.body.style = "background: #000000;"; from an external library to set style (or other) attributes. I tried all "normal" code activities in an imported external script and it doesn't trigger CSP. By normal I also mean assign objects (functions) to the window object and executing them.
Look for *.createElement("script") or similar, since that will for sure trigger CSP.
Curious (and hard to diagnose) issue. I've added a CSP to my site, and it is working just fine, with 1 error which seems to only appear on Firefox (guessing it is a Mozilla CSP implementation anomaly). I'm not really sure, however, how to even really dig deeper into diagnosing this at this point. It does not appear to be hindering any functionality - everything seems to work, but I see the error popping on Firefox (and its reporting is quite spammy, which I could deal with in other ways, but would rather root cause and handle).
Here's the error (which appears on virtually every single page of the site):
Content Security Policy: The page’s settings blocked the loading of a resource
at self (“script-src https://code.jquery.com/”). Source: ;(function
installGlobalHook(window) { ....
I typically load jQuery via CDN, and have no problems with it loading and running, though I did try also downloading the jQuery and loading it internally (which also worked fine).
The full CSP is:
Content-Security-Policy:
default-src 'self';
base-uri 'self';
script-src 'self' https://code.jquery.com/;
form-action 'self';
font-src 'self' https://fonts.googleapis.com/ https://fonts.gstatic.com/;
style-src 'self' https://fonts.googleapis.com/
https://code.jquery.com/
'sha256N90MKmRow2DpYEVeqcc3uc8pOUsS4Rg4sNmkau1k0xQ='
'sha256-i1EfB2+xYUUG32uDRMNI/DN/F9YIrGWOYdHENz9GKME='
'sha256-75seZ0liXI7HbegtdV/WH+/9QQJ0CrDacBOViVFXckc='
'sha256-2KAnfZnKiF2um1+UfXP14UfR93HoXmam2Y1ipeMWRUI=';
frame-ancestors 'self';
report-uri /csp/csp-report
Just re-verified, only seeing the error on Firefox. I've reviewed other related issues, but nothing seems to address this issue directly (ex: CSP Violation Detected in Firefox OS validator).
Also, I'm noting the error appears in the console immediately after the page GET, but before all of the resource GETs (for scripts, css files, etc.), so I'm wondering (even more) if it could be a FF bug with CSP...?
Any thoughts or suggestions about how to proceed from this point would be very helpful - I've kind of run myself out of leads. Thanks!
** UPDATE ** - Ug. It is definitely React DevTools Firefox extension. Disable the extension, CSP violation goes away. Also, because this is a component of the extension itself, no way to use React DevTools with FireFox + CSP (with any level of security actually turned on). Blagh.
Solved this in a relatively sub-optimal way (IMHO).
Firefox apparently isn't a big fan of CSP's "default-src" attribute being set to 'self', as I had it in my config. Changing the "default-src" directive to my actual host source ('localhost' for dev and the actual domain 'https://*.foobar.com' for prod), the CSP violation for installGlobalHook(window) ceased.
FYI in case anyone else runs across this error...