feat(@angular/build): add CSP nonce to stylesheet and modulepreload link elements

Under strict Content Security Policies that do not allow 'self' in
style-src or style-src-elem, external stylesheets must be authorized
via a cryptographic nonce.

This commit updates addNonce to apply the CSP nonce to <link> elements
with rel containing 'stylesheet' or 'modulepreload'.

Closes #34255

Author: alan-agius4

packages/angular/build/src/utils/index-file/inline-critical-css_spec.ts

@@ -233,4 +233,31 @@ describe('inlineCriticalCss', () => {
     expect(warnings.length).toBeGreaterThan(0);
     expect(warnings[0]).toContain('missing.css');
   });
+
+  it('should retain nonce on stylesheet links and noscript fallback', async () => {
+    const initialContent = `
+      <html>
+      <head>
+        <link href="styles.css" rel="stylesheet" nonce="test-nonce">
+      </head>
+      <body></body>
+    </html>`;
+
+    const { content, errors, warnings } = await inlineCriticalCss(
+      initialContent,
+      '/dist/',
+      undefined,
+      false,
+      readAsset,
+    );
+
+    expect(errors).toEqual([]);
+    expect(warnings).toEqual([]);
+    expect(content).toContain(
+      '<link href="styles.css" rel="stylesheet" nonce="test-nonce" media="print" data-beasties-media="all">',
+    );
+    expect(content).toContain(
+      '<noscript><link href="styles.css" rel="stylesheet" nonce="test-nonce"></noscript>',
+    );
+  });
 });

packages/angular/build/src/utils/index-file/nonce.ts

@@ -28,11 +28,26 @@ export async function addNonce(html: string): Promise<string> {
   const { rewriter, transformedContent } = await htmlRewritingStream(html);
 
   rewriter.on('startTag', (tag) => {
-    if (
-      (tag.tagName === 'style' || tag.tagName === 'script') &&
-      !tag.attrs.some((attr) => attr.name === 'nonce')
-    ) {
-      tag.attrs.push({ name: 'nonce', value: nonce });
+    const { tagName, attrs } = tag;
+
+    if (tagName === 'style' || tagName === 'script' || tagName === 'link') {
+      let isTarget = tagName !== 'link';
+      let hasNonce = false;
+
+      for (const attr of attrs) {
+        if (attr.name === 'nonce') {
+          hasNonce = true;
+        } else if (tagName === 'link' && attr.name === 'rel' && attr.value) {
+          const tokens = attr.value.trim().split(/\s+/);
+          if (tokens.includes('stylesheet') || tokens.includes('modulepreload')) {
+            isTarget = true;
+          }
+        }
+      }
+
+      if (isTarget && !hasNonce) {
+        attrs.push({ name: 'nonce', value: nonce });
+      }
     }
 
     rewriter.emitStartTag(tag);

packages/angular/build/src/utils/index-file/nonce_spec.ts

@@ -92,4 +92,21 @@ describe('addNonce', () => {
     expect(result).toContain('<script src="./main.js" nonce="{% nonce %}"></script>');
     expect(result).toContain(`<script nonce="{% nonce %}">console.log('bar');</script>`);
   });
+
+  it('should add the nonce expression to stylesheet link tags', async () => {
+    const result = await addNonce(`
+      <html>
+        <head>
+          <link rel="stylesheet" href="styles.css">
+          <link rel="preload" href="font.woff2" as="font">
+        </head>
+        <body>
+          <app ngCspNonce="{% nonce %}"></app>
+        </body>
+      </html>
+    `);
+
+    expect(result).toContain('<link rel="stylesheet" href="styles.css" nonce="{% nonce %}">');
+    expect(result).toContain('<link rel="preload" href="font.woff2" as="font">');
+  });
 });