I have an express demo site using google sign in button and I have recently added Helmet JS to make the server more secure with the right headers.
Without HelmetJS, the Sign in Button loads without any problem and is able to pick logged in user as well. However after enabling Helmet JS in index.js and setting the required Content Security Policies (CSP) in the Helmet configurations, the following 2 scenarios happen:
Sign in Button loads, but doesn't work, with the following COEP error:
To mitigate this, I added crossorigin="anonymous" to the script header like so:
<script crossorigin="anonymous" src="https://accounts.google.com/gsi/client" async defer></script>
as advised here
Doing this, however, leads to the following CORS error and the button doesn't load, since the client library is not loaded:
I have gone through the following similar SO questions to no avail, I'm not sure if I'm missing something, since there is a lot to absorb for understanding COEP / CORP and others.
Cross-Origin-Embedder-Policy: how to allow only certain domains?
Helmet Express ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200
Ressources not loaded after setting CSP and CORP headers using Helmet
The other options left is to disable COEP in Helmet, which I'm not sure is advisable. Please help, what exactly is the way forward for using COEP in such a scenario.
Thank you for your time!
I have hosted my SPA in Firebase Hosting, and my API Nodejs server in Google App Engine. Now I'm stuck at enabling CORS when calling an endpoint from my SPA.
I have tried adding it in my app.yaml with no luck:
handlers:
- url: /
static_dir: /
http_headers:
Access-Control-Allow-Origin: "*"
Any other ideas?
EDIT:
I would like to also avoid using the cors npm package cuz I think CORS handling should be done at the network level like Nginx but what is the equivalent of Nginx in GAE?
I understand your point and concerns, but I would recommend you to set the CORS properly, for the Firebase and App Engine to work properly.
Considering that, I searched for some sources and articles that might help you configure it, including options that you might find a better fit for your needs.
CORS on App Engine
Handlers Element
Google App Engine and CORS
Let me know if the information helped you!
I've been trying to enable Cross-origin-resource-sharing using the links below:
How to allow CORS?
http://enable-cors.org/server_expressjs.html
Disable same origin policy in Chrome
But i couldn't,
I'm using react-starter-kit and
I think it should be something related to browser-sync.
Is there's anyone can help me with that?
I have a bookmarklet which uses jQuery and parses some elements on the page. To use jQuery, i am creating a script tag(with src as the jQuery URL) dynamically and appending to the head tag. This works well for many sites. But, there are few sites like Facebook, for which the bookmarklet is not able to inject the external JS file into the dom.I came to know that this behaviour is because of the response header "Content Security Policy" which prohibits the inclusion of scripts from any other unauthorized domain. This is to prohibit XSS atacks.
I have a genuine case to insert an external JS file into the DOM. Is there any workaround to by pass the Content Security Policy?
Self-contained bookmarklets are another possibility. Here's jQuery 3.3.1.
Take
javascript:(function(){
})();
And fill the empty line with the jQuery source code, for example the contents of https://code.jquery.com/jquery-3.4.1.min.js .
Afterward set it as URL of your bookmark(let).
The spec says (at least I think it still does) that CSP should not prevent bookmarklets, but no browser has implemented this. Your only option is to disable CSP in the browser or use an extension.
In Firefox, how do I do the equivalent of --disable-web-security in Chrome. This has been posted a lot, but never a true answer. Most are links to add-ons (some of which don't work in the latest Firefox or don't work at all) and "you just need to enable support on the server".
This is temporary to test. I know the security implications.
I can't turn on CORS on the server and I especially would never be able to allow localhost or similar.
A flag, or setting, or something would be a lot better than a plugin. I also tried: http://www-jo.se/f.pfleger/forcecors, but something must be wrong since my requests come back as completely empty, but same requests in Chrome come back fine.
Again, this is only for testing before pushing to prod which, then, would be on an allowable domain.
Almost everywhere you look, people refer to the about:config and the security.fileuri.strict_origin_policy. Sometimes also the network.http.refere.XOriginPolicy.
For me, none of these seem to have any effect.
This comment implies there is no built-in way in Firefox to do this (as of 2/8/14).
From this answer I've known a CORS Everywhere Firefox extension and it works for me. It creates MITM proxy intercepting headers to disable CORS.
You can find the extension at addons.mozilla.org or here.
Check out my addon that works with the latest Firefox version, with beautiful UI and support JS regex: https://addons.mozilla.org/en-US/firefox/addon/cross-domain-cors
Update: I just add Chrome extension for this https://chrome.google.com/webstore/detail/cross-domain-cors/mjhpgnbimicffchbodmgfnemoghjakai
The Chrome setting you refer to is to disable the same origin policy.
This was covered in this thread also:
Disable firefox same origin policy
about:config -> security.fileuri.strict_origin_policy -> false
I have not been able to find a Firefox option equivalent of --disable-web-security or an addon that does that for me. I really needed it for some testing scenarios where modifying the web server was not possible.
What did help was to use Fiddler to auto-modify web responses so that they have the correct headers and CORS is no longer an issue.
The steps are:
Open fiddler.
If on https go to menu Tools -> Options -> Https and tick the Capture & Decrypt https options
Go to menu Rules -> Customize rules. Modify the OnBeforeResponseFunction so that it looks like the following, then save:
static function OnBeforeResponse(oSession: Session) {
//....
oSession.oResponse.headers.Remove("Access-Control-Allow-Origin");
oSession.oResponse.headers.Add("Access-Control-Allow-Origin", "*");
//...
}
This will make every web response to have the Access-Control-Allow-Origin: * header.
This still won't work as the OPTIONS preflight will pass through and cause the request to block before our above rule gets the chance to modify the headers.
So to fix this, in the fiddler main window, on the right hand side there's an AutoResponder tab.
Add a new rule and response:
METHOD:OPTIONS https://yoursite.com/ with auto response: *CORSPreflightAllow
and tick the boxes: "Enable Rules" and "Unmatched requests passthrough".
See picture below for reference:
Best Firefox Addon to disable CORS as of September 2016: https://github.com/fredericlb/Force-CORS/releases
You can even configure it by Referrers (Website).
As of June 2022, Mozilla Firefox does allow you to natively change the CORS configuration. No extra addons are required. As per Mozilla docs you can change the CORS setting by changing the value of the key content.cors.disable
To do so first go to your browser and type about:config in your address bar as shown in the
Click on accept risk and continue, since you are on this stack overflow page we assume you are aware of the risks you are undertaking.
You will see a page with your user variables. On this page just search for key content.cors.disable as
You do not have to type in true or false values, just hit the toggle button at the far right of you in the screen and it will change values.
While the question mentions Chrome and Firefox, there are other software without cross domain security. I mention it for people who ignore that such software exists.
For example, PhantomJS is an engine for browser automation, it supports cross domain security deactivation.
phantomjs.exe --web-security=no script.js
See this other comment of mine: Userscript to bypass same-origin policy for accessing nested iframes
For anyone finding this question while using Nightwatch.js (1.3.4), there's an acceptInsecureCerts: true setting in the config file:
firefox: {
desiredCapabilities: {
browserName: 'firefox',
alwaysMatch: {
// Enable this if you encounter unexpected SSL certificate errors in Firefox
acceptInsecureCerts: true,
'moz:firefoxOptions': {
args: [
// '-headless',
// '-verbose'
],
}
}
}
},