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

CheddarLizzard · Accepted Answer · 2023-03-06T11:45:22.130

21

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.

edited Mar 06 '23 at 11:45

answered Nov 04 '19 at 08:44

CheddarLizzard

471
4
10

I am trying to avoid adding 'unsafe-inline', but inline script is blocked even when using nonce. So.. from what i see, the part of the script that is blocked (or all of it - don't know) is document.addEventListioner("load").... => Is there a way to write it in another way which is CSP compliant? – Kosem Mar 05 '23 at 11:39
@Kosem Can't you add this code in a dedicated .js file? That's the cleanest and most straightforward approach. If you can't, as I said try using `unsafe-hashes`. Though do note that if there is dynamic data injected server side in your script before rendering (e.g. a PHP variable) you will also have to generate the hash dynamically (after it has been rendered so the variable has been replaced by its value) or the hash in your CSP won't match the one generated by the browser. – CheddarLizzard Mar 06 '23 at 11:44

score 13 · Answer 2 · edited Aug 26 '22 at 06:45

13

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

edited Aug 26 '22 at 06:45

ArunPratap

4,816
7
25
43

answered Mar 16 '22 at 09:44

mario

131
1
2

This solution worked for me, thank's. I mean, i don't have the excpetion anymore but i'm still wondering how it really works. I thought that by using this configuration, i could be able to delete "unsafe-inline" from "styles-src" in my Content Security Policy but when i do, the style doesn't render correctly on my website. Any suggestion ? – Yasmin AM Aug 19 '22 at 12:30

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

2 Answers2

Linked