Content Security Policy 'NONCE' value is not applied to all scripts (when using 'ngCspNonce' approach)

[jlfrances]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

About Content Security Policy in Angular docs

In the Angular official docs (under section Content Security Policy) it says how to implement it in the Angular application.
The first approach is using an attribute called 'ngCspNonce':

Set the ngCspNonce attribute on the root application element as . Use > this approach if you have access to server-side templating that can add the nonce both to the header and the index.html when > constructing the response.
https://angular.dev/best-practices/security#content-security-policy

Trying 'nonce' with a hardcoded value

To test this, I set a hardcoded nonce (fakeNonce) to simulate what would be the auto-generated one.

So first I set it up in the HTTP Response header for the angular.json file (serve > options > headers):

☝️ Note that I'm using Content-Security-Policy-Report-Only instead of Content-Security-Policy so my app is not crashing when the policy is not complied. More info here: https://content-security-policy.com/report-only/

Then I added the nonce in the index.html :

Errors

The issue comes when I run the application: there are two <script> tags in the index.html that are added on runtime, but the nonce="fakeNonce" attribute-value is missing:

In the DevTools console I can see two errors that I understand are related to that:

I know all other inline styles and scripts work because the HTTP header is being returned:

Please provide the exception or error you saw

[Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-fakeNonce'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.3.7
Node: 20.5.1
Package Manager: npm 9.8.0
OS: win32 x64

Angular: 17.3.8
... animations, cdk, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.7
@angular-devkit/build-angular   17.3.7
@angular-devkit/core            17.3.7
@angular-devkit/schematics      17.3.7
@angular/cli                    17.3.7
@schematics/angular             17.3.7
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.4

[JoostK]

Transferring to the CLI, since it is the one inserting the script tags. This is ultimately a bit ambiguous; should the CLI extract ngCspNonce attributes anywhere in the document, to apply to the inserted script tags? There could be multiple, although I suspect that's mostly a theoretical problem. Then, any post-processing logic to ingest a nonce dynamically should also be aware of those additional attributes to replace, instead of the just the ngCspNonce attribute.

[alan-agius4]

The nonce / ngCspNonce attribute is used within a <script> and <style>tag to allow inline scripts and styles that would otherwise be blocked by a Content Security Policy (CSP). It's not used for scripts with the src attribute, as those are managed differently within the CSP.

External scripts that are referenced from a different file <script src="..."></script> are typically allowed by specifying their source (domain) in the CSP's script-src directive.

[skhodarahmi-clgx]

I am having the same issue. please help. thanks

[alan-agius4]

This issue has been resolved via #27875 as it turns out that there are valid cases when script with a src attribute need nonce to be set.

[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.}