inlineCritical CSS asynchronous loading method breaks with CSP

[jpduckwo]

Bug Report

Affected Package

@angular/cli

Is this a regression?

Nay

Description

The method used for inlining critical css and asynchronously loading it, breaks and doesn't load the external stylesheet when you have a content security policy that doesn't include script-src 'unsafe-inline'. As the name suggests this isn't a very secure way of operating for various reasons such as script injection.

You can fix by disabling inlineCritical in the optimizations - however maybe there is a better way to load the styles, maybe in a JS file?

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

It's the onload="this.media='all'" that breaks it

Minimal Reproduction

https://github.com/jpduckwo/ng12-csp-issue

run:
ng serve

Exception or Error

Refused to execute inline event handler because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

Your Environment

Angular Version:

@angular-devkit/architect       0.1200.1
@angular-devkit/build-angular   12.0.1
@angular-devkit/core            12.0.1
@angular-devkit/schematics      12.0.1
@schematics/angular             12.0.1
rxjs                            6.6.7
typescript                      4.2.4

[hardikpatel043]

I also faced this.

[tiberiuzuld]

I also faced this issue.
There are any options to disable this inline of critical css?

[tiberiuzuld]

Found how to disable the inlineCritical styles
aa3ea88
https://angular.io/guide/workspace-config#styles-optimization-options
In angular.json in the build configuration Instead of

"optimization": true

put

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

[alan-agius4]

We can probably solve this by changing the preload strategy of critters from media to default.

Let me reach out to the Chrome team so see if there are any drawbacks of doing so.