Content Security Policy “Refused to execute inline event handler” error

Question

I'm trying to mitigate XSS attacks by setting the Content-Security-Policy header but Chrome keeps throwing an error:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-Njg3MGUxNzkyMjViNDZkN2I3YTM3MDAzY2M0MjUxZGEzZmFhNDU0OGZjNDExMWU5OTVmMmMwMTg4NTA3ZmY4OQ=='". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

I tried setting the nonce in <script nonce="Njg3MGUxNzkyMjViNDZkN2I3YTM3MDAzY2M0MjUxZGEzZmFhNDU0OGZjNDExMWU5OTVmMmMwMTg4NTA3ZmY4OQ==" href="main.js"></script> but it does not worked.

Here's my Content-Security-Policy header:

default-src 'none'; 
script-src 'self' 'nonce-NjJjN2E5YjA0ZDJhNDlhZjlhMDFmZjQzMjE4YzhmMTAzOWNjZjVjMGZjNDIxMWU5YWIyNGMwMTg4NTA3ZmY4OQ=='; 
connect-src 'self' https://vimeo.com; 
img-src 'self'; 
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; 
font-src 'self' https://fonts.gstatic.com; 
media-src 'self' http://player.vimeo.com; 
frame-src 'self' http://player.vimeo.com;

I don't like setting the script-src as unsafe-inline, as it voids the used of Content-Security-Policy

Answer 1

Your CSP is blocking an inline event handler in your HTML code, like <button onclick="myFunction()">Click me</button>.

Inline event handlers are bad practice (mostly because they are inline). See this answer for insight.

Nonce does not seem to work with inline event handlers though. So the best thing to do would be to replace this event handler with a proper one written in your JS file. If you cannot do that, try adding 'unsafe-hashes' to your script-src.

Kudos for rejecting 'unsafe-inline', it's a shortcut we see way too often, including in production.

Answer 2

This error can also be caused by inline styles (styles in html file inside <style> </style>). I had this issue and removing inline styles solved problem.

Angular users can resolved this by setting "inlineCritical" to false for each configuration (more details here).

Example:

"configurations": {
 "production": {
   "optimization": {
     "scripts": true,
     "styles": {
       "minify": true,
       "inlineCritical": false
     },
     "fonts": false
    }
  }
}