when we use script link in pug templete then this type of error occure in console,
we also set csp header in meta tag as well as set.header to server script
Refused to load the script 'https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
this is my pug code
block append head
meta(http-equiv="Content-Security-Policy" content="script-src 'self' api.mapbox.com js.stripe.com 'unsafe-inline'")
script(src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js')
link(href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet')
script(src='https://js.stripe.com/terminal/v1/')
If you set your CSP in both meta tag and response header anything will have to pass both policies. Modify or remove your response header CSP.
Related
I'd like to know if it's still possible to embed a Twitter Timelines in a Chrome Extension with a Manifest v3.
I tried to use from the Twitter docs :
<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
But I get errors :
Refused to load the script 'https://platform.twitter.com/widgets.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
Refused to load the script 'https://platform.twitter.com/widgets.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
The problem if I understood correctly is that with manifest v3 it's not possible to use external scripts.
What are the possible solutions to embed a Twitter Timeline in a Chrome Extension ?
Thanks !
I want to enforce CSP as a security measure in my web application.
From the server end , I have set the policy to "allow" self for all of its resources.
However there is one particular front end node_module file , which is throwing error as attached below.
The CSP header set is :
script-src 'self' 'node_modules/aurelia-webpack-plugin/runtime/empty-entry.js'; script-src-elem 'self'; style-src 'self'; img-src 'self'
Please help , I have been trying to find a solution for more than a week now!
Solutions tried:
Try the front end to make it ignore this file since it is an empty file. But I am not able to get it to ignore.
Trying from server end to bypass this particular file by changing the rules
TIA.
Update:
Error message
UnCaught EvalError: Refused to evaluate a string as Javascript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'"
at ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
The file seems to be allowed to load as it is loaded from the same source and you have allowed script-src 'self'.
The problem seems to be that the code in the file does eval(), new Function(), setInterval() or setTimeout(), which requires 'unsafe-eval' to be allowed. This is strange given that the file should be empty. Your console errer may provide you with a direct link to the offending code.
You could add 'unsafe-eval' to script-src. This would make your CSP less strict, but it is of course a lot better to set "script-src 'self' 'unsafe-eval';" than to not restrict scripts with a CSP at all.
I have something like this in a meta tag in my pug. I have a ton 2 3 CDN in my File.
meta(http-equiv='Content-Security-Policy' content="default-src * 'unsafe-inline' 'unsafe-eval'; script-src-elem * 'unsafe-inline';" )
I get an error something like this although I have defined the script-src-elem.
Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
I would really appreciate your help. Thank you in Advance
Let me guess. You use PUG linked with Express. In the Express you use Helmet security middleware.
The point is that Helmet 4 publishes CSPs by default via an HTTP header, and
script-src 'self' is a fragment of this Helmet's default CSP.
Since you have one CSP published, you can't relax it using a meta tag. In case of 2 CSPS published all sources should pass unscratched through both CSPs. Therefore your script-src-elem * 'unsafe-inline' from meta tag does not trigger violation, but script src 'self' from the CSP HTTP header - does rise it.
You have to remove meta tag and configute Helmet via helmet.contentSecurityPolicy(options). Or disable CSP in Helmet and use a meta tag:
app.use(
helmet({
contentSecurityPolicy: false,
})
);
Seems like your browser does no support this directive.
The Message you get is explained on MDN script-src-elem
If script-src-elem is absent, User Agent falls back to the script-src
directive, and if that is absent as well, to default-src.
And by the way:
specifies valid sources for JavaScript elements, but not inline script event handlers like onclick
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/
The Zemanta Chrome Extension fails to load with the following error message
loader.js:13 Refused to load the script 'https://static.zemanta.com/widgets/blogger.com/merged-blogger.js?v=1451290656'
because it violates the following Content Security Policy directive:
"script-src 'self' *.google.com *.google-analytics.com 'unsafe-inline'
'unsafe-eval' *.gstatic.com *.googlesyndication.com *.blogger.com
*.googleapis.com uds.googleusercontent.com https://s.ytimg.com
www-onepick-opensocial.googleusercontent.com www-bloggervideo-opensocial.googleusercontent.com
www-blogger-opensocial.googleusercontent.com *.blogspot.com https://www.blogblog.com".
I have changed the content_securiy_policy line to the following, and reload the extension
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com https://*.zemanta.com; object-src 'self'"
Why is it that "https://*.zemanta.com" is not listed in the CSP directive in the error message above, and how can I make sure it is in the CSP?
It looks like an error thrown by a webpage with its own CSP, not inside your extension. So the CSP you set there has no effect.
It probably happens as a result of a content script trying to insert <script src="..."> into the page. That's subject to the page's CSP and can fail.
You can try to bypass the page's CSP by loading the script with XHR and inserting a <script> tag with the code included instead of src link. Note that this may fail at a later stage, since while the script will be executed this way, it will be subject to CSP in its own actions (so if it, say, tries to add a <script> tag as well, it will fail).
Alternatively, you could use webRequest API to intercept and modify the CSP header. That's risky since you're loosening the page's security in general.