CODEWITHSUNDEEP
csshttpcontent-security-policy
Abdulwahab Almestekawy
Abdulwahab Almestekawy

Reputation: 664

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?

Upvotes: 0

Views: 88

Answers (2)

Abdulwahab Almestekawy
Abdulwahab Almestekawy

Reputation: 664

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.

Upvotes: 0

Angry Bird
Angry Bird

Reputation: 1

Try this

Content-Security-Policy: style-src 'self' https://fonts.googleapis.com 'sha256-KJCiag/ONB9TpGaUe4pEzZMHCxZPfqveZBD6JwsDks8=' 'unsafe-hashes'

If the error persists, feel free to contact me. đź‘Ť

Upvotes: 0

Related Questions