How to set dynamic nonce value to scriptSrc by reading the nonce value from script

[HareeshYHY]

Hi Team,

Problem Description

1. am generating a uuid and setting the value as script.nonce = uuid(); from my angular componet.ts

         this.uuid = uuid();
         const script = document.createElement('script');
         script.id = this.modelName + '-script';
         script.type = 'text/javascript';
         script.nonce = uuid();
         script.innerHTML = data;
         document.body.appendChild(script);

2. we are using express nodejs and helmet to set the contentSecurityPolicy(CSP). Now i want to read the nonce value which was generated in angular component.ts in step1 and set to scriptSrc.

   app.use(helmet.contentSecurityPolicy({
       directives: {
           defaultSrc: ["'self'"],
           scriptSrc: ["'self'", "https://www.google-analytics.com/analytics.js", "'unsafe-eval'", "'???? How to set dynamic nonce??'"],
   
       }
   }));

3. am setting dynamic uuid value to nonce but unable to read the value and set it contentSecurityPolicy(CSP) nonce. getting error while loading the page.

4. is there any way to read the dynamically generated nonce value in angular component.ts and set it not the helmet.contentSecurityPolicy for the scriptSrc as "nonce-uuid"?

Expected behavior The helmet.contentSecurityPolicy should set the dynamic nonce value to the scriptSrc.

Error Details Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' https://www.google-analytics.com/analytics.js 'unsafe-eval' ". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.