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.
Related
I'm trying to run a test that involves iframes with firefox. The test works with chrome but not with firefox. It seems that when I get the iframe and subsequently try to find the body the body is returned as undefined.
Timed out retrying: Expected to find element: undefined, but never found it.
cy.get('iframe').then(($iframe) => {
const $body = $iframe.contents().find('body');
cy.wrap($body)
^
The html looks the same for firefox as it does for chrome. Does anyone know what the underlying issue is for that?
The most likely cause is the same origin policy.
In a nutshell, if the page loaded inside the iframe comes from a different domain than the parent page, then your javascript will not be allowed to access the DOM within the iframe.
The reason it is working for you on Chrome is likely because you have used this setting in your cypress.json config file to disable the same origin policy in Chrome:
"chromeWebSecurity": false
As of this writing (Nov 2020), Firefox sadly does not have an equivalent way to disable the same origin policy for testing purposes. The bug report is here.
I am working on an app using Django 2.1.5 with DRF 3.9.1 and on firefox browser console, I am getting this error:
downloadable font: download failed (font-family: "FontAwesome" style:normal weight:400 stretch:100 src index:2): bad URI or cross-site access not allowed source: http://softpro-admin-templates.websitedesignmarketingagency.com/assets/vendor_components/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0
After some googling, I came across this link https://github.com/ottoyiu/django-cors-headers/
As mentioned in the document I have installed the package and made the following modifications in the settings file:
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', #added at the top
-----
]
INSTALLED_APPS = [
'corsheaders',
]
But still, I am getting the same error. Can someone help me with this issue?
I'm assuming you're not the owner of softpro-admin-templates.websitedesignmarketingagency.com
Somewhere on your site, you're using fontawesome version 4.7.0 (A common icon font) but providing the above host as the source for this font. Due to CORS policies in most browsers, the host has to specifically allow this if the site the request originates from (yours) was fetched from a different domain (origin).
As the maintainer(s) of softpro-admin-templates.websitedesignmarketingagency.com likely don't know anything about your site, this hasn't been done. Change the src of fontawesome to your own server or the CDN suggested by fontawesome to solve this.
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...
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)
I am trying to port a chrome extension to firefox using the relatively new WebExtensions from Firefox.
I always getting the following error
Cross-Origin Request Blocked:
The Same Origin Policy disallows reading the remote resource at .... (Reason: CORS header 'Access-Control-Allow-Origin' missing)
I added the website i would like to access to the permissions section inside the manifest.json like explained on the website, and also on Google Chrome its working.
Normally it should work that way, at least its explained that way on https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#Cross-domain_privileges
I would be very thankful for any help since I am out of ideas.
manifest.json
{
...
"permissions": [
"<all_urls>"
]
}
I think you need to add a CSP header to your HTML page. http://content-security-policy.com/ I had to add one to get mine to work with a similar warning.