How to use Content-Security-Policy with localhost files - javascript

I am getting the following error on my page:
Refused to load the script 'http://127.0.0.1:35729/livereload.js' because it violates the following Content Security Policy directive: "script-src https: 'unsafe-inline' 'unsafe-eval'".
HTML
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *;">
</head>
<body>
<script src="http://127.0.0.1:35729/livereload.js"></script>
I have tried to use a completely open just to get it working and then work backwards, however I even get the same error with this.
To be clear, this isn't for producition code, this is just to enable my live-reload-webpack on a domain that is using https.

You can use localhost:, though I believe using 'self' (including the single quotes) would also suffice in this situation. There are some odd cases where * is not actually all-inclusive (blob: for example is also excluded from * I believe).
As always it's good to check out your CSP with Google's Evaluator first.

Related

Refused to frame * because it violates the following Content Security Policy directive: "frame-src for File Download

Recently we integrated a third party script Pendo.js for application inspection of end user usability.
To allow this script we have added relevant Content-Security-Policy changes to the Nginx server config file.
The Pendo.js script was injected properly and is performing as expected.
But during the excel file download through an API call we are facing the following error.
CSP Header:
add_header Content-Security-Policy " default-src 'self' https:; script-src-elem 'self' 'unsafe-inline' https://.pendo.io; script-src 'self' https://.pendo.io pendo-io-static.storage.googleapis.com pendo-static-5725335814144000.storage.googleapis.com https://.pendo.io 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://netdna.bootstrapcdn.com .marketmedium.net 'unsafe-inline' https://.pendo.io pendo-static-5725335814144000.storage.googleapis.com; font-src 'self' 'unsafe-eval' https://fonts.gstatic.com https://netdna.bootstrapcdn.com; img-src 'self' data: .marketmedium.net https://.pendo.io pendo-static-5725335814144000.storage.googleapis.com https://.pendo.io 'unsafe-inline' 'unsafe-eval'; object-src 'none'; connect-src .marketmedium.net https://.pendo.io pendo-static-5725335814144000.storage.googleapis.com;frame-ancestors https://.pendo.io; frame-src https://.pendo.io 'unsafe-inline' 'unsafe-eval'; child-src https://*.pendo.io;";
Error:
Refused to frame 'dashboardReportDownload?columnNames%5B0%5D=&columnNames%5B1%5D=copy_deal&columnNames%5B2%5D=deal_name&columnNames%5B3%5D=deal_number&columnNames%5B4%5D=deal_status&columnNames%5B5%5D=organization_name&columnNames%5B6%5D=deal_type_name&columnNames%5B7%5D=edh%23id&columnTexts%5B0%5D=&columnTexts%5B1%5D=Copy&columnTexts%5B2%5D=Deal%20Name&columnTexts%5B3%5D=Deal%20Number&columnTexts%5B4%5D=Status&columnTexts%5B5%5D=Organization&columnTexts%5B6%5D=Deal%20Type&columnTexts%5B7%5D=edh%23id&inClauseFields%5B0%5D=edh%23id&edh%23id%5B0%5D=1091&reportId=61f7d68ea90238841a92a0d0&reportViewName=Deal%20Sheet%20Report&downloadFileType=xlsx' because it violates the following Content Security Policy directive: "frame-src https://.pendo.io".
VM3432:6750 crbug/1173575, non-JS module files deprecated.
Your say your frame-src directive is set to "https://*.pendo.io 'unsafe-inline' 'unsafe-eval'" (saying 'seems' as the * character is removed and causing parts of your question to be in italics). Although the error message says that frame-src is just "https://*.pendo.io". When downloading a frame from an undisclosed source is created.
If you addded frame-src to your policy to support pendo, you are no longer using the fallback to default-src which allows "'self' https:". You have thus moved from accepting all sources for frames to only allowing *.pendo.io. You will need to add the blocked host (potentially 'self') to frame-src.

Stripe Connect : Content Security Policy issue

Even By using meta tags, It is still showing error and Iframe is not working
<meta http-equiv="Content-Security-Policy" content="
default-src *;
style-src 'self' 'unsafe-inline';
script-src * 'self' https://checkout.stripe.com 'unsafe-inline'
connect-src : * 'self' https://checkout.stripe.com 'unsafe-inline'
frame-src : * 'self' https://checkout.stripe.com 'unsafe-inline'
'unsafe-eval'
;" >
Link reference : https://stripe.com/docs/security/guide#content-security-policy
Error : Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”)
Also I used header() to set this up, but that also didn't worked. Any Help will be appreciated
Your CSP has a lot of errors:
You have missed semicolons ; to separate script-src / connect-src / frame-src directives lists.
: is nor required in the connect-src : * ... and in the frame-src : * ...
Remove 'unsafe-inline' and 'unsafe-eval' from the connect-src and frame-src directives, those are not supported there
The * (asterisk) covers any host-sources like https://checkout.stripe.com and wss://checkout.stripe.com
BUT these are not significant, these just leads the CSP you have really is:
default-src *;
style-src 'self' 'unsafe-inline';
script-src * 'self' 'unsafe-inline' 'unsafe-eval'
This CSP restrict nothing except data:-Urls usage. Therefore the error:
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”)
cannot belong your CSP.
Looks like you already have CSP header published somewhere. Hence second CSP via <meta> or HTTP header does not have effect as expected.
Check what CSP header you really have got in browser, the tutorial is here.
Check web-server config in Nginx for add_header Content-Security-Policy ... or .htaccess file (if Apache) for Header set Content-Security-Policy ... presence.
Or maybe you have installed some plugins for managing CSP headers.
You're missing img-src https://*.stripe.com described in the Stripe documentation.
Also the asterisk character alone doesn't work as "any resource" (example of incorrect use in your code: default-src *). You need to use it as part of the <host-source> (e.g. *.example.com). See MDN docs for more details.

Why is this simple app throwing this error?

Having tried all that I could, finally I resort here for some expert advice.
This can't be a complex problem for someone like you to solve. Quite sure it's an easy tackle for you!
The error pooping on the screen is as follows
Following is the meta tag that the app has:
<meta http-equiv="Content-Security-Policy"
content="default-src 'none'; connect-src 'self';font-src 'self'; img-src 'self' data: https:; style-src 'self' ; script-src 'self'">
Tried to find the favicon.ico, but couldn't find any.
My head is spinning now!
Looking forward for your help!
Thanks a TON!
The CSP you shown does contain the img-src, so Chrome console warn means this CSP does not acts on the page, but on page does act some another CSP.
Looks like your app does issue a default CSP somewhere and this CSP does not contain img-src directive.
So you do have 2 CSPs at the same time, in this case acts more restrictive one.
Check the presence the second <meta http-equiv="Content-Security-Policy" tag (in the HTML code) or HTTP header Content Security Policy (in the dev tool).
Alternatively you could remove your:
<meta http-equiv="Content-Security-Policy"
content="default-src 'none'; connect-src 'self';font-src 'self'; img-src 'self' data: https:; style-src 'self' ; script-src 'self'">
and to see that the same warns still presence in the Chrome console because of second CSP.
Updated: after some researches it was found a real reason of /favicon blocking for the above case.
<meta http-equiv="Content-Security-Policy"
content="default-src 'none'; connect-src 'self';font-src 'self'; img-src 'self' data: https:; style-src 'self' ; script-src 'self'">
Seeing this code:
You have set default-src 'none' and overriding it with img-src 'self' data: https:.
But the protocol in use is http.

Javascript CSP Block

I am new to metabase. I have downloaded the metabase source code and hosted it in the Ubuntu 16.04 LTS server.When I am starting the Metabase server with the "lein ring server" command, I get "java.awt.HeadlessException". I have read some where in the github issues only that it can be ignored. Front end is built with "yarn run build-hot" command. When accessing the front end from the browser, I get the following errors
Refused to load the script
'http://locahost:8080/app/dist/vendor.hot.bundle.js?222bfa78ab06d868cbf4'
because it violates the following Content Security Policy directive:
"script-src 'unsafe-inline' 'unsafe-eval' 'self'
https://maps.google.com https://apis.google.com
https://www.google-analytics.com https://*.googleapis.com
*.gstatic.com localhost:8080".
Refused to load the script
'http://locahost:8080/app/dist/app-main.hot.bundle.js?222bfa78ab06d868cbf4'
because it violates the following Content Security Policy directive:
"script-src 'unsafe-inline' 'unsafe-eval' 'self'
https://maps.google.com https://apis.google.com
https://www.google-analytics.com https://*.googleapis.com
*.gstatic.com localhost:8080".
Its seems like CSP issue. U can fix this problem using
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://www.google.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.google.com; style-src 'unsafe-inline' 'self' https://www.google.com; connect-src 'self' https://api.gole.in;img-src 'self' https://www.google.co.in/ads/ga-audiences; font-src 'self' data: https://fonts.gstatic.com;">
How to allow eval()?
I'm sure many people would say that you don't, since 'eval is evil' and the most likely cause for the impending end of the world. Those people would be wrong. Sure, you can definitely punch major holes into your site's security with eval, but it has perfectly valid use cases. You just have to be smart about using it. You allow it like so:
content="script-src 'unsafe-eval'"
Reference Link : https://content-security-policy.com/

Content Security Policy not allowing form submission

Please I need assistance here.
I have a form to submit to another url but when I try to submit it, it refuses to submit and I was checking my console.
On Chrome, I see the following errors
resources2.aspx?HCCID=75694719&culture=en-US&mlcv=3006&template=5:7 Refused to load the image 'https://s4.mylivechat.com/livechat2/images/sprite.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
Refused to send form data to 'https://cipg.stanbicibtcbank.com/MerchantServices/MakePayment.aspx' because it violates the following Content Security Policy directive: "form-action 'self'".
and on Mozilla Firefox I see the following:
Content Security Policy: The page’s settings blocked the loading of a resource at https://s4.mylivechat.com/livechat2/images/sprite.png (“img-src http://smehelp.themarketplace.ng data:”)
Content Security Policy: The page’s settings blocked the loading of a resource at http://smehelp.themarketplace.ng/purchase/summary (“form-action 'self'”).
Checking around the web for solution, I have added the following to my page header
<meta http-equiv="Content-Security-Policy" content="form-action 'self'">
but the problem still persists.
This results in the fact that I am not able to submit my forms. Earlier, the forms used to get submitted, but I just tried it today and observed this error.
I am running on Google Chrome Version 55.0.2883.95 (64-bit) on a MAC OS.
I will appreciate any suggestion to solve this issue as soon as possible.
Thank you
If you look here because you want to send a form to the same URL (which should be possible with form-action 'self') or another URL listed in your form-action rule, but redirect afterwards, the following could be the cause https://github.com/w3c/webappsec-csp/issues/8 (including a long discussion). One reason is: https://cheatsheetseries.owasp.org/cheatsheets/Unvalidated_Redirects_and_Forwards_Cheat_Sheet.html
The reason why the target url of the redirect is not visible in the CSP report (which is really confusing) is a security issue, see https://w3c.github.io/webappsec-csp/#create-violation-for-request, it would otherwise be possible to analyse the behaviour of form endpoints.
tl:dr;
Chrome and Safari do not allow redirects after submitting a form unless the destination URL is listed in the form-action CSP rule, even if it is a GET redirect that does not contain the original form data.
You are passing the Content-Security-Policy value in your response header:
base-uri 'none'; default-src 'self' https://s4.mylivechat.com;
child-src 'none'; connect-src 'self'; font-src 'self'
https://fonts.googleapis.com https://maxcdn.bootstrapcdn.com
https://fonts.gstatic.com; form-action 'self'; frame-ancestors 'none';
img-src 'self' data:; media-src 'self'; object-src 'none'; script-src
'self' https://www.youtube.com https://maps.google.com
https://www.google-analytics.com https://mylivechat.com
https://s4.mylivechat.com https://maps.googleapis.com 'unsafe-inline'
'unsafe-eval'; style-src 'self' https://fonts.googleapis.com
https://s4.mylivechat.com https://maxcdn.bootstrapcdn.com
'unsafe-inline'
The content security policy that you've added to the page meta will be ignored as this is present in the response header.
You will need to make the following additions (in bold) to your CSP that you are sending in your response header.
base-uri 'none'; default-src 'self' https://s4.mylivechat.com;
child-src 'none'; connect-src 'self'; font-src 'self'
https://fonts.googleapis.com https://maxcdn.bootstrapcdn.com
https://fonts.gstatic.com; form-action 'self'
https://cipg.stanbicibtcbank.com/MerchantServices/MakePayment.aspx; frame-ancestors 'none'; img-src 'self' data:
https://s4.mylivechat.com; media-src 'self'; object-src 'none'; script-src 'self' https://www.youtube.com https://maps.google.com
https://www.google-analytics.com https://mylivechat.com
https://s4.mylivechat.com https://maps.googleapis.com 'unsafe-inline'
'unsafe-eval'; style-src 'self' https://fonts.googleapis.com
https://s4.mylivechat.com https://maxcdn.bootstrapcdn.com
'unsafe-inline';
Add https://s4.mylivechat.com to img-src
Add https://cipg.stanbicibtcbank.com/MerchantServices/MakePayment.aspx to form-action
Remove <meta http-equiv="Content-Security-Policy" content="form-action 'self'"> from your HTML code

Categories