Sha hash not respected in CSP style-src

Question

I have an ASP.NET web application that makes use of asp-validation-summary. Because of this an inline style is added to an HTML element in my page.

This gives me the following error in console (Chrome v78.0.3904.108) when I run my application:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://fonts.googleapis.com". Either the 'unsafe-inline' keyword, a hash ('sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE='), or a nonce ('nonce-...') is required to enable inline execution.

So I added the hash to my CSP, which now looks like this:

style-src 'self' https://fonts.googleapis.com 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE=';

When I load my page I still get a similar error:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://fonts.googleapis.com 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE='". Either the 'unsafe-inline' keyword, a hash ('sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE='), or a nonce ('nonce-...') is required to enable inline execution.

This is the entire CSP header:

X-Content-Security-Policy: default-src 'self'; object-src 'none'; frame-ancestors 'none'; sandbox allow-forms allow-same-origin allow-scripts; base-uri 'self'; upgrade-insecure-requests; style-src 'self' https://fonts.googleapis.com 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE='; font-src 'self' https://fonts.gstatic.com;

As you can see I've added the hash, as sugested in the error. It also seems to be a valid header.

But why isn't this working?

Arrow

I have the exact same issue. I also verified the suggested hash is correct, and validated my CSP. – Afford

Same issue, would've been nice if this was answered by now. :) – Magnification

Possible explanation of this behavior: https://mcmap.net/q/579541/-why-doesn-39-t-chrome-respect-my-content-security-policy-hashes – Khadijahkhai

Answer 1

You must add unsafe-hashes.
unsafe-hashes allows to enable specific inline event handlers. If you only need to allow inline event handlers and not inline elements or javascript: URLs, this is a safer method compared to using the unsafe-inline expression.

Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src

Dulla

Is there a "safe" way to do this? It's maddening that adding hashes doesn't work until you add the unsafe-hashes keyword, and it's very confusing that something that targets "inline event handlers" is actually necessary for inline styles. – Coessential