InlineCritical does not work when nonce is provided by injection token

[timneil]

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

Don't known / other

Is this a regression?

No

Description

There was a previous bug raised and fixed for InlineCritical and nonce that fixed the issue when the nonce is provided as an attribute on the app element. It has not been fixed when the nonce is provided as an injection token.

The documentation states that either way of providing a nonce is fine. Neither are depricated or discouraged.
https://angular.dev/best-practices/security#content-security-policy

Here is the original issue and the PR for the fix
angular/angular-cli#20864
angular/angular-cli#24903

You can see the fix for the original issue it only runs if it finds a nonce as an attribute.
https://github.com/angular/angular-cli/blob/d6ea6b09f182433f859a78d4a4d38a9db521e593/packages/angular/build/src/utils/index-file/inline-critical-css.ts#L199

I have recreated the issue with a boilerplate project. When the project is built (ng build not ng serve so the loading optimisations are applied) then the background-color: red styles are not loaded and there will be a CSP message in the browser console.

This should either be fixed for when the nonce is injected only or it should be clear in the documentation that the attribute must be provided.

Please provide a link to a minimal reproduction of the bug

https://github.com/moefinley/angular-broken-csp

Please provide the exception or error you saw

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

Angular 19

Anything else?

No response

[alan-agius4]

This should definitely be documented: in this case, the injection token is not expected to work. We should also mention the auto CSP feature.

[montella1507]

In our application. We have Nonce provided via root element - NOT provided via dependency injection...
Application is using service workers.

And.. it fails ramdomly.. Sometimes it does not remove media="print" from style tag. It is not simulatable when Disable cache in F12=> Network is enabled (when cache is disabled).

Before CSP, everything worked without any issues.

however.. it is NG 18.2, so it may be fixed by your linked commit.

[timneil]

however.. it is NG 18.2, so it may be fixed by your linked commit.

For nonces that are supplied via the root element the fix in the linked commit will work. I don't know which release the fix made it into. Best to just upgrade to Angular 19 and see if it works for you.

You can disable the optimisation that causes the bug even in older versions of Angular. That is described in the link too.

[montella1507]

Thought so. We have already disabled inline critical optimization until we can update. Thanks.