Why does CSP script-src unsafe-inline induce styling issues on my Angular webapp?

The issue:


When I try to remove unsafe-inline source for script-src CSP my Angular webapp does not work anymore.

What is the root cause of this issue ?


When using SCSS in Angular@12+, Angular add a property onload on the index.html

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

This results in a violation of the CSP unsafe-inline source for script-src header.

How to fix this issue and remove this "security breach" on my Angular web app ?

Continue reading...