fix(@angular/build): add CSP nonce to script with src tags

alan-agius4 · alan-agius4 · commit bdd168f37f77 · 2024-06-18T13:57:02.000Z
Prior to this change, script tags with the `src` attribute were not being assigned a CSP nonce during the build process. This is useful strict-dynamic is a Content Security Policy (CSP) directive that simplifies the management of dynamically loaded scripts while maintaining a high level of security. It allows scripts that are initially trusted (through a nonce or hash) to load other scripts without additional restrictions. Closes #27874 (cherry picked from commit c0ceddf)
diff --git a/packages/angular/build/src/utils/index-file/nonce.ts b/packages/angular/build/src/utils/index-file/nonce.ts
@@ -29,8 +29,7 @@ export async function addNonce(html: string): Promise<string> {
 
   rewriter.on('startTag', (tag) => {
     if (
-      (tag.tagName === 'style' ||
-        (tag.tagName === 'script' && !tag.attrs.some((attr) => attr.name === 'src'))) &&
+      (tag.tagName === 'style' || tag.tagName === 'script') &&
       !tag.attrs.some((attr) => attr.name === 'nonce')
     ) {
       tag.attrs.push({ name: 'nonce', value: nonce });
diff --git a/packages/angular/build/src/utils/index-file/nonce_spec.ts b/packages/angular/build/src/utils/index-file/nonce_spec.ts
@@ -74,22 +74,22 @@ describe('addNonce', () => {
     expect(result).toContain('<style nonce="{% nonce %}">.a {color: red;}</style>');
   });
 
-  it('should to all inline script tags', async () => {
+  it('should to all script tags', async () => {
     const result = await addNonce(`
       <html>
         <head>
         </head>
         <body>
           <app ngCspNonce="{% nonce %}"></app>
-          <script>console.log('foo');</<script>
+          <script>console.log('foo');</script>
           <script src="./main.js"></script>
-          <script>console.log('bar');</<script>
+          <script>console.log('bar');</script>
         </body>
       </html>
     `);
 
-    expect(result).toContain(`<script nonce="{% nonce %}">console.log('foo');</<script>`);
-    expect(result).toContain('<script src="./main.js"></script>');
-    expect(result).toContain(`<script nonce="{% nonce %}">console.log('bar');</<script>`);
+    expect(result).toContain(`<script nonce="{% nonce %}">console.log('foo');</script>`);
+    expect(result).toContain('<script src="./main.js" nonce="{% nonce %}"></script>');
+    expect(result).toContain(`<script nonce="{% nonce %}">console.log('bar');</script>`);
   });
 });
