fix(@angular/build): Fixing auto-csp edge cases where

- <script> is the last tag before </head> close
- .appendChild is called before </head> (because document.body is undefined then)
- <script> tags with a src attribute and no specified type attribute should not write <script type="undefined" ...>

Author: aaronshim

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

@@ -86,19 +86,28 @@ export async function autoCsp(html: string, unsafeEval = false): Promise<string>
   let openedScriptTag: StartTag | undefined = undefined;
   let scriptContent: SrcScriptTag[] = [];
   const hashes: string[] = [];
+  let inBody = false;
 
   /**
    * 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);
+    const loaderScript = createLoaderScript(
+      scriptContent,
+      /* enableTrustedTypes = */ false,
+      inBody,
+    );
     hashes.push(hashTextContent(loaderScript));
     rewriter.emitRaw(`<script>${loaderScript}</script>`);
     scriptContent = [];
   }
 
   rewriter.on('startTag', (tag, html) => {
+    if (tag.tagName === 'body') {
+      inBody = true;
+    }
+
     if (tag.tagName === 'script') {
       openedScriptTag = tag;
       const src = getScriptAttributeValue(tag, 'src');
@@ -152,7 +161,7 @@ export async function autoCsp(html: string, unsafeEval = false): Promise<string>
       }
     }
 
-    if (tag.tagName === 'body' || tag.tagName === 'html') {
+    if (tag.tagName === 'head' || 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();
@@ -258,7 +267,11 @@ function getStrictCsp(
  * Returns JS code for dynamically loading sourced (external) scripts.
  * @param srcList A list of paths for scripts that should be loaded.
  */
-function createLoaderScript(srcList: SrcScriptTag[], enableTrustedTypes = false): string {
+function createLoaderScript(
+  srcList: SrcScriptTag[],
+  enableTrustedTypes = false,
+  inBody = true,
+): string {
   if (!srcList.length) {
     throw new Error('Cannot create a loader script with no scripts to load.');
   }
@@ -267,7 +280,7 @@ function createLoaderScript(srcList: SrcScriptTag[], enableTrustedTypes = false)
       // URI encoding means value can't escape string, JS, or HTML context.
       const srcAttr = encodeURI(s.src).replaceAll("'", "\\'");
       // Can only be 'module' or a JS MIME type or an empty string.
-      const typeAttr = s.type ? "'" + s.type + "'" : undefined;
+      const typeAttr = s.type ? "'" + s.type + "'" : "''";
       const asyncAttr = s.async ? 'true' : 'false';
       const deferAttr = s.defer ? 'true' : 'false';
 
@@ -288,7 +301,7 @@ function createLoaderScript(srcList: SrcScriptTag[], enableTrustedTypes = false)
     s.type = scriptUrl[1];
     s.async = !!scriptUrl[2];
     s.defer = !!scriptUrl[3];
-    document.body.appendChild(s);
+    document.${inBody ? 'body' : 'head'}.appendChild(s);
   });\n`
     : `
   var scripts = [${srcListFormatted}];
@@ -298,6 +311,6 @@ function createLoaderScript(srcList: SrcScriptTag[], enableTrustedTypes = false)
     s.type = scriptUrl[1];
     s.async = !!scriptUrl[2];
     s.defer = !!scriptUrl[3];
-    document.body.appendChild(s);
+    document.${inBody ? 'body' : 'head'}.appendChild(s);
   });\n`;
 }

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

@@ -18,6 +18,9 @@ const getCsps = (html: string) => {
 const ONE_HASH_CSP =
   /script-src 'strict-dynamic' 'sha256-[^']+' https: 'unsafe-inline';object-src 'none';base-uri 'self';/;
 
+const TWO_HASH_CSP =
+  /script-src 'strict-dynamic' (?:'sha256-[^']+' ){2}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';/;
 
@@ -55,7 +58,7 @@ describe('auto-csp', () => {
     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]];`);
+    expect(result).toContain(`var scripts = [['./main.js', '', false, false]];`);
   });
 
   it('should rewrite a single source script in place', async () => {
@@ -75,14 +78,15 @@ describe('auto-csp', () => {
     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\]\];/,
+      /Some text<\/div>\s*<script>\s*var scripts = \[\['.\/main.js', '', false, false\]\];/,
     );
   });
 
   it('should rewrite a multiple source scripts with attributes', async () => {
     const result = await autoCsp(`
       <html>
         <head>
+        <script src="./head.js"></script>
         </head>
         <body>
           <script src="./main1.js"></script>
@@ -96,13 +100,15 @@ describe('auto-csp', () => {
 
     const csps = getCsps(result);
     expect(csps.length).toBe(1);
-    expect(csps[0]).toMatch(ONE_HASH_CSP);
+    expect(csps[0]).toMatch(TWO_HASH_CSP);
     expect(result).toContain(
       // eslint-disable-next-line max-len
-      `var scripts = [['./main1.js', undefined, false, false],['./main2.js', undefined, true, false],['./main3.js', 'module', true, true]];`,
+      `var scripts = [['./main1.js', '', false, false],['./main2.js', '', true, false],['./main3.js', 'module', true, true]];`,
     );
-    // Only one loader script is created.
-    expect(Array.from(result.matchAll(/<script>/g)).length).toEqual(1);
+    // Head loader script is in the head.
+    expect(result).toContain(`</script></head>`);
+    // Only two loader scripts are created.
+    expect(Array.from(result.matchAll(/<script>/g)).length).toEqual(2);
   });
 
   it('should rewrite source scripts with weird URLs', async () => {
@@ -160,14 +166,40 @@ describe('auto-csp', () => {
     // Loader script for main.js and main2.js appear after 'foo' and before 'bar'.
     expect(result).toMatch(
       // eslint-disable-next-line max-len
-      /console.log\('foo'\);<\/script>\s*<script>\s*var scripts = \[\['.\/main.js', undefined, false, false\],\['.\/main2.js', undefined, false, false\]\];[\s\S]*console.log\('bar'\);/,
+      /console.log\('foo'\);<\/script>\s*<script>\s*var scripts = \[\['.\/main.js', '', false, false\],\['.\/main2.js', '', false, false\]\];[\s\S]*console.log\('bar'\);/,
     );
     // Loader script for main3.js and main4.js appear after 'bar'.
     expect(result).toMatch(
       // eslint-disable-next-line max-len
-      /console.log\('bar'\);<\/script>\s*<script>\s*var scripts = \[\['.\/main3.js', undefined, false, false\],\['.\/main4.js', undefined, false, false\]\];/,
+      /console.log\('bar'\);<\/script>\s*<script>\s*var scripts = \[\['.\/main3.js', '', false, false\],\['.\/main4.js', '', false, false\]\];/,
     );
     // Exactly 4 scripts should be left.
     expect(Array.from(result.matchAll(/<script>/g)).length).toEqual(4);
   });
+
+  it('should write a loader script that appends to head', async () => {
+    const result = await autoCsp(`
+      <html>
+        <head>
+        <script src="./head.js"></script>
+        </head>
+        <body>
+          <div>Some text </div>
+        </body>
+      </html>
+    `);
+
+    const csps = getCsps(result);
+    expect(csps.length).toBe(1);
+    expect(csps[0]).toMatch(ONE_HASH_CSP);
+
+    expect(result).toContain(
+      // eslint-disable-next-line max-len
+      `document.head.appendChild`,
+    );
+    // Head loader script is in the head.
+    expect(result).toContain(`</script></head>`);
+    // Only one loader script is created.
+    expect(Array.from(result.matchAll(/<script>/g)).length).toEqual(1);
+  });
 });