CODEWITHSUNDEEP
angularcontent-security-policynonce
mra
mra

Reputation: 11

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.

Upvotes: 1

Views: 9013

Answers (1)

Usman Haider
Usman Haider

Reputation: 1

To add the missing nonce to the dynamically added scripts by an external library, you will need to manipulate the DOM after the external script has been loaded. You can achieve this using Angular's Renderer2 service. Here's an example of how you can do it:

import { Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

// Inject the document object
constructor(private renderer: Renderer2, @Inject(DOCUMENT) private document: Document) { }

// This function should be called after the external library has added the script to the head section
addNonceToDynamicallyAddedScripts() {
  const scripts = this.document.querySelectorAll('script');
  
  scripts.forEach(script => {
    // Check if the script is dynamically added by the external library
    if (!script.hasAttribute('nonce')) {
      // Add the nonce attribute
      this.renderer.setAttribute(script, 'nonce', 'random_nonce_value'); // Replace with your actual nonce value
    }
  });
}

In your component or service, call addNonceToDynamicallyAddedScripts() after the external library has loaded its script into the head section.

This code snippet checks all elements on the page and adds the nonce attribute if it's missing. Make sure to replace 'random_nonce_value' with your actual nonce value.

Note that this approach assumes that the external library has already loaded its script before you call addNonceToDynamicallyAddedScripts(). If the loading is asynchronous, you may need to ensure that the library has finished loading before executing this code.

Remember to test this thoroughly in your specific use case to ensure it works as expected with your CSP settings.

Upvotes: 0

Related Questions