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".