fix(@nguniversal/common): error during critical CSS inlining for exte…

…rnal stylesheets The problem with the previous approach is that it assumes that a `link` tag processed by Critters will be preceded by a `style` tag that was inserted by Critters. This assumption might not necessarily be true if Critters is unable to resolve the content of the linked styles. Closes: angular#3241
alan-agius4 · Aug 17, 2023 · 4b4c1b7 · 4b4c1b7
1 parent 5974f8e
commit 4b4c1b7
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/modules/common/tools/src/inline-css-processor.ts b/modules/common/tools/src/inline-css-processor.ts
@@ -154,7 +154,15 @@ class CrittersExtended extends Critters {
         this.conditionallyInsertCspLoadingScript(document, cspNonce);
       }
 
-      link.prev?.setAttribute('nonce', cspNonce);
+      // Ideally we would hook in at the time Critters inserts the `style` tags, but there isn't
+      // a way of doing that at the moment so we fall back to doing it any time a `link` tag is
+      // inserted. We mitigate it by only iterating the direct children of the `<head>` which
+      // should be pretty shallow.
+      document.head.children.forEach((child) => {
+        if (child.tagName === 'style' && !child.hasAttribute('nonce')) {
+          child.setAttribute('nonce', cspNonce);
+        }
+      });
     }
 
     return returnValue;