I'm trying to run the default example code (using my Client ID) linked at:
https://developers.google.com/identity/sign-in/web/
The code runs correctly on Google Chrome browser (returning all user infos) while it throws an exception using Firefox:
"uncaught exception: [object Object]"
Can anyone help me?
Best Regards
Please delete all cookies from google and clear your cache then restart Firefox. If does not work go back into cookies and clear everything that you know you do not need. Also check your Firewall software see if anything adds up to google and can put a exemption in maybe. Also turn off any adblockers when go to the site.
If that does not work https://support.mozilla.org/en-US/kb/refresh-firefox-reset-add-ons-and-settings
In SSL case only; put in HEAD the following meta
<meta http-equiv="Content-Security-Policy" content="default-src https:; script-src https: 'unsafe-inline'; style-src https: 'unsafe-inline' ">
Even though https: is specified in default-src, the script and style directives don't automatically inherit that source. Each directive completely overwrites the default for that specific type of resource.
Related
I need to use Stripe in my application but I keep getting the error below in the browser console.
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).
I've tried to fix it by setting a rule in Content-Security-Policy but I cannot make it work.
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' https://js.stripe.com />
<script type="text/javascript" src="https://js.stripe.com/v3/"></script>"
I run the code in localhost and I am using Firefox Developer Edition.
How can I fix this error?
To allow a script resource at inline, your CSP needs to have 'unsafe-inline' set. But as you can understand from the name, this is unsafe and should be avoided if possible. Rather see if you can move the script code to a separate file.
Also, it seems like you are hitting a problem with a CSP and try to solve it by adding another one. Another CSP can only make it stricter, you can't allow something restricted by the original CSP. You should see if there is a CSP in a response header and modify that one instead.
My script-src for my website continues to produce an error and refuses to load my scripts which lie within my Header.html file, and I have tried multiple websites, including reading the docs, however I am unsure of what I am doing wrong of if I just need to be patient and wait for it to take effect on my site.
I am currently using a Meta tag for my CSP policy,
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval';">
<script src='https://th4rjdmmrjsz.statuspage.io/embed/script.js'></script>
However, regardless of what I do with it nothing seems to work, I have used sites like RapidSec and the CSP site itself, including an auto generator, and nothing seems to have worked. What am I doing wrong here?
Edit: Added an example script.
CSP has versions (or levels) with newly supported features extending the original spec. Serving the CSP through an html meta header is considered legacy and has some drawbacks/bugs. Try setting CSP via the HTTP headers of the request.
Also, if you're using RapidSec, you can use the integrations (Wordpress plugin, Node.js package) that do this automatically for you.
I have a Vue application that uses SSR. In order to implement Content-Security-Policy, I use nonce-aware version of GTM snippet.
But it was not adding the nonce to all scripts that get injected by gtm to the page (specifically Custom HTML tags). I followed the solution mentioned here and it fixed the issue on Safari. But it doesn't work on Chrome, Firefox, or Edge and I still see the error for those tags:
this is my CSP settings:
default-src 'self';
base-uri 'self';
block-all-mixed-content;
font-src 'self' https: https://fonts.gstatic.com data:;
img-src 'self' https: data: https://www.google-analytics.com https://ssl.gstatic.com https://www.gstatic.com https://www.googletagmanager.com;
object-src 'none';
script-src 'self' 'nonce-b62382357618aee340fc9dc596c94a19' https://www.google-analytics.com/ https://ssl.google-analytics.com https://tagmanager.google.com https://www.googletagmanager.com 127.0.0.1:*;
script-src-attr 'none';
style-src 'self' 'unsafe-inline' https://tagmanager.google.com https://fonts.googleapis.com;
upgrade-insecure-requests;
connect-src 'self' https://www.google-analytics.com https://stats.g.doubleclick.net;
After hours and hours of research I found the following comment:
Chrome masks the nonce attribute value so tag manager is unable to grab it and store it as a variable.
I am not sure if this is really the issue but can anyone please explain how I can tackle this issue without using unsafe-inline or hashes as it seems there is no standard way of fixing it even on Google documentations?
After searching a lot on the internet and reading different articles, I found out the solution mentioned here works perfectly well in Safari but not in other browsers because:
Chrome, Safari, and Edge mask the nonce attribute value so GTM is unable to grab it and store it as a variable.
Considering this solution for propagating the nonce to the custom HTML tags, we go ahead and apply the following changes to fix this issue on Chrome, Firefox, and Edge.
As suggested here in the comments we need to modify the nonce-aware script a little bit and put the nonce in a data- attribute (then the browsers won't mask it), and push it to the dataLayer:
<!-- Google Tag Manager -->
<script
nonce='{{YOUR_GTM_NONCE}}'
data-gtm-nonce='{{YOUR_GTM_NONCE}}'
>
(function(w,d,s,l,i){
const gtmNonce = d.querySelector('[data-gtm-nonce]').dataset.gtmNonce;
w[l]=w[l]||[];
w[l].push({'nonce': gtmNonce});
w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
const f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
j.async=true;
j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
j.setAttribute('nonce', gtmNonce);
f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','YOUR_GTM_ID');
</script>
<!-- End Google Tag Manager -->
Then in the GTM, you need to change the nonce variable you defined based on this solution from this:
to this:
The rest will be kept the same.
I am trying to create a super simple website just to show content and have another page be able to change said content on the page. (Security is of 0 concern so feel free to post really sketchy answers).
But when I visit the site (hosted on a digital ocean server behind NGINX), I get the following error:
Refused to connect to wss://subdomain.domain.online/socket.io/?EIO=4&transport=websocket&sid=SIDHERE because it appears in neither the connect-src directive nor the default-src directive of the Content Security Policy.
I have looked everywhere and got to this policy of:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' wss: ws: *; connect-src 'self' ws: wss: *;">
But still get the error, I was wondering if anyone would know a fix.
Cheers, Sam.
Look like you have publish 2 CSPs - one via <meta http-equiv='Content-Security-Policy'> tag and the second one via CSP HTTP header. In this case the most stringent policy apply.
The second CSP is published on server by Helmet middleware, Helmet version 4 have CSP swiched on with default rules.
Disable CSP in helmet.contentSecurityPolicy(options) if you wish to use tag:
app.use(
helmet({
contentSecurityPolicy: false,
})
);
or configure CSP header in Helmet and do not use meta tag.
I wrote a program that generated an html file with this header:
but I don't have iframe at all, let alone in sandbox
When I open the page in the browser (hosted on a Jenkins server) I see no css.
These are the errors (security policy)
I have seen some posts on stockoverflow, saying the <meta> should be like:
<meta http-equiv="content-type" content="text/html; charset=utf-8 ;">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' http://onlineerp.solution.quebec 'unsafe-inline' 'unsafe-eval'; style-src 'self' maxcdn.bootstrapcdn.com">
but as you can see in my print screen that didn't help
any idea, how can I fix this?
You're serving an HTML page from Jenkins, so Jenkins controls the response headers, not your content. Recent security fixes in Jenkins imposed a strict default Content Security Policy. You should be able to see the Content-Security-Policy header inserted by Jenkins in the response headers.
One solution is to relax the Jenkins configuration, see the Configuring Content Security Policy wiki page for details:
The CSP header sent by Jenkins can be modified by setting the system property hudson.model.DirectoryBrowserSupport.CSP:
If its value is the empty string, e.g. java -Dhudson.model.DirectoryBrowserSupport.CSP= -jar jenkins.war then the header will not be sent at all.
(Warning!) This is potentially very unsafe and should only be used after reviewing the overall security setup.
You can experiment with different settings using the Jenkins Script Console. To enable CSS and images from external sites, you could use something like:
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "sandbox; default-src 'self'; img-src '*'; style-src '*' 'unsafe-inline';")
Another solution is to publish (deploy) the generated page(s) on another server where you can control the content security policy.