I am not able to load a video on my site which I am trying to load from Google Cloud:
In my Node.js server, I have the following to redirect the URL, after checking for its match:
if (url == "targetUrl") { //the URL I am trying to match
res.writeHead(301, {
Location: 'https://storage.googleapis.com/myCloudFolder/someVideo.mp4'
}).end();
}
My Content Security Policy for media-src is set in the header as:
"media-src 'self' https://storage.googleapis.com/myCloudFolder blob:;
I get the following errors in the browser's console when the video is loaded:
Refused to load media from '<URL>' because it violates the following Content Security Policy directive: "media-src 'self' <URL> blob:".
abc.def.com/:1 Refused to load media from 'https://storage.googleapis.com/myCloudFolder/someVideo.mp4'
because it violates the following Content Security Policy directive:
"media-src 'self' http://storage.googleapis.com/myCloudFolder blob:".
On the video element itself, the error displayed is:
The media could not be loaded, either because the server or network failed or because the format is not supported.
In the media-src, I tried by dropping the scheme (https://) as well as by using http, but the error persists.
My question is: What should I set the media-src to, to load the video from https://storage.googleapis.com/myCloudFolder
Your content-security policy should be
media-src 'self' https://storage.googleapis.com/myCloudFolder/ blob:
The trailing slash after myCloudFolder is needed to match all files in that folder. Without the trailing slash only the exact path is matched. See here.
Related
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 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/
Yes, another question about the CSP not loading a base64 image BUT I have researched a lot and can't find the solution. I have tried every configuration I've founded and still doesn't works.
So, what I'm trying is to load an Base64 image via Javascript.
var dataString = jQuery('#signature').jSignature('getData');
JQuery('#sig').append("<img class='imported' src='" + dataString + "'></img>");
As you can see it's not a big deal appending the base64 image (in localhost it works).
Then, searching about the CSP I found that the correct configuration to avoid the CSP with the Base64 Images is (and this is how I have the configuration):
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data:; font-src 'self' data:";
I have no problem with the font base64 but with the images it always throws this error:
Refused to load the image 'data:image/png;base64,...' because it violates the following Content Security Policy directive: "default-src *". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
Any ideas will be really appreciated, I really have no idea what is happening.
Have you tried as #Phonolog said. I have tried creating a plugin to support image url in importData rather than data-url-formatted.
Please check this post and see if it helps.
Create a jSignature plugin which sets the img src to the signature url.
inject the plugin
on importData remember to pass the plugin identifier
This way you can remove the data: from the csp header and self should be enough (img-src 'self')
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.
I am writting a chrome extension that needs to have two domains in its whitelist for the content security policy. I've looked at the official docs, but I still can't seem to figure out the proper syntax.
The following does not seem to work:
"content_security_policy": "script-src 'self' https://foo.com https://example.com; object-src 'self'"
EDIT:
Both my content script and my popup are able to reach foo.com, however, neither can reach example.com.
Are chrome extensions capable of having multiple sources whitelisted in the CSP?
From what I know about CSPs, this looks syntactically correct. The HTML5 Rocks article on CSP agrees with your syntax, saying:
script-src https://host1.com https://host2.com would correctly specify both origins as valid.
However, your problem may be that either:
This CSP disallows all subdomains, including www.foo.com and www.example.com. You can add those subdomain hostnames explicitly, or you can use https://*.foo.com to allow all subdomains.
If any of your script requests redirect to a non-permitted domain, the request will fail. For example, if https://example.com/foo.js responds with a 301 or 302 redirect to https://notpermitted.com/foo.js (not-permitted origin) or https://www.example.com/foo.js (non-permitted subdomain), the request will fail according to the spec:
Whenever the user agent fetches a URI (including when following redirects)... if the URI does not match the allowed script sources, the user agent must act as if it had received an empty HTTP 400 response...
EDIT:
Just to confirm, yes, Chrome extensions can whitelist multiple HTTPS origins. You can build a simple extension to test this:
manifest.json
{
"name":"CSP Test",
"version":"1.0",
"manifest_version":2,
"browser_action":{
"default_popup":"csp_test.html"
},
"content_security_policy": "script-src 'self' https://www.iana.org https://ajax.googleapis.com; object-src 'self'"
}
csp_test.html
<script src="https://www.iana.org/_js/2013.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="csp_test.js"></script>
csp_test.js
alert(jQuery)
alert(jQuery.ui)
This extension loads jQuery and jQuery UI from remote domains. If you remove either origin from the CSP, you will see an "undefined" alert signifying that one of the libraries failed to load.
I have face the same problem to whitelist the secure resources URL's with the below warning.
There were warnings when trying to install this extension:
« Ignored insecure CSP value "object-src" in directive 'script-src'.
« CSP directive 'object-src' must be specified (either explicitly, or implicitly via 'default-src') and must whitelist only secure resources.
To resolve HTTP Content-Security-Policy use below key value in manifest.json file.
{
"content_security_policy":
"script-src 'self' https://yash.test.com:8443 'unsafe-eval'; object-src 'self' https://yash.test.com:8443"
}