How to apply hash (sha-...) or nonce to header tag HTML?

Question

I have created Angular 2 production build with the following command:

ng build --prod --aot

However the generated files under dist folder (example: main.0c05c6d4245461043e3f.bundle) are being blocked by CSP thus making some of the applied style not showing up.

The error that I retrieved is:

Refused to apply inline style because it violates the following Content Security Policy directive

I checked all of my components and I didn't find any inline call of CSS style. Is it maybe because of a third-party plugin? Or else?

However, I also want to apply hash or nonce (according to chrome suggestion) to resolve the CSP violation.

How to do that?

Answer 1

You should use Chrome's browser console to debug CSP if you're not, it has incredibly detailed information. Here's an inline style example:

It tells you the violated directive, including the full directive, where the style is (the index link on the right), and exactly what you can do to fix it (in this case, unsafe-inline, a nonce, or a hash). It even includes the hash you can use; if you only had say one inline style, you can just copy that whole strong (single quotes included) and include it in your style-src.

I generally wouldn't recommend using a hash for inline styles unless you only have very few inline styles and you're sure they won't change. If you have full control of your site you should be able to find and remove them from the code, and if you're using certain CMSes like Wordpress (and worse, plugins) it can be almost impossible to find and tag them all.

But for security's sake you also shouldn't just default to unsafe-inline unless you've found it completely impossible to remove or hash all inline styles.