I recently added the following CSP policies for https://stefan.sofa-rockers.org/
default-src 'self'; style-src 'self' https://brick.a.ssl.fastly.net; font-src 'self' https://brick.a.ssl.fastly.net
It seems to work well on all browser, but Firefox is showing me this strange, truncated error message:
Content Security Policy: The page’s settings blocked the loading of a resource at self (“default-src https://stefan.sofa-rockers.org”). Source: (function (ERROR) {
const V8_STACK_.... stefan.sofa-rockers.org:1
Do I have an error in my CSP (all resources are getting loaded, so I don't think this is the case) or might this be a bug in Firefox itself?
It looks like you may be hitting a known Firefox bug that’s been partially fixed in Firefox 58. See the Improved Content Security Policy (CSP) Handling section of the following blog post:
https://blog.mozilla.org/addons/2017/11/20/extensions-in-firefox-58/
The relevant existing Firefox bugs are these:
https://bugzilla.mozilla.org/show_bug.cgi?id=1406278
https://bugzilla.mozilla.org/show_bug.cgi?id=1267027
And specifically, as noted in the comments here, if you have the Privacy Badger add-on installed, you might need to consider disabling it.
See also the following related Stack Overflow answers:
Firefox content script not loading in some pages
Content Security Policy failing on line 1 (Firefox 57.0)
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?
I pasted the googletag manager code in my joomla website, But it showing following error in console. and also not reflection in the google dashboard
Refused to load the script 'https://www.googletagmanager.com/gtm.js?id=GTM-T44GGZR' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' 'unsafe-eval' data: *.googleapis.com *.gstatic.com *.google-analytics.com *.youtube.com *.g.doubleclick.net https://s.ytimg.com/yts/jsbin/ *.googleadservices.com *.google.com *.google.cz http://platform.linkedin.com cdnjs.cloudflare.com static.hotjar.com widget.prodpad.com api-widget.prodpad.com vars.hotjar.com script.hotjar.com insights.hotjar.com wss://ws4.hotjar.com www.google.com.pk wss://ws1.hotjar.com wss://ws5.hotjar.com https://www.transguardgroup.com". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
Google Tag Manager is a script injector (and actually it injects itself via a few lines of bootstrap code), so it will not work with unsafe-inline in place.
Simo Ahava has an article about configuring your CSP for GTM, but that basically removes the protection your CSP is supposed to offer, so you have to choose between the convenience of GTM or the security via a 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...
Context
I am currently working on a browser extension which is working as expected with Chrome and Opera but I am facing issues with Firefox. Here is a minimal version of manifest.json needed to reproduce the problem:
{
"name": "Example",
"version": "0.0.1",
"author": "Pyves",
"content_scripts": [
{
"all_frames": true,
"matches": [
"<all_urls>"
],
"js": [
"content.js"
]
}
],
"manifest_version": 2
}
And here is the related content.js:
console.log("Content script loaded");
Issue
Content script loaded is systematically logged regardless of the visited page when using Chrome and Opera. Nevertheless, the content script doesn't seem to load in some pages when using Firefox, for instance raw GitHub pages such as the following:
https://raw.githubusercontent.com/badges/shields/master/README.md
There are no error messages in the Firefox console stating why the content script was not executed on that particular page.
Questions
Why is the Firefox extension unable to load the content script into some pages?
What changes need to be made so that the extension works consistently on all browsers?
I finally figured out why the extension's content script is not loading in some pages when using Firefox.
After analysing the requests with the Network developer tools, it turns out that the following headers are returned when getting GitHub raw pages:
Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline'; sandbox
According to the MDN Web Docs, the sandbox CSP directive has the following effect:
enables a sandbox for the requested resource [...]. It applies
restrictions to a page's actions including preventing popups,
preventing the execution of plugins and scripts, and enforcing a
same-origin policy.
Therefore Firefox is preventing extensions from executing content scripts in pages with the sandbox CSP, whereas other browsers such as Chrome and Opera do allow this behaviour. Related bug reports in Mozilla's Bugzilla (1267027 and 1411641) highlight that:
CSP 'sandbox' directive prevents content scripts from matching, due to unique origin
This issue has been acknowledged and will hopefully be fixed in future releases of Firefox.
I am having an issue adding font awesome to my ASP.NET Core MVC (ASP.NET Core 2) application. I am simply trying to add the CSS library called font awesome to my MVC project. I have tried two approaches
1) Adding the font awesome CDN like so
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
but when I add the CDN I get the CSP errors in Chrome
Refused to load the stylesheet
'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'
because it violates the following Content Security Policy directive:
"default-src 'self'". Note that 'style-src' was not explicitly set, so
'default-src' is used as a fallback.
So I tried adding the correct meta tags. I tried MANY combinations and nothing seemed to work. For example,
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' http://maxcdn.bootstrapcdn.com
'unsafe-inline' 'unsafe-eval';
style-src 'self' http://maxcdn.bootstrapcdn.com
'unsafe-inline' 'unsafe-eval'; " />
I was still getting errors related to CSP in Chrome.
2) The second approach I took was to add the font awesome CSS file in my project. I did this and then added the corresponding reference like so:
<link rel="stylesheet" href="~/css/font-awesome.min.css">
When I did this I got the following errors despite the file being in the correct location and being referenced correctly:
GET http://localhost:5000/fonts/fontawesome-webfont.woff2?v=4.7.0 net::ERR_ABORTED
GET http://localhost:5000/fonts/fontawesome-webfont.woff?v=4.7.0 net::ERR_ABORTED
GET http://localhost:5000/fonts/fontawesome-webfont.ttf?v=4.7.0 404 (Not Found)
I looked into this issue and found that it could be related to the static file handler. I then modified the app.UseStaticFiles() to take an options parameter like this:
StaticFileOptions staticFileOptions = new StaticFileOptions();
FileExtensionContentTypeProvider typeProvider = new FileExtensionContentTypeProvider();
if (!typeProvider.Mappings.ContainsKey(".woff2"))
{
typeProvider.Mappings.Add(".woff2", "application/font-woff2");
}
if (!typeProvider.Mappings.ContainsKey(".woff"))
{
typeProvider.Mappings.Add(".woff", "application/font-woff");
}
if (!typeProvider.Mappings.ContainsKey(".ttf"))
{
typeProvider.Mappings.Add(".ttf", "application/font-ttf");
}
staticFileOptions.ContentTypeProvider = typeProvider;
app.UseStaticFiles(staticFileOptions);
But I still got the error above.
Does anyone know what I am doing wrong? I can add font awesome through its CDN or add the font awesome CSS file in my application if need be.
That policy quoted in the error message in the question has default-src 'self' but the policy shown from your meta element doesn’t. That seems to indicate your document’s being served with a policy in a Content-Security-Policy HTTP header in addition to the one in the meta.
And that other policy is relatively strict in that it has default-src 'self' and no style-src. So while you’re specifying another less-strict policy using that meta, the problem’s that the way CSP works when you specify multiple policies is, the most-strict policy always wins. So your browser’s basically ignoring your meta policy and just using the policy specified in the HTTP header.
The solution is: find the place in the server code which is adding that Content-Security-Policy HTTP header, and either change it so it has the exact policy you want, or else remove that part of the server code altogether, and instead just set the policy using the meta element.