Why is my Content Security Policy not being adhered to?

Question

I've come a cross a very bizarre situation where a hash is being ignored, despite it being present in the Content-Security-Policy.

This happened while installing Hotjar on our website, manually adding hashes for every inline script it uses, but obviously it can presumably happen with any dynamically inserted inline script.

In the console error message below you can see that the required hash is present, but Chrome suggests that it needs to be added...

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'nonce-llX8ZkdD3suoiNrpE9mCatplNhRYmlKw' 'self' 'sha256-HRecKxp1fRukFUlrmQh3cAVyb/pNYtdWFGJ2EL5FzdE=' 'sha256-SvLgADqEePEV9RNxBrRQXSBJafFHcVNG7cPzHz6h9eA=' 'sha256-fGP7dUodgG1o2qqo7hPGqd+2FEE7z2Z4Xg5muj+XIOQ=' 'sha256-8hoDThJonkR/uDTFl5y8ugf9U3kcHPL2sq19iPFHTds=' 'sha256-ecMh1s2mivgxX0zzJbkamgAS7kPx+1EqcHz8Uz30i78=' 'sha256-Qv05/NsT/MWFR5NB3hDHRW9iI424uc8WpuRssGdOAsU=' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-S3EaMUkdpUGJFgSHH5d/29s3oD8/sutxvMfQoprfQ+g=' 'sha256-qVlOiWrAwuIfu8+uHKHkgg4qBA7YOoSm8A0yB4LfrNw=' *.hotjar.com *.typekit.net".

But the remedy is to include a hash that's already present:

Either the 'unsafe-inline' keyword, a hash ('sha256-S3EaMUkdpUGJFgSHH5d/29s3oD8/sutxvMfQoprfQ+g='), or a nonce ('nonce-...') is required to enable inline execution.

The hashes in CSP and proposed solution are identical:

And here is the complete CSP:

Content-Security-Policy: default-src *; base-uri 'self'; img-src * data:; style-src 'nonce-{$nonce}' 'self' 'sha256-HRecKxp1fRukFUlrmQh3cAVyb/pNYtdWFGJ2EL5FzdE=' 'sha256-SvLgADqEePEV9RNxBrRQXSBJafFHcVNG7cPzHz6h9eA=' 'sha256-fGP7dUodgG1o2qqo7hPGqd+2FEE7z2Z4Xg5muj+XIOQ=' 'sha256-8hoDThJonkR/uDTFl5y8ugf9U3kcHPL2sq19iPFHTds=' 'sha256-ecMh1s2mivgxX0zzJbkamgAS7kPx+1EqcHz8Uz30i78=' 'sha256-Qv05/NsT/MWFR5NB3hDHRW9iI424uc8WpuRssGdOAsU=' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-S3EaMUkdpUGJFgSHH5d/29s3oD8/sutxvMfQoprfQ+g=' 'sha256-qVlOiWrAwuIfu8+uHKHkgg4qBA7YOoSm8A0yB4LfrNw='  *.hotjar.com *.typekit.net; script-src 'nonce-{$nonce}' 'self' 'sha256-A0/707MQdpfr/tR18VnYSk7JMJoUQSBURZEJa8wF6po=' 'sha256-1kpOd8fXCkigqXNekDPt+noalDB6YI+94YhtU3ETmvE=' *.hotjar.com *.googletagmanager.com *.universe.com *.google-analytics.com *.quantserve.com *.quantcount.com *.ads-twitter.com *.facebook.net analytics.twitter.com *.stripe.com polyfill.io *.queue-it.net *.amplitude.com; object-src 'none'; frame-ancestors 'self' *.queue-it.net

To replicate this all you'd have to do is install Hotjar with the above CSP.

Is this a Chrome bug or have I missed something?

Here's a screenshot for anyone interested (click to zoom in).

Answer 1

This issue is the same as CSP header fails with "Refused to apply inline style..." but I have already added the hash.

You have either an:

1. inline event handler in the tag like onclick='javascript_here', onload='js_handler()' etc.
   OR
2. javascript-navigation like <a href='javascript:...'

Chrome calculates hashes for those but to allow this kind of inline script you need to also add unsafe-hashes token to the 'script-src'.

Note: Safari 12 does not support 'unsafe-hashes', therefore may be better to hang event handlers with addEventListener() in case of 1.