Test and readability changes

Author: aaronshim

packages/angular/build/src/utils/index-file/auto-csp.ts

@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { htmlRewritingStream } from './html-rewriting-stream';
+import { RewritingStream } from 'parse5-html-rewriting-stream';
 import { StartTag } from 'parse5-sax-parser';
+import { htmlRewritingStream } from './html-rewriting-stream';
 import * as crypto from 'crypto';
-import { RewritingStream } from 'parse5-html-rewriting-stream';
 
 /**
  * The hash function to use for hash directives to use in the CSP.
@@ -43,7 +43,6 @@ const JS_MIME_TYPES = new Set([
  * Store the appropriate attributes of a sourced script tag to generate the loader script.
  */
 interface SrcScriptTag {
-  scriptType: 'src';
   src: string;
   type?: string;
   async: boolean;
@@ -92,29 +91,11 @@ function shouldDynamicallyLoadScriptTagBasedOnType(scriptType: string | undefine
  *     include whitespaces and newlines!
  * @returns The hash of the text formatted appropriately for CSP.
  */
-export function hashScriptText(scriptText: string): string {
+export function hashTextContent(scriptText: string): string {
   const hash = crypto.createHash(HASH_FUNCTION).update(scriptText, 'utf-8').digest('base64');
   return `'${HASH_FUNCTION}-${hash}'`;
 }
 
-/**
- * Generates the dynamic loading script and puts it in the rewriter and adds the hash of the dynamic
- * loader script to the collection of hashes to add to the <meta> tag CSP.
- *
- * @param scriptContent The current streak of <script src="..."> tags
- * @param hashes The array of hashes to include in the final CSP
- * @param rewriter Where to emit tags to
- */
-function emitLoaderScript(
-  scriptContent: SrcScriptTag[],
-  hashes: string[],
-  rewriter: RewritingStream,
-) {
-  const loaderScript = createLoaderScript(scriptContent);
-  hashes.push(hashScriptText(loaderScript));
-  rewriter.emitRaw(`<script>${loaderScript}</script>`);
-}
-
 /**
  * Finds all `<script>` tags and creates a dynamic script loading block for consecutive `<script>` with `src` attributes.
  * Hashes all scripts, both inline and generated dynamic script loading blocks.
@@ -130,6 +111,17 @@ export async function autoCsp(html: string): Promise<string> {
   let scriptContent: SrcScriptTag[] = [];
   let hashes: string[] = [];
 
+  /**
+   * Generates the dynamic loading script and puts it in the rewriter and adds the hash of the dynamic
+   * loader script to the collection of hashes to add to the <meta> tag CSP.
+   */
+  function emitLoaderScript() {
+    const loaderScript = createLoaderScript(scriptContent);
+    hashes.push(hashTextContent(loaderScript));
+    rewriter.emitRaw(`<script>${loaderScript}</script>`);
+    scriptContent = [];
+  }
+
   rewriter.on('startTag', (tag, html) => {
     if (tag.tagName === 'script') {
       openedScriptTag = tag;
@@ -140,7 +132,6 @@ export async function autoCsp(html: string): Promise<string> {
         const scriptType = getScriptAttributeValue(tag, 'type');
         if (shouldDynamicallyLoadScriptTagBasedOnType(scriptType)) {
           scriptContent.push({
-            scriptType: 'src',
             src: src,
             type: scriptType,
             async: !(getScriptAttributeValue(tag, 'async') === undefined),
@@ -157,15 +148,14 @@ export async function autoCsp(html: string): Promise<string> {
     // (One edge case is where there are no more opening tags after the last <script src="..."> is
     // closed, but this case is handled below with the final </body> tag.)
     if (scriptContent.length > 0) {
-      emitLoaderScript(scriptContent, hashes, rewriter);
-      scriptContent = [];
+      emitLoaderScript();
     }
     rewriter.emitStartTag(tag);
   });
 
   rewriter.on('text', (tag, html) => {
     if (openedScriptTag && !getScriptAttributeValue(openedScriptTag, 'src')) {
-      hashes.push(hashScriptText(html));
+      hashes.push(hashTextContent(html));
     }
     rewriter.emitText(tag);
   });
@@ -185,8 +175,7 @@ export async function autoCsp(html: string): Promise<string> {
     if (tag.tagName === 'body' || tag.tagName === 'html') {
       // Write the loader script if a string of <script>s were the last opening tag of the document.
       if (scriptContent.length > 0) {
-        emitLoaderScript(scriptContent, hashes, rewriter);
-        scriptContent = [];
+        emitLoaderScript();
       }
     }
     rewriter.emitEndTag(tag);

packages/angular/build/src/utils/index-file/auto-csp_spec.ts

@@ -6,7 +6,20 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { autoCsp, hashScriptText } from './auto-csp';
+import { autoCsp, hashTextContent } from './auto-csp';
+
+// Utility function to grab the meta tag CSPs from the HTML response.
+const getCsps = (html: string) => {
+  return Array.from(
+    html.matchAll(/<meta http-equiv="Content-Security-Policy" content="([^"]*)">/g),
+  ).map((m) => m[1]); // Only capture group.
+};
+
+const ONE_HASH_CSP =
+  /script-src 'strict-dynamic' 'sha256-[^']+' https: 'unsafe-inline';object-src 'none';base-uri 'self';/;
+
+const FOUR_HASH_CSP =
+  /script-src 'strict-dynamic' (?:'sha256-[^']+' ){4}https: 'unsafe-inline';object-src 'none';base-uri 'self';/;
 
 describe('auto-csp', () => {
   it('should rewrite a single inline script', async () => {
@@ -21,9 +34,10 @@ describe('auto-csp', () => {
       </html>
     `);
 
-    expect(result).toContain(
-      `<meta http-equiv="Content-Security-Policy" content="script-src 'strict-dynamic' ${hashScriptText("console.log('foo');")} https: 'unsafe-inline';object-src 'none';base-uri 'self';">`,
-    );
+    const csps = getCsps(result);
+    expect(csps.length).toBe(1);
+    expect(csps[0]).toMatch(ONE_HASH_CSP);
+    expect(csps[0]).toContain(hashTextContent("console.log('foo');"));
   });
 
   it('should rewrite a single source script', async () => {
@@ -38,9 +52,9 @@ describe('auto-csp', () => {
       </html>
     `);
 
-    expect(result).toContain(
-      `<meta http-equiv="Content-Security-Policy" content="script-src 'strict-dynamic' 'sha256-cfa69N/DhgtxzDzIHo+IFj9KPigQLDJgb6ZGZa3g5Cs=' https: 'unsafe-inline';object-src 'none';base-uri 'self';">`,
-    );
+    const csps = getCsps(result);
+    expect(csps.length).toBe(1);
+    expect(csps[0]).toMatch(ONE_HASH_CSP);
     expect(result).toContain(`var scripts = [['./main.js', undefined, false, false]];`);
   });
 
@@ -56,9 +70,9 @@ describe('auto-csp', () => {
       </html>
     `);
 
-    expect(result).toContain(
-      `<meta http-equiv="Content-Security-Policy" content="script-src 'strict-dynamic' 'sha256-cfa69N/DhgtxzDzIHo+IFj9KPigQLDJgb6ZGZa3g5Cs=' https: 'unsafe-inline';object-src 'none';base-uri 'self';">`,
-    );
+    const csps = getCsps(result);
+    expect(csps.length).toBe(1);
+    expect(csps[0]).toMatch(ONE_HASH_CSP);
     // Our loader script appears after the HTML text content.
     expect(result).toMatch(
       /Some text<\/div>\s*<script>\s*var scripts = \[\['.\/main.js', undefined, false, false\]\];/,
@@ -80,9 +94,9 @@ describe('auto-csp', () => {
       </html>
     `);
 
-    expect(result).toContain(
-      `<meta http-equiv="Content-Security-Policy" content="script-src 'strict-dynamic' 'sha256-oK8+CQgKHPljcYJpTNKJt/y0A0oiBIm3LRke3EhzHVQ=' https: 'unsafe-inline';object-src 'none';base-uri 'self';">`,
-    );
+    const csps = getCsps(result);
+    expect(csps.length).toBe(1);
+    expect(csps[0]).toMatch(ONE_HASH_CSP);
     expect(result).toContain(
       `var scripts = [['./main1.js', undefined, false, false],['./main2.js', undefined, true, false],['./main3.js', 'module', true, true]];`,
     );
@@ -107,9 +121,12 @@ describe('auto-csp', () => {
       </html>
     `);
 
-    expect(result).toContain(
-      `<meta http-equiv="Content-Security-Policy" content="script-src 'strict-dynamic' ${hashScriptText("console.log('foo');")} 'sha256-6q4qOp9MMB///5kaRda2I++J9l0mJiqWRxQ9/8hoSyw=' ${hashScriptText("console.log('bar');")} 'sha256-AUmEDzNdja438OLB3B8Opyxy9B3Tr1Tib+aaGZdhhWQ=' https: 'unsafe-inline';object-src 'none';base-uri 'self';">`,
-    );
+    const csps = getCsps(result);
+    expect(csps.length).toBe(1);
+    // Exactly four hashes for the four scripts that remain (inline, loader, inline, loader).
+    expect(csps[0]).toMatch(FOUR_HASH_CSP);
+    expect(csps[0]).toContain(hashTextContent("console.log('foo');"));
+    expect(csps[0]).toContain(hashTextContent("console.log('bar');"));
     // Loader script for main.js and main2.js appear after 'foo' and before 'bar'.
     expect(result).toMatch(
       /console.log\('foo'\);<\/script>\s*<script>\s*var scripts = \[\['.\/main.js', undefined, false, false\],\['.\/main2.js', undefined, false, false\]\];[\s\S]*console.log\('bar'\);/,