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

angular · Oct 17, 2024 · e7e43d6 · e7e43d6
1 parent 0226a13
commit e7e43d6
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
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>