autoCSP and media="print" onload="this.media='all'"

[rgant]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Setting "autoCsp": true in security configuration of angular.json breaks the stylesheet because it has JS onload to change the media type. Unsure why the media type change is happening, but I feel like I could do without it.

<meta http-equiv="Content-Security-Policy" content="script-src 'strict-dynamic' 'sha256-lxruP/GUT5SHo3Hi18U7zp9MDVNM5Zn9NDVhbptQFwA=' https: 'unsafe-inline';object-src 'none';base-uri 'self';style-src 'self' 'unsafe-inline';">

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

Minimal Reproduction

Example app reproduction is here: https://brainfry-app.web.app/login?next=%2Fprofile (For now, I will probably need to disable this setting shortly.)

https://github.com/rgant/brainfry/blob/c7ba05dec689d748363fc0c4febe4a1eec7109e3/angular.json#L37

Exception or Error

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'strict-dynamic' 'sha256-lxruP/GUT5SHo3Hi18U7zp9MDVNM5Zn9NDVhbptQFwA=' https: 'unsafe-inline'". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.`

I believe that this error message is just because Chrome is complaining about a fallback setup for the CSP policy and is not related to this issue, but included for completeness.

Your Environment

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 19.1.6
Node: 20.18.1
Package Manager: npm 11.0.0
OS: darwin arm64

Angular: 19.1.5
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1901.6
@angular-devkit/build-angular   19.1.6
@angular-devkit/core            19.1.6
@angular-devkit/schematics      19.1.6
@angular/cli                    19.1.6
@angular/fire                   19.0.0
@schematics/angular             19.1.6
rxjs                            7.8.1
typescript                      5.7.3
zone.js                         0.15.0

Anything else relevant?

No response

[rgant]

I guess this is related to optimization.styles.inlineCritical defaulting to true.

https://stackoverflow.com/a/67582075/41908

[dgp1130]

/cc @aaronshim

[aaronshim]

@dgp1130 I vaguely remember that we may have had this discussion a long time ago, when we were first planning auto-CSP.

There might have been interest in deprecating the this.media = ‘all’, is this still of interest? If not, we have to also hash the inline event handlers and throw that hash in to every generated CSP.

[alan-agius4]

@aaronshim, yes, we discussed this before. We need to update https://github.com/angular/angular-cli/blob/main/packages/angular/build/src/utils/index-file/inline-critical-css.ts to use the external script instead of the inline handlers. Alternatively, hashing the handlers could also work.

Let me know if you need any help with this.