Why does Chrome claim that this stylesheet violates the Content Security Policy?

Question

I have a website in which I include several CSS stylesheets from my own server and one stylesheet from a remote server.

I wanted to write my Content Security Policy in a way to permit all local stylesheets, and only this one specific remote style sheets. This was my attempt:

style-src 'self' 'sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y='

However, upon navigating to my website, Chrome 78 claimed that the remote stylesheet does not match the existing Content Security Policy and refused to apply it. I looked at this similar question, where the solution was to apply 'unsafe-hashes', which did not solve my problem. It seems as if there is a difference between an externally included script and an inline script.

So my question is: Why does Chrome claim this script is not allowed? And what do I need to allow this script? (Aside from a generic whitelist for the domain)

Answer 1

From the documentation of style-src:

'<hash-algorithm>-<base64-value>'
A sha256, sha384 or sha512 hash of scripts or styles. ... In CSP 2.0 this applied only to inline scripts. CSP 3.0 allows it in the case of script-src for external scripts.

So based on this the hashing specification cannot be used for external styles but only for inline styles. The behavior change with CSP 3.0 only allows external scripts this way but not external styles.