Angular gives `Refused to execute inline event handler` error

Question

I have created an angular application. which gives the following error in the browser

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), 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.

The reason is that angular injects the following in index.html

<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

Its that onload="this.media='all'"

One solution is to set "optimization" to false, in which case angular doesn't inject this code. But that doesn't sound like the best solution. Any suggestions how to do this?

An other solution, which I think is a little bit better than the previous one, is to create a wrapper component which holds all the styling from styles.scss. In my case, for this to work, I also needed to to set the encapsultaion of that wrapper component to ViewEncapsulation.None

Does it happen after you click something? Or just loading it? — Mathew Berg, Dec 14 '21 at 18:10
Any chance it gives you which file it is? Sounds like it's trying to protect the code because there's some potentially usnafe execution. — Mathew Berg, Dec 14 '21 at 18:16
I found the code which is the root cause of this issue. In my `styles.scss` I have a couple of scss and css imports (they import thrid party styles). When I remove them the error disappears. I think `styles.scss` is compiled into css and injected into `index.html`. I think this is the reason. Can this be solved? — Jeanluca Scaljeri, Dec 14 '21 at 18:42
Could you maybe host the third party css's yourself? Is there anything odd in them? — Mathew Berg, Dec 14 '21 at 22:42
I found the problem, I've updated the post. Angular injects an inline script for loading that styles.css file — Jeanluca Scaljeri, Dec 15 '21 at 08:21
"Angular injects an inline script" was exactly my problem too. Thank you @JeanlucaScaljeri — paws, Feb 08 '22 at 09:42
As an immediate fix we're using `optimization` for now, but agree with your assessment that the second solution seems preferable. In the future hope to try out that second solution - `ViewEncapsulation.None` indeed seems to be the critical bit. Thank you for sharing your discoveries — paws, Feb 08 '22 at 09:43

score 20 · Answer 1 · answered Mar 01 '22 at 02:07

20

I had to add this on production configuration on angular.json

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

Because "optimization": false makes the bundle size too big.

answered Mar 01 '22 at 02:07

Miguel Carbajal

311
3
4

Yes, this right here! It seems to have fixed our issue completely. Are there any downsides to this solution though? – workaholic Apr 07 '22 at 15:30
1

Also, looks like Angular is supposed to be addressing CSP issues at some point in the future per a comment at https://github.com/angular/angular/issues/26152#issuecomment-886820961 – workaholic Apr 07 '22 at 15:30

score 0 · Answer 2 · answered Dec 16 '21 at 05:14

The root cause and fix is covered here: Refused to execute inline event handler because it violates CSP. (SANDBOX) Getting Angular to do it in a better way might be a challenge.

As the error message says, you can allow it with 'unsafe-hashes', but that is a feature of CSP level 3 and only implemented in Chromium browsers.

Angular gives `Refused to execute inline event handler` error

2 Answers2