How to allow scripts in HTML in CSP - html

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.

Related

how to set Content-Security-Policy for Stripe?

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.

Is Google Sign-In not supported on Firefox?

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.

Adding google fonts (fonts.googleapis.com) to CSP header

I am hosting a personal project on gitHub pages, and using cloudflare to enforce https. Now I would like to implement a CSP policy.
I tried adding meta tag to the head of my page:
<meta HTTP-EQUIV='Content-Security-Policy' CONTENT="default-src 'self' *.fonts.googleapis.com/* *.cloudflare.com/* *.fonts.googleapis.com/*;">
But I am getting the following error:
Refused to load the stylesheet
'https://fonts.googleapis.com/icon?family=Material+Icons' because it
violates the following Content Security Policy directive: "default-src
'self' .fonts.googleapis.com/ .cloudflare.com/
.fonts.googleapis.com/". Note that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
This are the scripts that I am including:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans|Roboto" rel="stylesheet">
won't setting *.fonts.googleapis.com/* allow everything from the page?
Since this is the first time I am setting a CSP is this the correct way to set it for github pages? I have not found any reading on this yet.
Won't setting *.fonts.googleapis.com/* allow everything from the page?
Although this would be intuitive, the answer is no.
See the pretty good HTML5rocks introduction to Content Security Policy on the topic of wildcards (section Implementation details):
Wildcards are accepted, but only as a scheme, a port, or in the leftmost position of the hostname: *://*.example.com:* would match all subdomains of example.com (but not example.com itself), using any scheme, on any port.
So a working CSP for the two fonts could look something like this:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.googleapis.com/ https://fonts.gstatic.com/ 'unsafe-inline';">
Note 1: It's a good practice to use the corresponding CSP directives. In your case you should use the font-src and style-src like so:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' https://fonts.gstatic.com/; style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline';">
The advantage of using the corresponding directives is that your CSP gets pretty restrictive now. E.g., you're not allowing 'unsafe-inline' for script sources anymore. This means inline javascript is now forbidden. It's also forbidden to load scripts from https://fonts.gstatic.com/, which was allowed before. And so on...
Note 2: You can get rid of the 'unsafe-inline' keyword at all by using a hash or a nonce. I have not been able to make this work for this example but if you're interested, just take a look at the HTML5rocks intro again.

What exactly does the http-equiv value 'Content-Security-Policy' do?

I'm creating a mobile application using Apache Cordova/Adobe Phonegap, and this code snippet was automatically generated. It's giving me this error in the Console inside Google Chrome.
Refused to load the stylesheet
'https://fonts.googleapis.com/css?family=Open+Sans' because it
violates the following Content Security Policy directive: "style-src
'self' 'unsafe-inline'".
What exactly does this HTML meta element do?
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
Short answer: If you want the https://fonts.googleapis.com/css?family=Open+Sans stylesheet to be loaded by browsers instead of blocked, then change the content value of the meta element so that it looks like this:
<meta http-equiv="Content-Security-Policy"
content="default-src * 'unsafe-inline';
style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline'; media-src *" />
Longer explanation
That meta http-equiv="Content-Security-Policy" element provides a Content Security Policy that specifies some restrictions on what origin browsers can load the page assets from and what kinds of JavaScript and CSS content browsers will allow the page to specify inline.
As far as the specific part of those restrictions that’s relevant to the message you cite, it’s the restriction style-src 'self', which has the meaning “Only allow loading of external stylesheets from the same origin (same scheme+host+port) that the page is served from”.
So, because your page tries to load https://fonts.googleapis.com/css?family=Open+Sans—a stylesheet from a different origin than the page itself—and your meta http-equiv="Content-Security-Policy" includes a restriction that says “Don’t do that”, then browsers obey that restriction and refuse to load that stylesheet, and the message that you cite gets logged.
The <meta> tag provides Metadata (data about data) about the Web page. It's not displayed on the page, but it is parsed through by the browser.
Read more about the <meta> tag here.
Regarding the Meta tag in question, the Content-Security-Policy meta-tag allows you to reduce the risk of XSS attacks by allowing you to define where resources can be loaded from, preventing browsers from loading data from any other locations. This makes it harder for an attacker to inject malicious code to your site, as worded from this answer.

because the document's frame is sandboxed and the 'allow-scripts' permission is not set

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.