Refused to load the font '<URL>' because it violates the following Content Security Policy directive: "font-src 'none'" fonts.gstatic.com - content-security-policy

In my CSP i have added
font-src https://fonts.gstatic.com;
I am getting the generic error
Refused to load the font '' because it violates the following Content Security Policy directive: "font-src 'none'"
And the specific error
Refused to load the font 'https://fonts.gstatic.com/s/mulish/v10/1Ptvg83HX_SGhgqk0gotYKNnBcif.woff2' because it violates the following Content Security Policy directive: "font-src 'none'".
When I do this:
font-src 'none' https://fonts.gstatic.com;
I get this error:
The Content-Security-Policy directive 'font-src' contains the keyword 'none' alongside with other source expressions. The keyword 'none' must be the only source expression in the directive value, otherwise it is ignored.
And when I do this:
font-src 'none';
I get this error:
Refused to load the font 'https://fonts.gstatic.com/s/mulish/v10/1Ptvg83HX_SGhgqk0gotYKNnBcif.woff2' because it violates the following Content Security Policy directive: "font-src 'none'"
What am I missing here?

The most likely explanation is that you have multiple CSPs defined. The image needs to pass the img-src directive (or the default-src fallback) for all CSPs present. They could be in response headers or in meta tags.
You will need to identify the CSPs and modify/remove what you don't need.

I'd try with something like this in your case
font-src 'self' fonts.gstatic.com;

Related

Geoserver is getting blocked by Content Security Policy

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.

CSP: frame-ancestor failing

I have a strange problem with an IIS hosted website. The site has two bindings. Lets call them https://abc.xxx.com and https://def.yyy.com.
I have set the following for CSP
Content-Security-Policy: frame-ancestors 'self' https://*.xxx.com
There is a page on that website that has an iframe with src="https://abc.xxx.com/somepath". When I access the page from the first URL binding the iframe loads fine. If I access it with the second I get:
Refused to frame 'https://abc.xxx.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://*.xxx.com
Now for the even weirder part. If I change my CSP to include the second binding like below, the iframe loads.
Content-Security-Policy: frame-ancestors 'self' https://*.xxx.com https://*.yyy.com
I can't explain why this is the case. The iframe src is clearly using the first binding. Why would it require the second one in order to work? There is no redirect going on from one binding to another. I tried removing the wildcards and putting the whole binding but there was no change.
Any input is appreciated!
There is nothing weird, have a llok ath the cheme below. I have just removed subdomains and https:// scheme, they both don't matter in this case:
xxx.com in address bar
frame-ancestors 'self' xxx.com
.---<iframe src= xxx.com/path ---.
| frame-ancestors 'self' xxx.com |
| |
'--------------------------------'
Iframe is loaded because xxx.com in the address bar falls under frame-ancestors 'self' xxx.com (under both of sources: 'self' and xxx.com).
yyy.com in address bar
frame-ancestors 'self' xxx.com
.---<iframe src= xxx.com/path ---.
| frame-ancestors 'self' xxx.com |
| |
'--------------------------------'
Iframe is not loaded because yyy.com in the address bar does not fall under either 'self' or xxx.com.
Just a violation message:
Refused to frame 'https://abc.xxx.com/' because an ancestor violates
the following Content Security Policy directive: "frame-ancestors 'self' https://*.xxx.com
is a little bit misleadind and should be treated as:
Refused to frame 'https://abc.xxx.com/' because an ancestor HTTPS://YYY.com violates
the following Content Security Policy directive: "frame-ancestors 'self' https://*.xxx.com

Content Security Policy ignored by Latest Chrome Update

My CSP policy is being ignored by the latest version of Chrome. I decided today to recreate the policy to try debug why, but as you can see from the error below, Chrome is advising me to add a hash that is already in the CSP (see sha256-idz8mDU5fJ8lJuEwY6hbkXVde/nqBBjQE/u5rxw1HUk=):
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://pro.fontawesome.com/ 'sha256-LpfmXS+4ZtL2uPRZgkoR29Ghbxcfime/CsD/4w5VujE=' 'sha256-F+21FF3QOEHS5CNuMQEs3Q+LB0uULZF9DODEYnH/mMQ=' 'sha256-5uIP+HBVRu0WW8ep6d6+YVfhgkl0AcIabZrBS5JJAzs=' 'sha256-nK6A3vwzvwoN92MnHZrWtylYkYmW1jCQgTqWKQJNBMI=' 'sha256-idz8mDU5fJ8lJuEwY6hbkXVde/nqBBjQE/u5rxw1HUk='". Either the 'unsafe-inline' keyword, a hash ('sha256-idz8mDU5fJ8lJuEwY6hbkXVde/nqBBjQE/u5rxw1HUk='), or a nonce ('nonce-...') is required to enable inline execution.
This is working correctly in Firefox and Safari, so I'm thinking that there is something in my policy that is causing Chrome to stop reading values?
The content of my .htaccess file is:
Header set Content-Security-Policy "default-src 'none'; connect-src 'self'; font-src 'self' https://pro.fontawesome.com/; frame-src 'self'; img-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' https://pro.fontawesome.com/ 'sha256-LpfmXS+4ZtL2uPRZgkoR29Ghbxcfime/CsD/4w5VujE=' 'sha256-F+21FF3QOEHS5CNuMQEs3Q+LB0uULZF9DODEYnH/mMQ=' 'sha256-5uIP+HBVRu0WW8ep6d6+YVfhgkl0AcIabZrBS5JJAzs=' 'sha256-nK6A3vwzvwoN92MnHZrWtylYkYmW1jCQgTqWKQJNBMI=' 'sha256-idz8mDU5fJ8lJuEwY6hbkXVde/nqBBjQE/u5rxw1HUk=';"
Any advise is greatly appreciated.
I think this resource answers your question:
https://bugs.chromium.org/p/chromium/issues/detail?id=546106
The styles being blocked in the examples are styles in a style
attribute, Chrome only applies styles in style attributes when
'unsafe-inline' is set in 'style-src'. Safari behaves similarly but
Firefox does apply the styles if they match a hash in 'style-src'.
The CSP specification defines the hash and nonce exceptions only for
the and elements, not for the style and script
attributes so Chrome's behaviour seems to follow the spec. But the
error message generated in the console is incorrect (and confusing).
By the looks of it Chrome is following the CSP specification. I was facing the same issue with inline styles and seeing the same response as you, matching sha256 hashes! My solution has been to remove my inline styles and add them into my CSS to avoid inline styles completely.
While the console logged:
Refused to apply inline style because it violates the following
Content Security Policy directive: "style-src 'self'
'sha256-tLBf5MoZ1LfLjLmXgREJmfznfoX6mUwoWQJnC30N6JI='. Either the
'unsafe-inline' keyword, a hash
('sha256-tLBf5MoZ1LfLjLmXgREJmfznfoX6mUwoWQJnC30N6JI='), or a nonce
('nonce-...') is required to enable inline execution.
The solution would be to add 'unsafe-hashes', like so: style-src 'self' 'unsafe-hashes' 'sha256-tLBf5MoZ1LfLjLmXgREJmfznfoX6mUwoWQJnC30N6JI='.
See the 'unsafe-hashes' directive: https://w3c.github.io/webappsec-csp/#unsafe-hashes-usage

Content security policy causes error in Liferay 7 project

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;

CSP policy error - Unable to show iframe from subdomain of primary source

I get the following error when trying to iframe something from an original source.
Refused to display 'https://www.aphis.usda.gov/something' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.usda.gov *.arcgis.com *.govdelivery.com".
The source page url is "http://soemthing.aphis.usda.gov/iframetest.html"
The full CSP is:
Content-Security-Policy:default-src *.usda.gov *.googleapis.com *.arcgis.com *.govdelivery.com; script-src 'unsafe-inline' 'unsafe-eval' 'self' *.bootstrapcdn.com *.google-analytics.com *.googleapis.com *.gstatic.com *.youtube.com *.ytimg.com api.flickr.com *.twitter.com *.twimg.com *.arcgis.com *.govdelivery.com *.addthis.com *.addthisedge.com *.usda.gov; connect-src *.bootstrapcdn.com *.usda.gov *.googleapis.com *.google-analytics.com *.facebook.com *.twitter.com *.arcgis.com *.govdelivery.com; img-src https: data:;style-src 'self' 'unsafe-inline' *.usda.gov *.googleapis.com *.bootstrapcdn.com *.arcgis.com *.govdelivery.com *.twitter.com *.twimg.com;child-src 'self' *.youtube.com *.arcgis.com *.addthis.com; frame-ancestors 'self' *.usda.gov *.arcgis.com *.govdelivery.com;
Everything appears correct to me. I have frame-ancestors set to allow a wildcard from *.usda.gov.
I'm trying to load it from something.aphis.usda.gov which should be allowed due to the wildcard... or do I need to set a wildcard for a subdomain of a subdomain "*.aphis.usda.gov"?
The problem is that protocols of the source page (http://soemthing.aphis.usda.gov/iframetest.html) and the iframe page (https://www.aphis.usda.gov/something) are different. So they have different default ports.
Look at the page https://www.w3.org/TR/CSP2/#match-source-expression, #9:
If the source expression does not contain a port-part and url-port is not the default port for url-scheme, then return does not match.
In your case the source expression is *.usda.gov. There is no port number. The default port for https-protocol of your protected resource is 443. So the source page must have the same port 443. But you embed iframe into http-page whose default port is 80. So the ports do not match and you get an error about content security policy violation.

Resources