I am trying to add content security policy to my V3 manifest file for applying reCaptcha v3 to my chrome extension but I keep getting the following error
'content_security_policy.extension_pages': Insecure CSP value "https://google.com" in directive 'script-src'.
My CSP is given below, what am I doing wrong?
"content_security_policy": {
"extension_pages": "script-src 'self' https://*.google.com https://*.gstatic.com; object-src 'self'"
}
Related
Hello everybody thanks for reading.
I have a problem with Ckeditor, Now i use Content-Security-Policy and editor do not show buttons like the image
if i delete this line
Header always set Content-Security-Policy: "style-src 'self' www.site.com; child-src https://www.youtube.com"
work good
now what can i do , do you have a idea? Please help me, thanks a lot.
To publish CSP via the Header always set Content-Security-Policy:... is not good idea.
Such CSP header will be sent with any content: .js, .css, .jpeg and word always means that it will be send not only with pages having '200 OK' status, but for Error / Redirect / Not Modified / etc.
You have no flexibility to manage such header. If your web page will publish own Content-Security-Policy header, for example via PHP header("Content-Security-Policy: default-src 'self';", you will have 2 glued CSP headers with unpredictable consequences.
In your case - you do not need to publish CSP header in the admin panel (where you do use Ckeditor). But due to para 2 of above, you have the CSP header everywhere and have no possibility to switch it off.
Mush better to use some plugins for your CMS for CSP header management. Such plugins smart enough and do not publush CSP in the admin panel and for error/redirect pages.
If you do not use CMS, you can publish CSP, for example via header() PHP function in appropriate index.php (since you use Ahache web server).
PS: If you do use CKeditor in the site (non in the admin) - you need to expand your CSP rules to allow CKeditor scripts and styles.
UPDATE
Judging by the comments, webmasters are having difficulties with CSP for CKEditor, but no one said which version: 4 or 5.
Content Security Policy for Ckeditor-4 if it's loaded from cdn.ckeditor.com CDN:
connect-src https://pdf-converter.cke-cs.com;
form-action 'self';
img-src cdn.ckeditor.com;
script-src 'unsafe-inline' cdn.ckeditor.com;
style-src 'unsafe-inline' cdn.ckeditor.com;
* SKE-4 is incompatible with 'nonce-value' and requires mandatory 'unsafe-inline' because a lot of inline scripts.
Content Security Policy for Ckeditor-5 if it's loaded from cdn.ckeditor.com CDN:
connect-src https://docx-converter.cke-cs.com https://pdf-converter.cke-cs.com;
form-action 'self';
script-src 'unsafe-inline' https://cdn.ckeditor.com/ckeditor5/;
style-src 'unsafe-inline';
* SKE-5 scripts are compatible with 'nonce-value' so you can get rid of 'unsafe-inline' in script-src.
Content Security Policy for Ckeditor-5 if it's loaded from server where site is placed:
connect-src https://docx-converter.cke-cs.com https://pdf-converter.cke-cs.com;
form-action 'self';
script-src 'self' 'unsafe-inline';
style-src 'unsafe-inline';
PS: The connect-src https://docx-converter.cke-cs.com https://pdf-converter.cke-cs.com; is required only if "Export to PDF" and "Export to Word" buttons are used.
if use nonce, I do like this
(function(cke) {
var _owrite = cke.dom.document.prototype.write;
cke.dom.document.prototype.write = function(src) {
src = src.replace(/<script/gmi, '<script nonce="' + nonceValue + '"');
_owrite.apply(this, [src]);
};
})(CKEDITOR);
A simple solution i used in my project after several fail trials to whitelist Ckeditor, is to exclude CSP urls prefixes that going to use rich text editor.
In my case it was the product admin page.
I have a web server that generates a http/html response to a GET request. I have added the following response header: content-security-policy: default-src 'nonce-Z2lnkA9A00KuJsXvx94P6hyDdyRUaxFCiV9lUS0XgWo' 'self' *.my-org.net *.my-org.com fonts.googleapis.com fonts.gstatic.com *.amazon.com;.
I then add the following tags to my html document:
<!-- these tags are blocked in firefox -->
<style nonce="Z2lnkA9A00KuJsXvx94P6hyDdyRUaxFCiV9lUS0XgWo"> some inline code ....
<script nonce="Z2lnkA9A00KuJsXvx94P6hyDdyRUaxFCiV9lUS0XgWo"> some inline code ....
<!-- this tag works as expected in all browsers-->
<script src="/scripts/utils.js"></script>
This code executes correctly in chrome and edge, but firefox is blocking the inline script tags, while allowing the fetched script tags to execute.
The error in the firefox console is: Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”).
It seems like Firefox doesn't support nonces in default-src. If you specify the script-src and style-src directives with the necessary sources it should work. I tested this with Firefox 77 and 79.
I implemented reCAPTCHA v3 on my website, all is working fine, I'm getting a score back and everything on the server-side.
However, I'm getting tons of Content Security Policy warnings in the console (Firefox):
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified
No idea why I'm getting these. I just implemented v3 as usual.
In the head tag:
<script src='https://www.google.com/recaptcha/api.js?render=SITEKEYHERE'></script>
In the body tag:
<form id="loginForm" action="test.php" method="post">
...
<input type='hidden' name='recaptcha_response' id='recaptchaResponse'>
</form>
...
<script src="https://www.google.com/recaptcha/api.js?render=SITEKEYHERE "></script>
<script>
grecaptcha.ready(function () {
grecaptcha.execute('SITEKEYHERE', { action: 'login' }).then(function (token) {
var recaptchaResponse = document.getElementById('recaptchaResponse');
recaptchaResponse.value = token;
});
});
</script>
I'm expecting there to be no warnings at all, yet I'm getting 6.
Please refer this example code to add this in your head tag
Content-Security-Policy: script-src 'self' https://apis.google.com
You will get more information from this page
https://developers.google.com/web/fundamentals/security/csp/
Also fix the mixed content errors
This warning cannot fix and you have to just ignore it.
This is a problem between the browser and google and in whole internet there is no solution to clear your console from it.
More info are in:
https://stackoverflow.com/a/55835120/16212595
and
https://www.reddit.com/r/firefox/comments/fpptyj/firefox_content_security_policy_console_output/
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.
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.