Content Security Policy not working correctly - javascript

I've got a problem. I want to load a video in webm format through js, but localhost don't load the video due to CSP
Refused to load media from 'http://localhost:8079/Talking.webm' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'media-src' was not explicitly set, so 'default-src' is used as a fallback.
I tried to add <meta http-equiv="Content-Security-Policy" content="base-uri 'self'; connect-src 'self'; default-src 'self'; font-src 'self'; frame-src 'self'; img-src 'self'; manifest-src 'self'; media-src 'self'; object-src 'none'; script-src 'report-sample' 'self'; style-src 'report-sample' 'self'; worker-src 'none';"> but localhost 4some reason loads default-src 'none' instead of default-src 'self' and ofcourse doesn't find other meta. I would say localhost just ignore this meta tag.
Video is rendered good, because when i start only index.html the video loads correctly. Each script from js file (only one file) is working correctly except video.
I tried to add video through index.html and through js new video tag create if new user joins, but in this way it didn't load any video so video from index.html wasn't loaded too.

Content needs to pass all your policies, and adding another policy in meta (or header) does not relax other policies, it is still blocked by the same policy with "default-src 'none'". You will need to identify the preexisting policy and add a media-src directive that allows your content.

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.

Why does my code violate the Content Security Policy?

I want to defer non-critical css using the following mechanism:
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
I have the following Content Security Policy:
Content-Security-Policy: default-src 'self'; object-src 'none'; font-src 'self'; base-uri 'self'; connect-src 'self'; manifest-src 'self'; img-src 'self'; script-src 'self' 'nonce-7cc36362-697e-4b28-bdd9-0400d8923894' 'sha256-1jAmyYXcRq6zFldLe/GCgIDJBiOONdXjTLgEFMDnDSM='; style-src 'self'; form-action 'self'; frame-ancestors 'none'; media-src 'self'; report-uri /api/cspviolation
When trying to load and interpret the document, the browser blocks the execution of the onload event handler script because it violates the CSP, which I do not understand because the sha256 of that script is set in the script-src directive.
Any ideas? I've used an online sha256 generator generating the the sha256 set in the CSP. Sadly Chrome does not provide me the sha256 it wants in the console, which I've seen before.
Inline event handlers can only be whitelisted with a hash using 'unsafe-hashes' in CSP level 3, but this is not yet well supported in browsers. Check https://www.w3.org/TR/CSP3/#unsafe-hashes-usage for specification and the table in https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy for browser compatibility.
You best option is probably to move the script to a separate file and adding an event listener.
You're using an inline script ("onload=..."), so either your CSP script-src needs to allow unsafe-inline, or you need to load the script differently.

Chrome Extension Vs Website's Content-Security-Policy "object-src 'self' blob:"

I'm writing a chrome extension that makes use of an <object> in the content script that loads content from my central server to display to the user. On some websites, my attempt at setting the data attribute on the <object> is blocked, with the following error:
Refused to load plugin data from 'https://redacted.com/?url=https%3A%2F%2Fwww.mozilla.org%2Fen-US%2Ffirefox%2F' because it violates the following Content Security Policy directive: "default-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com". Note that 'object-src' was not explicitly set, so 'default-src' is used as a fallback.
My extension works without issue on stackoverflow.com! Note, sometimes it's object-src 'self' blob: instead.
From the response headers of the website my extension is trying to load on, it's clear that that's what is stopping my extension from being able to do what it does (these headers are missing from stackoverflow.com which is why it works):
content-security-policy: default-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com; child-src www.googletagmanager.com www.google-analytics.com www.youtube-nocookie.com trackertest.org www.surveygizmo.com accounts.firefox.com accounts.firefox.com.cn www.youtube.com; script-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com 'unsafe-inline' 'unsafe-eval' www.googletagmanager.com www.google-analytics.com tagmanager.google.com www.youtube.com s.ytimg.com; style-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com 'unsafe-inline'; img-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com data: mozilla.org www.googletagmanager.com www.google-analytics.com adservice.google.com adservice.google.de adservice.google.dk creativecommons.org ad.doubleclick.net; frame-src www.googletagmanager.com www.google-analytics.com www.youtube-nocookie.com trackertest.org www.surveygizmo.com accounts.firefox.com accounts.firefox.com.cn www.youtube.com; connect-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com www.googletagmanager.com www.google-analytics.com https://accounts.firefox.com/ https://accounts.firefox.com.cn/
Is there a way around this? Would Shadow DOM be an option? I've already attempted to add content_security_policy to my manifest.json but this will never work because the browser is respecting what the parent website responded with in it's headers.
Thanks in advance.

How to change Content Security Policy directive to allow for addThis widget?

I am making a site that uses webpack.
I am about to launch it and I want to put on addThis share widget. I am adding the addThis code in the index.html right before closing body tag as advised by addThis. Like this:
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript"
src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-
###MY_NUMBERS###"></script>
</body>
this generates the following error in chrome-inspect console:
Refused to load the script
'http://s7.addthis.com/js/300/addthis_widget.js' because it violates
the following Content Security Policy directive: "script-src 'self'".
I have read up a little on it and it does not seem to work to seperate addThis to another js-file and save that locally to load it to DOM.
I tried add this to my manifest.json:
"content_security_policy": "script-src 'self' http://s7.addthis.com/js/300/addthis_widget.js; object-src 'self'"
No success. Is there a way to override CSP settings to allow for addThis-widget?
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'
'unsafe-eval' https://*.addthis.com https://addthis.com;child-src 'self' 'unsafe-
inline' 'unsafe-eval' https://*.addthis.com https://addthis.com; object-src 'self'
'unsafe-inline' 'unsafe-eval' https://*.addthis.com https://addthis.com; script-src
'self' 'unsafe-inline' 'unsafe-eval' https://*.addthis.com https://addthis.com; img-src
'self' 'unsafe-inline' 'unsafe-eval' https://*.addthis.com https://addthis.com;">
Adding this to your header will allow the addthis widget to load. Might not be secure, which will defeat the purpose of Content-Security-Policies...
I always set my CSP through the .htaccess if it's available.
Here are some good tips: https://content-security-policy.com/
You're basically there, but unsure how it works with manifest.json.
Try similar in .htaccess:
Header set Content-Security-Policy "default-src 'none'; script-src 'self' http://*.addthis.com
Some things to be aware of with .htaccess files: https://www.digitalocean.com/community/tutorials/how-to-use-the-htaccess-file
Also, using a CSP, you will need to specifiy all the external sources you use basically.
It's worth looking into CSPs in more detail and being aware of all the various sources of images, fonts, etc etc. you use.
Any problems, let me know and I'll expanded further.

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