Weird corner-case URLs that can escape/break our loader script.

aaronshim · aaronshim · commit 7b4eb3df4642 · 2024-10-21T18:57:05.000Z
diff --git a/packages/angular/build/src/utils/index-file/auto-csp.ts b/packages/angular/build/src/utils/index-file/auto-csp.ts
@@ -280,7 +280,7 @@ function createLoaderScript(srcList: SrcScriptTag[], enableTrustedTypes = false)
   const srcListFormatted = srcList
     .map(
       (s) =>
-        `['${encodeURI(s.src)}', ${s.type ? "'" + encodeURI(s.type) + "'" : undefined}, ${s.async ? 'true' : 'false'}, ${s.defer ? 'true' : 'false'}]`,
+        `['${encodeURI(s.src).replaceAll("'", "\\'")}', ${s.type ? "'" + encodeURI(s.type) + "'" : undefined}, ${s.async ? 'true' : 'false'}, ${s.defer ? 'true' : 'false'}]`,
     )
     .join();
   return enableTrustedTypes
diff --git a/packages/angular/build/src/utils/index-file/auto-csp_spec.ts b/packages/angular/build/src/utils/index-file/auto-csp_spec.ts
@@ -104,6 +104,35 @@ describe('auto-csp', () => {
     expect(Array.from(result.matchAll(/\<script\>/g)).length).toEqual(1);
   });
 
+  it('should rewrite source scripts with weird URLs', async () => {
+    const result = await autoCsp(`
+      <html>
+        <head>
+        </head>
+        <body>
+          <script src="/foo&amp;bar"></script>
+          <script src="/one'two\\'three\\\\'four\\\\\\'five"></script>
+          <script src="/one&two&amp;three&amp;amp;four"></script>
+          <script src="./</script>"></script>
+          <div>Some text </div>
+        </body>
+      </html>
+    `);
+
+    const csps = getCsps(result);
+    expect(csps.length).toBe(1);
+    expect(csps[0]).toMatch(ONE_HASH_CSP);
+    // &amp; encodes correctly
+    expect(result).toContain(`'/foo&bar'`);
+    // Impossible to escape a string and create invalid loader JS with a '
+    // (Quotes and backslashes work)
+    expect(result).toContain(`'/one\\'two%5C\\'three%5C%5C\\'four%5C%5C%5C\\'five'`);
+    // HTML entities work
+    expect(result).toContain(`'/one&two&three&amp;four'`);
+    // Cannot escape JS context to HTML
+    expect(result).toContain(`'./%3C/script%3E'`);
+  });
+
   it('should rewrite all script tags', async () => {
     const result = await autoCsp(`
       <html>

Original file line number	Diff line number	Diff line change
`@@ -280,7 +280,7 @@ function createLoaderScript(srcList: SrcScriptTag[], enableTrustedTypes = false)`
`280`	`280`	`const srcListFormatted = srcList`
`281`	`281`	`.map(`
`282`	`282`	`(s) =>`
`283`		- `['${encodeURI(s.src)}', ${s.type ? "'" + encodeURI(s.type) + "'" : undefined}, ${s.async ? 'true' : 'false'}, ${s.defer ? 'true' : 'false'}]`,
	`283`	+ `['${encodeURI(s.src).replaceAll("'", "\\'")}', ${s.type ? "'" + encodeURI(s.type) + "'" : undefined}, ${s.async ? 'true' : 'false'}, ${s.defer ? 'true' : 'false'}]`,
`284`	`284`	`)`
`285`	`285`	`.join();`
`286`	`286`	`return enableTrustedTypes`