ngCspNonce should add the nonce value to the script tags loading the main bundles

[conorblencowe]

Which @angular/* package(s) are relevant/related to the feature request?

compiler-cli

Description

ngCspNonce is a great addition and almost solves a lot of the CSP difficulties I'm having but I think is missing some aspects to simplify the process of writing a CSP.

CSP level 3 introduces strict-dynamic for script-src. This avoids needing a whitelist and favours using a nonce (or hash) on scripts. The great part about it is that this "trust" given by a nonce also propagates to scripts that are loaded by the root script. This is particularly important for myself since we load a tracking script which in turn loads a bunch of other tracking services.

This almost works. The problem is that you can't use strict-dynamic in conjunction with 'self'. Angular currently does not add the nonce from ngCspNonce to the runtime/main bundles included at the bottom of the index.html. So, without a nonce or allowing "self" the browser blocks these.

Proposed solution

Along with the other inline styles/scripts that ngCspNonce will add the nonce placeholder to, also add this nonce to the bundles.

Alternatives considered

An alternate solution is to avoid strict-dynamic use whitelisting of domains but for an application with more complex scripts it is a lifesaver. Google's CSP evaluator utilises strict-dynamic in their "sample safe policy".

[danielritter]

+1

[tomastrajan]

Yes, please!

[bschick]

Hard to use strict-dynamic without this

[dvero23]

Yes please, it would be really helpful.

[JoostK]

Moving this to the CLI repo because it does the index.html preparation, not the Angular compiler itself.

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