I am attempting to load an avatar image in a React app that is being served up from a NodeJS/Express backend.
I have my content-security policy set as:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' s.gravatar.com; style-src 'self'; connect-src 'self'; ">
To be able to access the gravatar image.
However, when I run the React app in production mode, I get the following error in the console:
Refused to load the image 'https://s.gravatar.com/avatar/a57b7e3be28e9bf9b245a409b4666ee3?s=200&r=pg&d=mm' because it violates the following Content Security Policy directive: "img-src 'self' data:".
Doing a View Source on the page clearly shows that I the img-src policy is correctly set:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' s.gravatar.com; style-src 'self'; connect-src 'self'; ">
I have tried this in both Chrome and Firefox and I received the same issue where the image is getting blocked.
Please let me know what I may be doing wrong.
I realized my mistake! I was using helmet in my NodeJS backend which was overriding the CSP specified on the front-end side.
I did not think it would have an effect on the front-end but seems like it takes precedence.
Hopefully that saves someone else some time in their investigation.
Related
I have installed GeoServer on my linux machine and is running behind Nginx proxy. GeoServer web interface is working fine. But when I try to create a new store, it is not working. When I click on the "browse" button a modal is opened. That is when the error message is printed on to the console, which says
CSP error
Wicket.Ajax: Wicket.Ajax.Call.processEvaluation: Exception evaluating javascript: EvalError: call to eval() blocked by CSP, text: (function(){var e =
What to add to my content security policy to get this to work? I have added my domain here as well. But that did not work either.
Here is my CSP:
add_header Content-Security-Policy "base-uri 'self'; default-src 'self'; img-src https 'self' https://amazon-bucket.s3.eu-west-2.amazonaws.com/ data:; object-src 'none'; require-trusted-types-for 'script'; script-src 'unsafe-inline' 'self' https://cdnjs.cloudflare.com https://unpkg.com; style-src 'unsafe-inline' 'self' https://fonts.googleapis.com https://fonts.gstatic.com https://cdnjs.cloudflare.com https://unpkg.com; font-src 'unsafe-inline' 'self' https://cdnjs.cloudflare.com https://fonts.googleapis.com https://fonts.gstatic.com https://unpkg.com";
UPDATE:
I noticed this TrustedHTML assignment error on chrome
This document requires 'TrustedHTML' assignment.
TrustedHTML assignment error
For the first error you'll need to add 'unsafe-eval' to script-src. But note that for each 'unsafe-*' you add the value of your CSP decreases.
TrustedHTML doesn't allow setting innerHTML, use textContent instead if you are setting unformatted text. Otherwise you should be using DOMPurify or some other methods ensure that html is trusted.
I have a Chrome Extension that when clicked inserts a video on the page:
<video width="320" height="240" controls>
<source src="https://example.com/video.mp4" type="video/mp4">
</video>
When using the extension on Twitter.com, the video doesn't load on the page and in the console I see this error:
Refused to load media from 'https://example.com/video.mp4' because it violates the following Content Security Policy directive: "media-src 'self' blob:
In Manifest.json (version3) I've tried several versions of the below but nothing works. Does anyone know how to resolve this error so that the video can load? Any and all help is much appreciated - thanks.
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'; media-src * blob: https://example.com/*"
},
instead of:
"extension_pages": "script-src 'self'; object-src 'self'; media-src * blob: https://example.com/*"
try:
"extension_pages": "script-src 'self'; object-src 'self'; media-src example.com"
Unfortunately you can't insert a <video> tag into page protected by CSP. Twitter has a CSP with:
media-src 'self' blob: https://*.vine.co https://*.giphy.com
https://media.riffsy.com https://*.twimg.com https://twitter.com
https://dhdsnappytv-vh.akamaihd.net https://mdhdsnappytv-vh.akamaihd.net
https://mmdhdsnappytv-vh.akamaihd.net https://mpdhdsnappytv-vh.akamaihd.net
https://pdhdsnappytv-vh.akamaihd.net https://dwo3ckksxlb0v.cloudfront.net
https://*.pscp.tv https://*.video.pscp.tv;
and as you can see it's a twitter's CSP blocks you extension's work:
Refused to load media from 'https://example.com/video.mp4' because it
violates the following Content Security Policy directive: "media-src 'self' blob: ...
Because your extension's CSP is media-src * blob: https://example.com/*" - these are not the rules that you see blocked in the console.
As #granty mentioned there's no direct solution given Twitter prohibitive CSP.
A workaround however is to insert an iframe on the page and insert insert the video in the iframe. Hope this helps anyone else looking for a solution!
I am developing a website with Wordpress that includes a Gumroad script, in the console it throws the following error:
extended_bundle-2dd0f46384e8ed974d932b1190b99d42941abe18a7b69f4e8bd492fa0a309a13.js:1 Refused to connect to 'https://stats.g.doubleclick.net/j/collect?t=dc&aip=1&_r=3&v=1&_v=j87&tid=UA-29108090-1&cid=256380548.1611057176&jid=2069832337&gjid=1027868402&_gid=88988440.1611562559&_u=SCCAiEADRAAAAE~&z=875389156' because it violates the following Content Security Policy directive: "connect-src 'self' bam.nr-data.net www.dropbox.com s3.amazonaws.com/gumroad s3.amazonaws.com/gumroad/ www.google.com www.gstatic.com *.facebook.com *.facebook.net files.gumroad.com/ d1bdh6c3ceakz5.cloudfront.net/ *.braintreegateway.com www.paypalobjects.com *.paypal.com *.braintree-api.com iframe.ly gumroad.com".
I tried to fix it by putting the info in the meta, but I'm sure I'm wrong. what is the best solution to fix this? (I have never faced this problem before).
<meta http-equiv="Content-Security-Policy" content="default-src https 'self'; child-src * data: blob:; connect-src 'self' bam.nr-data.net www.dropbox.com s3.amazonaws.com/gumroad s3.amazonaws.com/gumroad/ www.google.com www.gstatic.com *.facebook.com *.facebook.net files.gumroad.com/ d1bdh6c3ceakz5.cloudfront.net/ *.braintreegateway.com www.paypalobjects.com *.paypal.com *.braintree-api.com iframe.ly gumroad.com; font-src * data: blob:; frame-src * data: blob:; img-src * data: blob:; media-src * data: blob:; object-src * data: blob:; script-src 'self' 'unsafe-eval' ajax.cloudflare.com static.cloudflareinsights.com js.stripe.com api.stripe.com *.braintreegateway.com *.braintree-api.com www.paypalobjects.com *.paypal.com www.google-analytics.com *.g.doubleclick.net optimize.google.com www.googleadservices.com www.google.com www.gstatic.com *.facebook.net *.facebook.com *.newrelic.com *.nr-data.net www.dropbox.com s.ytimg.com *.jwpcdn.com content.jwplatform.com/libraries/3vz4Z4wu.js *.jwpsrv.com blob: 'self' data: gumroad.us3.list-manage.com analytics.twitter.com 'sha256-VM/GRb7zfHAoT0vOuAlUed7we+jp8z0wsVKkGxFFsqI=' gumroad.com assets.gumroad.com; style-src 'self' 'unsafe-inline' s.ytimg.com ssl.p.jwpcdn.com optimize.google.com assets.gumroad.com; worker-src * data: blob:">
I tried to fix it by putting the info in the meta, but I'm sure I'm wrong.
To fix the issue you have to add https://stats.g.doubleclick.net host-source to connect-src directive.
It's 2 ways to publish CSP:
via meta tag <meta http-equiv="Content-Security-Policy" content="...">
via HTTP header "Content-Security-Policy: ..."
Avoid to use both ways at the same time - in case of 2 CSPs the rules will join with logical "AND" and you'll failed to get expected result.
Therefore you need to know in which way your Wordpress publish the CSP, and then to add the https://stats.g.doubleclick.net into meta OR into HTTP-header respectively.
Typically WP uses plugins to publish CSP. It can also be published in the .htaccess file.
Note 1: the console error you described could be not yours if you use iframe with third-party content (some external widgets, Google auth etc.). Because browser use one console to display CSP violations in any iframes.
Moreover, you could have installed some browsers plugins which tries to modify the viewed page. This can cause CSP violations too.
But lookes like it's caused by Google Adsense you place in web page. `https://stats.g.doubleclick.net. is used to collect stat of Google Ads.
As part of new security requirement from the client I have added "Content Security Policy" in my Liferay application:
response.setHeader(
"Content-Security-Policy",
"default-src 'none'; script-src 'unsafe-inline' *.googleapis.com; style-src 'self' *.googleapis.com;font-src 'self' *.gstatic.com;connect-src ; img-src 'self' data:;base-uri 'none';frame-ancestors 'none';");
But I am getting below error
Refused to load the script 'http://localhost:8080/o/js_loader_modules?t=1536146336645' because it violates the following Content Security Policy directive: "script-src 'unsafe-inline' *.googleapis.com".
Local server up and running localhost:8080. How to solve this?
It looks like CSP blocks your own script from loading and only allows inline <script> tags from googleapis.com. You should try adding 'self' to your CSP rules, because it means you can use scripts from your own domain.
script-src 'self' 'unsafe-inline' *.googleapis.com;
Hi i have some content security policy like this:
<meta http-equiv="content-security-policy" content="default-src 'self';
script-src 'self' 'nonce-MhqUJrKKq9' https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/; font-src 'self' https://fonts.gstatic.com/;
object-src 'none'; base-uri 'none';">
I was try to allow a google fonts, but it give me this error:
webfont.js:17 Refused to load the stylesheet 'http://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700%7CRoboto:300,400,500,600,700' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/".
so what can caused this error? i though i already exclude it from my policy.
Try google fonts without https , http://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700%7CRoboto:300,400,500,600,700%27