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.
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.
