Content Security Policy blocks inline execution of scripts and stylesheets

Hello,
I have a WordPress website and checked it with https://securityheaders.com/ website and it show me an error about “Content Security Policy (CSP)” header. I changed my Apache configuration and added below line to it:

Header set Content-Security-Policy "default-src 'self';"

But after it, my website style messed up and some parts of it like links can’t work. The Chromium console tell me:

Content Security Policy blocks inline execution of scripts and stylesheets

The Content Security Policy (CSP) prevents cross-site scripting attacks by blocking inline execution of scripts and style sheets.
To solve this, move all inline scripts (e.g. onclick=[JS code]) and styles into external files.
Allowing inline execution comes at the risk of script injection via injection of HTML script elements. If you absolutely must, you can allow inline script and styles by:
adding unsafe-inline as a source to the CSP header
adding the hash or nonce of the inline script to your CSP header.

109 directives
Directive Element Source code Status
script-src-elem MyWebsite/:12 blocked
style-src-elem MyWebsite/:16 blocked
script-src-elem MyWebsite/:53 blocked
script-src-elem MyWebsite/:70 blocked
script-src-elem MyWebsite/:90 blocked
style-src-elem MyWebsite/:95 blocked
style-src-elem MyWebsite/:198 blocked
script-src-elem MyWebsite/:208 blocked
style-src-elem MyWebsite/:218 blocked
style-src-attr MyWebsite/:327 blocked
style-src-attr MyWebsite/:328 blocked
style-src-attr MyWebsite/:332 blocked
style-src-elem MyWebsite/:430 blocked
style-src-attr MyWebsite/:441 blocked
style-src-attr MyWebsite/:444 blocked
style-src-elem MyWebsite/:467 blocked

How can I solve it?

Thank you.

I mean…

Quick salvation is to change "default-src 'self';" to the "default-src 'self' 'unsafe-inline';" and check which errors are remained.

Normal way - is debug the CSP. Set Header set Content-Security-Policy-Report-Only "default-src 'self';" and check violations in the browser console in Dev Tool (Chrome is preferred as more verbose, but as I see you already use Chrome browser).
Report-Only mode block nothing, just show wich violations where occured.
If you have violations in other CSP directives, you have to add it to Content Security Policy rules.

  • style-src-elem blocked means you use inline CSS blocks kind of <style>...</style>
  • style-src-attr blocked means you use inline style attribyte in the tags like <tag style='some_CSS_here'> or use javascript Element.setAttribute(‘style’, …) funct calls.
  • script-src-elem blocked means you use inline scripts blocks kind of <script>...</script>

I recommends to start with:
Header set Content-Security-Policy-Report-Only "default-src 'self'; script-src 'self'; style-src 'self' unsafe-inline;" and try to allow embedded scripts via ‘nonce-value’ token, because 'unsafe-inline' in scripts seriously reduces effectiveness of CSP.

I do not know which CMS you use, but it should have some plugins or middleware to easy manage Content Security Policy.

2 Likes

Thank you so much for your useful information.
I tested both of below lines:

Header set Content-Security-Policy-Report-Only "default-src 'self';"
Header set Content-Security-Policy-Report-Only "default-src 'self'; script-src 'self'; style-src 'self' unsafe-inline;"

And both of them show me the same error:

And when I check my website with https://securityheaders.com/, then it show me:
https://pasteboard.co/JNJrXmT.png
As you see, problem not solved!!!

Header set Content-Security-Policy-Report-Only "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';"

'unsafe-inline' should be single quoted, it was my typo but I could no longer edit the post when I noticed it.

1 Like

Thank you for your reply.
I added that line at the end of “httpd.conf” and restarted Apache service. Chromium show me below issue:

If you look at https://pasteboard.co/JNJrXmT.png, my website have another problem too (Permissions-Policy). How to solve it?