fix(@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.

Author: alan-agius4

packages/angular/build/src/builders/application/tests/options/app-shell_spec.ts

@@ -170,7 +170,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       indexFileContent.toContain('app-shell works!');
       indexFileContent.toContain('p{color:#000}');
       indexFileContent.toContain(
-        `<link rel="stylesheet" href="styles.css" media="print" data-beasties-media="all">`,
+        `<link rel="stylesheet" href="styles.css" nonce="{% nonce %}" media="print" data-beasties-media="all">`,
       );
       indexFileContent.toContain('<style nonce="{% nonce %}">p{color:#000}');
       indexFileContent.toContain('<style nonce="{% nonce %}" ng-app-id="ng">');

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

@@ -14,8 +14,11 @@ import { htmlRewritingStream } from './html-rewriting-stream';
  */
 const NONCE_ATTR_PATTERN = /ngCspNonce/i;
 
+const TARGET_LINK_RELS: ReadonlySet<string> = new Set(['stylesheet', 'modulepreload']);
+
 /**
- * Finds the `ngCspNonce` value and copies it to all inline `<style>` and `<script> `tags.
+ * Finds the `ngCspNonce` value and copies it to all `<style>` and `<script>` tags,
+ * as well as stylesheet and modulepreload `<link>` tags.
  * @param html Markup that should be processed.
  */
 export async function addNonce(html: string): Promise<string> {
@@ -28,11 +31,29 @@ 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;
+          break;
+        }
+
+        if (tagName === 'link' && attr.name === 'rel' && attr.value) {
+          const tokens = attr.value.trim().toLowerCase().split(/\s+/);
+          if (tokens.some((token) => TARGET_LINK_RELS.has(token))) {
+            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,40 @@ 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 and modulepreload link tags', async () => {
+    const result = await addNonce(`
+      <html>
+        <head>
+          <link rel="stylesheet" href="styles.css">
+          <link rel="modulepreload" href="main.js">
+          <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="modulepreload" href="main.js" nonce="{% nonce %}">');
+    expect(result).toContain('<link rel="preload" href="font.woff2" as="font">');
+  });
+
+  it('should add the nonce expression when link rel has mixed case or multiple tokens', async () => {
+    const result = await addNonce(`
+      <html>
+        <head>
+          <link rel="Stylesheet" href="styles.css">
+          <link rel="MODULEPRELOAD" href="main.js">
+        </head>
+        <body>
+          <app ngCspNonce="{% nonce %}"></app>
+        </body>
+      </html>
+    `);
+
+    expect(result).toContain('<link rel="Stylesheet" href="styles.css" nonce="{% nonce %}">');
+    expect(result).toContain('<link rel="MODULEPRELOAD" href="main.js" nonce="{% nonce %}">');
+  });
 });

packages/angular_devkit/build_angular/src/builders/app-shell/app-shell_spec.ts

@@ -195,7 +195,7 @@ describe('AppShell Builder', () => {
     expect(content).toContain('<app-root ngcspnonce="{% nonce %}"');
     expect(content).toContain('<script nonce="{% nonce %}">');
     expect(content).toMatch(
-      /<link rel="stylesheet" href="styles\.[a-z0-9]+\.css" media="print" data-beasties-media="all">/,
+      /<link rel="stylesheet" href="styles\.[a-z0-9]+\.css" nonce="{% nonce %}" media="print" data-beasties-media="all">/,
     );
   });
 });