Static styles injected by Angular during build time causes CSP violation

I am working on a Angular 18 project. My org has the strict CSP policy and no unsafe-inline is allowed. As documented by Angular here, while rendering the index.html, I generate a nonce per request and update it in <app-root ngCspNonce="">. This nonce, apparently, is then propagated by Angular in all the or created at run time.

However, there are many styles (precisely 3 tags and quite huge) generated by Angular (even with inlineCritical: false) at build time. These are static in the dist generated by Angular at build time itself. It seems that the ngCspNonce attribute has no impact on these style. As a result, these style mark CSP violation at runtime.

Interestingly, if I keep a static ngCspNonce beforehand in my code, then at the build time that nonce is also copied to injected styles in the generated dist. However, that is of no use, as the nonce is supposed to be generated by server per request.

My Questions:

1. Is it correct that ngCspNonce do not apply to these static build time styles. My research says Yes. If so why is that so. Why Angular keep them static knowing that it will fail?
2. What is the way to handle these build time style tags (or script tags if angular might generate any) against the CSP. Should I be rewriting these tags again at every request.

As I said these styles are huge, generating a one time hash also doesn't seem feasible.

Would like to hear the thoughts on how this is being done for enterprise apps out there.

Continue reading...