AutoCsp does not take into account deferred non critical css pattern

[JelleBruisten]

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

When using a pattern like the following ( https://web.dev/articles/defer-non-critical-css )

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

The current autoCSP does not take this into account resulting in:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'strict-dynamic' 'sha256-XKgARfZhRMo5gK0kPXGTdhZmjEwLryyNySnpk6LZ2KY=' 'sha256-BraSP++BD7aCtbSEKUlB7de4/yO9CY27B1EvWf+luSg=' 'sha256-KiCvS5vs6/GuCEnadaggF1Bll4ebf6u173N2HECRn+E=' https: 'unsafe-inline' 'unsafe-eval'". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.

Minimal Reproduction

• Create a new angular application
• add in the index.html:
  <link rel="preload" onload="this.onload=null;this.rel='stylesheet'" as="style" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
• build application with autoCSP: true
• serve the results using a http server and observe the errors

Exception or Error

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'strict-dynamic' 'sha256-XKgARfZhRMo5gK0kPXGTdhZmjEwLryyNySnpk6LZ2KY=' 'sha256-BraSP++BD7aCtbSEKUlB7de4/yO9CY27B1EvWf+luSg=' 'sha256-KiCvS5vs6/GuCEnadaggF1Bll4ebf6u173N2HECRn+E=' https: 'unsafe-inline' 'unsafe-eval'". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list

Your Environment

@angular-devkit/architect         0.1902.0
@angular-devkit/build-angular     19.2.0
@angular-devkit/core              19.2.0
@angular-devkit/schematics        19.2.0
@angular-devkit/schematics-cli    19.2.0
@angular/cdk                      19.2.1
@angular/google-maps              19.2.1
@angular/material                 19.2.1
@angular/material-luxon-adapter   19.2.1
@schematics/angular               19.2.0
rxjs                              7.8.2
typescript                        5.8.2
zone.js                           0.15.0

Anything else relevant?

No response

[alan-agius4]

Out of curiosity, why are you setting this manually? The Angular CLI automatically inlines critical CSS and defers non-critical CSS by default.

[JelleBruisten]

This project specically had these things before angular started inlining critical CSS, this project started on angular 7 so this line has been here for quite sometime. I did some quick checking with both autoCsp and optimization: true and does not seem to cause any problems I will remove the manual deferring.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}