ngCspNonce broken since domutils v3.2.1

[GKersten]

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

any

Description

After regenerating our package-lock.json file we ran into an issue where ngCspNonce is no longer working. After debugging we figured out that it is caused with an update of domutils package to v3.2.1. Since downgrading that package to v3.1.0 seems to fix the issue. For this we were able to find these probably related Github issues on external repositories for indirect dependencies of @angular/build:
fb55/htmlparser2#1987
fb55/domutils#1855

However since this actually breaks the ngCspNonce functionality we thought it would be good to also report the issue here.

The issue happens when creating a new Angular app with ngCspNonce attribute added, after building the app, the <style> tags are not generated. Seems like ngCspNonce is ignored?

See comparison of "excepted" (left) and "actual" (right) of the index.html from the dist folder after running build
![Image](https://github.com/user-attachments/assets/c0107736-f0a3-4dfc-b080-35094640690c

Dependency tree: @angular/build > beasties > htmlparser2 > domutils

Minimal Reproduction

See Stackblitz:
https://stackblitz.com/edit/ng-csp-nonce?file=src%2Findex.html

Or take full reproduction steps:

1. Create a new Angular app using ng new (latest v19, but also reproducable with v18)
2. add some styles to global styles.scss
3. add ngCspNonce="randomNonceGoesHere" to <app-root> as described in https://angular.dev/best-practices/security#content-security-policy
4. run npm install & npm run build
5. Look at dist directory and lookup the generated index.html find this line <link rel="stylesheet" href="styles-RP5GNS3S.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-RP5GNS3S.css"></noscript></head>. Notice that it contains onload="this.media='all'" which should actually have been prevented by the ngCspNonce attribute.

To work-around:

1. in package.json add

"overrides": {
    "domutils": "3.1.0"
  }

2. delete node_modules & package-lock.json to be sure.
3. run npm install & npm run build
4. Look at dist directory and lookup the generated index.html find this line

Exception or Error

Your Environment

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

Angular CLI: 19.0.6
Node: 22.11.0
Package Manager: npm 10.9.0
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1900.6 (cli-only)
@angular-devkit/core         19.0.6 (cli-only)
@angular-devkit/schematics   19.0.6 (cli-only)
@schematics/angular          19.0.6 (cli-only)

Anything else relevant?

No response

[alan-agius4]

This issue appears to stem from fb55/domutils#1856, which is expected to be resolved by fb55/domutils#1857.

Unfortunately, there isn't much we can do at this point.

[clydin]

This appears to have been fixed upstream in [email protected]

[GKersten]

Just confirm: That did indeed also fix the issue with ngCspNonce 👍