How to add nonce attribute in Angular 16 for scripts and styles created dynamically?

I'm adding Content-Security-Policy header in an application using Angular 16 to avoid XSS attacks. I added ngCspNonce attribute to the tag in index.html and set random nonce value on the server side. All styles and scripts loaded by Angular have the nonce attribute. I noticed that when an external library adds something to the head section of the page the nonce is not set. The library first loads the script into the head section, and this creates tags, which are blocked by the CSP setting. Is there any way to add the missing nonce?

My CSP looks like: script-src 'self' 'nonce-random_nonce_value' style-src 'self' 'nonce-random_nonce_value'

Can I use the CSP_NONCE token injection for this? If so how?

I expect the site to be secured with CSP header without using 'unsafe-inline' or 'unsafe-hashes' due to the use of external libraries.

Continue reading...