fix(@angular/build): prevent HTML injection from inlined font CSS

SkyZeroZx · SkyZeroZx · commit 4fd8f61c0fa2 · 2026-07-10T17:32:52.000-05:00
Remote font CSS is embedded into a raw-text style element. Escape closing style tags so a compromised allowlisted response cannot terminate the style element and inject nonce-bearing markup.
diff --git a/packages/angular/build/src/utils/index-file/inline-fonts.ts b/packages/angular/build/src/utils/index-file/inline-fonts.ts
@@ -150,8 +150,9 @@ export class InlineFontsProcessor {
             attrs.find(({ name, value }) => name === 'href' && hrefsContent.has(value));
           if (hrefAttr) {
             const href = hrefAttr.value;
-            const cssContent = hrefsContent.get(href);
-            rewriter.emitRaw(`<style>${cssContent}</style>`);
+            const cssContent = hrefsContent.get(href) ?? '';
+            // Prevent the CSS from terminating the generated raw-text style element.
+            rewriter.emitRaw(`<style>${cssContent.replace(/<\/(?=style)/gi, '<\\/')}</style>`);
           } else {
             rewriter.emitStartTag(tag);
           }
diff --git a/packages/angular/build/src/utils/index-file/inline-fonts_spec.ts b/packages/angular/build/src/utils/index-file/inline-fonts_spec.ts
@@ -6,7 +6,9 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import { htmlRewritingStream } from './html-rewriting-stream';
 import { InlineFontsProcessor } from './inline-fonts';
+import { addNonce } from './nonce';
 
 describe('InlineFontsProcessor', () => {
   describe('Google fonts', () => {
@@ -100,6 +102,32 @@ describe('InlineFontsProcessor', () => {
         `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`,
       );
     });
+
+    it('should escape closing style tags in inlined CSS', async () => {
+      const inlineFontsProcessor = new InlineFontsProcessor({
+        minify: true,
+      });
+      spyOn(inlineFontsProcessor, 'processURL').and.resolveTo(
+        'body { color: red; }</StYlE><script>globalThis.attack = true;</script><style>',
+      );
+
+      const html = await inlineFontsProcessor.process(`
+        <html>
+          <head>
+            <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+          </head>
+          <body><app-root ngCspNonce="trusted-nonce"></app-root></body>
+        </html>`);
+      const htmlWithNonce = await addNonce(html);
+      const { rewriter, transformedContent } = await htmlRewritingStream(htmlWithNonce);
+      const elementNames: string[] = [];
+      rewriter.on('startTag', ({ tagName }) => elementNames.push(tagName));
+      await transformedContent();
+
+      expect(htmlWithNonce).toContain('body { color: red; }<\\/StYlE>');
+      expect(elementNames.filter((name) => name === 'style')).toHaveSize(1);
+      expect(elementNames).not.toContain('script');
+    });
   });
 
   describe('Adobe Typekit fonts', () => {
