Search code examples
csshttpcontent-security-policy

Refused to apply inline style because it violates Content Security Policy (using hash for JQuery inline style)

I have the following style-src directive in my Content-Security-Policy header:

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

However, the browser is showing the following error:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' <URL> 'sha256-KJCiag/ONB9TpGaUe4pEzZMHCxZPfqveZBD6JwsDks8='". Either the 'unsafe-inline' keyword, a hash ('sha256-KJCiag/ONB9TpGaUe4pEzZMHCxZPfqveZBD6JwsDks8='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

I use the same hash provided in the error message but still get the error. The error is coming from jquery.min.js:2, not in my code. For this reason, I can't use nonce or place the inline style in an external stylesheet. Also I can't use unsafe-inline because it's not secure. How can I solve this issue?

Solution

  • After tracking the source of the problem, I found that jQuery (which is causing the issue) is only required by React Owl Carousel. I will consider using another carousel library so that I get rid of jQuery.