Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-ENb21QT9vf4dEbbGNxh+DQ=='"

[Sudeepkumar799]

The Problem:

I am getting following error when I add CSP headers in my application.

To handle inline styles and scripts violation I am adding nonce using csp-html-webpack-plugin. But I am still seeing this issue.

Any help will be greatly appreciated!

[srmagura]

Hey @Sudeepkumar799, you should be able to fix this with the nonce option createCache. https://emotion.sh/docs/@emotion/cache#nonce

[Sudeepkumar799]

@srmagura I have implemented the none with createCache in my application. I can see nonce has been added in the application, but still it is throwing same error.

[srmagura]

OK, and you are sure the CSP's nonce matches the nonce passed to createCache?

If you can link me to a repository that shows the problem, I may be able to help more.

[Sudeepkumar799]

My bad @srmagura. I did not use createCache properly. Did some changes, now it is fixed. Thank you.

[cabaisma]

Hi @Sudeepkumar799 can share you solution in this issue? I have a similar issue. Thanks

[wishtree-dparekh]

I am facing the same issue

[howlettt]

I ran into this error when I was accidentally creating styles in the same element that was rendering <CacheProvider>. Moving the styles into a child component fixed the error