refactor: remove polynomial regular expression

This change updates the critical css processor to remove the need for a Polynomial regular expression.

Addresses: https://github.com/angular/angular-cli/security/code-scanning/51
Closes #25742

Author: alan-agius4

packages/angular/ssr/src/common-engine.ts

@@ -98,22 +98,16 @@ export class CommonEngine {
       ...this.providers,
     ];
 
-    let doc = opts.document;
-    if (!doc && opts.documentFilePath) {
-      doc = await this.getDocument(opts.documentFilePath);
+    let document = opts.document;
+    if (!document && opts.documentFilePath) {
+      document = await this.getDocument(opts.documentFilePath);
     }
 
-    if (doc) {
+    if (document) {
       extraProviders.push({
         provide: INITIAL_CONFIG,
         useValue: {
-          document: inlineCriticalCss
-            ? // Workaround for https://github.com/GoogleChromeLabs/critters/issues/64
-              doc.replace(
-                / media="print" onload="this\.media='.+?'"(?: ngCspMedia=".+")?><noscript><link .+?><\/noscript>/g,
-                '>',
-              )
-            : doc,
+          document,
           url: opts.url,
         },
       });

packages/angular/ssr/src/inline-css-processor.ts

@@ -62,6 +62,8 @@ interface PartialHTMLElement {
   hasAttribute(name: string): boolean;
   removeAttribute(name: string): void;
   appendChild(child: PartialHTMLElement): void;
+  remove(): void;
+  name: string;
   textContent: string;
   tagName: string | null;
   children: PartialHTMLElement[];
@@ -138,6 +140,17 @@ class CrittersExtended extends Critters {
    * that makes it work with Angular's CSP APIs.
    */
   private embedLinkedStylesheetOverride: EmbedLinkedStylesheetFn = async (link, document) => {
+    if (link.getAttribute('media') === 'print' && link.next?.name === 'noscript') {
+      // Workaround for https://github.com/GoogleChromeLabs/critters/issues/64
+      // NB: this is only needed for the webpack based builders.
+      const media = link.getAttribute('onload')?.match(MEDIA_SET_HANDLER_PATTERN);
+      if (media) {
+        link.removeAttribute('onload');
+        link.setAttribute('media', media[1]);
+        link?.next?.remove();
+      }
+    }
+
     const returnValue = await this.initialEmbedLinkedStylesheet(link, document);
     const cspNonce = this.findCspNonce(document);
 

packages/angular_devkit/build_angular/src/builders/prerender/render-worker.ts

@@ -85,15 +85,7 @@ async function render({
     ? 'index.original.html'
     : indexFile;
   const browserIndexInputPath = path.join(outputPath, indexBaseName);
-  let document = await fs.promises.readFile(browserIndexInputPath, 'utf8');
-
-  if (inlineCriticalCss) {
-    // Workaround for https://github.com/GoogleChromeLabs/critters/issues/64
-    document = document.replace(
-      / media="print" onload="this\.media='.+?'"(?: ngCspMedia=".+")?><noscript><link .+?><\/noscript>/g,
-      '>',
-    );
-  }
+  const document = await fs.promises.readFile(browserIndexInputPath, 'utf8');
 
   const platformProviders: StaticProvider[] = [
     {

packages/angular_devkit/build_angular/src/builders/prerender/works_spec.ts

@@ -210,5 +210,9 @@ describe('Prerender Builder', () => {
     expect(content).toMatch(
       /<style>p{color:#000}<\/style><link rel="stylesheet" href="styles\.\w+\.css" media="print" onload="this\.media='all'">/,
     );
+
+    // Validate that critters does not process already critical css inlined stylesheets.
+    expect(content).not.toContain(`onload="this.media='print'">`);
+    expect(content).not.toContain(`media="print"></noscript>`);
   });
 });

packages/angular_devkit/build_angular/src/utils/index-file/inline-critical-css.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import * as fs from 'fs';
+import { readFile } from 'node:fs/promises';
 
 const Critters: typeof import('critters').default = require('critters');
 
@@ -58,6 +58,8 @@ interface PartialHTMLElement {
   hasAttribute(name: string): boolean;
   removeAttribute(name: string): void;
   appendChild(child: PartialHTMLElement): void;
+  remove(): void;
+  name: string;
   textContent: string;
   tagName: string | null;
   children: PartialHTMLElement[];
@@ -122,14 +124,25 @@ class CrittersExtended extends Critters {
   public override readFile(path: string): Promise<string> {
     const readAsset = this.optionsExtended.readAsset;
 
-    return readAsset ? readAsset(path) : fs.promises.readFile(path, 'utf-8');
+    return readAsset ? readAsset(path) : readFile(path, 'utf-8');
   }
 
   /**
    * Override of the Critters `embedLinkedStylesheet` method
    * that makes it work with Angular's CSP APIs.
    */
   private embedLinkedStylesheetOverride: EmbedLinkedStylesheetFn = async (link, document) => {
+    if (link.getAttribute('media') === 'print' && link.next?.name === 'noscript') {
+      // Workaround for https://github.com/GoogleChromeLabs/critters/issues/64
+      // NB: this is only needed for the webpack based builders.
+      const media = link.getAttribute('onload')?.match(MEDIA_SET_HANDLER_PATTERN);
+      if (media) {
+        link.removeAttribute('onload');
+        link.setAttribute('media', media[1]);
+        link?.next?.remove();
+      }
+    }
+
     const returnValue = await this.initialEmbedLinkedStylesheet(link, document);
     const cspNonce = this.findCspNonce(document);