I'm using Cloudflare to do so. Is it necessary to add a Google Recaptcha to the login page?
Also, does Helmet interfere with Cloudflare's Bot Fight Mode?
I noticed when I refresh my every Express app page, in the browser console, there's a warning related to Cloudflare:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'. Either the 'unsafe-inline' keyword, ...
In front-end, execution of:
<script src="/cdn-cgi/scripts/.../cloudflare-static/rocket-loader.min.js" data-cf-settings="...
faces some problem, I guess (the code was added by Cloudflare).
In Helmet's official docs, i found this link that evaluates the security of your site based on the response header:
https://helmetjs.github.io/ https://csp-evaluator.withgoogle.com/
I used this code in my back-end:
`app.use(helmet.contentSecurityPolicy(
{
directives:{
scriptSrc:["'self'","https://cdnjs.cloudflare.com"]
}
}
))`
And csp-evaluator says it's all ok but:
cdnjs.cloudflare.com is known to host Angular libraries which allow to bypass this CSP
My back-end code has nothing to do with Angular.
How to solve it?
Related
I cannot succeed in including Vue 3 in a simple Chrome extension. I created a local folder within the extension with the
following structure and content
but I always get the following error message when I try to lead the library from any extension's pages:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-NEG1aW1******'), or a nonce ('nonce-...') is required to enable inline execution.
I don't understand the issue. Any other library that I bundle directly inside the extension has always worked just fine, but this is not happening with Vue.
Does anyone have any idea?
Thanks!
I'm making a chrome extension that will create an iframe, inject it into the page, and then run a react app inside that iframe. I'm making the react app with Create React App and one of the <script/>s in build/index.html will not be executed due to security issues.
The index.html has three <script/>s in it:
<script>!function(e){function r...<LONG CHUNK OF BUNDLED CODE></script>
<script src="/static/js/2.f6218dca.chunk.js"></script>
<script src="/static/js/main.c335a43f.chunk.js"></script>
The first script listed above is a large bundled script that I mainly cut out here. The second two seem to load and run fine, but I get the following error message for the first one.
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-ssRao1c5f8Pf3VvQXjkNHGmrQ6+tZ7Fuaxxxxxxxxxx='), or a nonce ('nonce-...') is required to enable inline execution.
I have encountered this error before when working with manifest v2 and know there are a bunch of answers showing how to get around it, but they don't seem to work with manifest v3. As stated here about the new v3 security policies:
"The script-src, object-src, and worker-src directives may only have
the following values:
self
none
Any localhost source, (http://localhost, http://127.0.0.1,
or any port on those domains)"
therefore the error message above seems to be outdated. If I add 'unsafe-inline' or 'sha256-ssRao1c5f8Pf3VvQXjkNHGmrQ6+tZ7Fuaxxxxxxxxxx=' to my content security policy I can't load the extension into Chrome - it's rejected with a message like "'content_security_policy.extension_pages': Insecure CSP value "'unsafe-inline'" in directive 'script-src'."
Also it seems I have the right v3 security policy set for the other two scripts - I can verify this by changing it and getting three of the above error messages, one for each script.
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'"
},
Is there anyway to load the first script of bundled js code? Or would I have to put it in another file and load it with <script src="/path/to/new_file.js"...?
Also here is the code in my content script that creates the iframe and injects the react app into it, in case it's relevant:
const modal = document.createElement('dialog');
modal.setAttribute("style", "height:40%");
modal.innerHTML =
`<iframe id="headlineFetcher" style="height:100%"></iframe>
<div style="position:absolute; top:0px; left:5px;">
<button>x</button>
</div>`;
document.body.appendChild(modal);
const dialog = document.querySelector("dialog");
dialog.showModal();
const iframe = document.getElementById("headlineFetcher");
iframe.src = chrome.runtime.getURL("index.html");
iframe.frameBorder = 0;
You'll need to set an environment variable to tell it to not use an inline script:
INLINE_RUNTIME_CHUNK=false
Add this to your .env file and when you rebuild the offending bit of React is placed into a file.
I have an express app which is loading some external assets, but they're getting blocked by CSP. I've never had this issue before, but this is the first time im using passport.js and helmet.js within an app so maybe this has something to do with their configuration?
Refused to load the image 'https://fake-url.com' because it violates the following Content Security Policy directive: "img-src 'self' data:".
I've tried adding a meta tag to allow images from external sources but this seems to have no effect. Any help would be appreciated.
You have
content="default-src 'none'
This prevents loading resources from any source. Remove it.
Then change it to:
default-src 'self' fake-url.com';
More info bout the HTTP Content-Security-Policy response header below:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
https://content-security-policy.com/
I have ASP.NET Core application and i am using Telerik's UI for ASP.NET Core framework for certain widgets like Date, DropDownList, Charts etc.
Application is loading all javascripts, images, css from its own server. So i have enabled CSP policy as below
script-src 'self' 'unsafe-eval';
style-src 'self' 'unsafe-inline';
img-src 'self' data:;
font-src 'self';
media-src 'none';
object-src 'none';
child-src https://xxxx.yyyy.com;
report-uri http://myapplication/csp/report;
However when the page load i see error in chrome's console
Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'self' 'unsafe-eval'".
Either the 'unsafe-inline' keyword, a hash
('sha256-oii70XYoqukWS9204nbwatxgYOYcr06+rftc4egdfUk='), or a nonce
('nonce-...') is required to enable inline execution
this error is repeated for several Kendo widgets that i'm using on that page. For example date widget. In cshtml i have configured date as below
#(Html.Kendo().DatePicker()
.Name("sbDate")
.HtmlAttributes(new { #class = "mydate" }))
which gets render in html as
<input class="mydate" id="sbDate" name="sbDate" type="date" value="" /><script>jQuery(function(){jQuery("#sbDate").kendoDatePicker({"format":"M/d/yyyy","footer":false});});</script>
I have already gone through Telerik's suggestion here and here for CSP. And as per the suggestion i only i have to add unsafe-eval to get widgets working. However looks like that is not true. I also have to add unsafe-inline to get widgets working.
But the whole point of enabling CSP is to not allow inline scripts.
Questions
Is there any way to solve this issue?
Update 1
Widgets only works in IE 11 without adding unsafe-inline. In chrome and IE edge widget requires unsafe-inline to work.
The solution below might work (i have not tried yet)
1> Add Deferred method for each kendo widget. Like
#(Html.Kendo().DatePicker().Name("BeginDate").Deferred())
2> In each view that is using Kendo control, at the bottom add the script tag
<script asp-add-nonce="true">
#Html.Kendo().DeferredScripts(false)
</script>
Note that asp-add-nonce is not out of the box from asp.core. You have to install Joonasw.AspNetCore.SecurityHeaders nuget library. I found this article from the author that shows how to configure CSP for .net core application and also how to generate new nonce for each request.
3>Dont configure CSP policy in web.config because we need different nonce value for each request, instead configure the CSP policy using Joonasw.AspNetCore.SecurityHeaders middleware as mentioned in the article.
4>I thinks we don't need to add unsafe-inline if we use random nonce (unless you are targeting to older browsers)
I can't really tell if this would solve your issue, but in our Application, we are using the Deferring feature, but for other reasons. Our reason is that we load all scripts (esp. jquery.js) at the end of the page. But the side effect is that no jQuery script calls are rendered into the page anymore. You can control the place to generate all scripts by executing #Html.Kendo().DeferredScripts() (but you will find more help in the docs above). Anyway, probably in the context of CSP, even that <script> block at the very end of the page is still considered "inline". But give it a try.
I would like to render an iframe with the source being Github like so:
<iframe src="https://gist.github.com/user45445/9bf8d568e3350146ba302d7d67ad576f"> </iframe>
This is the error I get in the console:
Refused to display 'https://gist.github.com/fresh5447/9bf8d568e3350146ba302d7d67ad576f' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".
I was researching how to specify my Content Security Policy in my Node server, to specify that it should accept any iframes from github
So I installed csp-helmet and added this to my server code:
var csp = require('helmet-csp')
app.use(csp({
// Specify directives as normal.
directives: {
frameAncestors: ['*.github.com'], //I thought these two did the same, so I tried them both.
childSrc: ['*.github.com']
},
// Set to true if you only want browsers to report errors, not block them.
// You may also set this to a function(req, res) in order to decide dynamically
// whether to use reportOnly mode, e.g., to allow for a dynamic kill switch.
reportOnly: false,
// Set to true if you want to blindly set all headers: Content-Security-Policy,
// X-WebKit-CSP, and X-Content-Security-Policy.
setAllHeaders: false,
// Set to true if you want to disable CSP on Android where it can be buggy.
disableAndroid: false,
// Set to false if you want to completely disable any user-agent sniffing.
// This may make the headers less compatible but it will be much faster.
// This defaults to `true`.
browserSniff: true
}))
But still the same error..
I have been trying to look at the official docs and the HTML5 rocks guide
Not sure if I am super close or taking the completely wrong approach.
Update
I have also tried to set the CSP via meta tag.
<meta http-equiv="Content-Security-Policy" content="child-src https://gist.github.com; frame-ancestors https://gist.github.com;">
than I received this error:
Content Security Policies delivered via a <meta> element may not contain the frame-ancestors directive.
The frame-ancestors value acts on the source of the iframe not the document framing it. Setting CSP on your page will have no effect on the framing. Think of frame-ancestors like X-Frame-Options on steroids: it restricts what is allowed to frame the content. Gist intentionally does not allow directly framing gists but instead provides a way to embed a Gist.
frame-ancestors 'none' == X-Frame-Options: DENY
As oreoshake points out, the problem here is not your CSP, but the CSP on GitHub. It is GitHub that is preventing you from framing them so there is nothing you can do with your CSP to resolve this.
I got the exact same error when using the wrong URL in my iframe's src field. I had copied the URL directly from the address bar instead of clicking on embed and copying it from there.