support subresource integrity for bootstrapScripts and bootstrapModules (#25104)

gnoff · rickhanlonii · commit 360a6c4571a9 · 2022-10-06T12:13:07.000-04:00
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -3390,6 +3390,61 @@ describe('ReactDOMFizzServer', () => {
     });
   });
 
+  it('accepts an integrity property for bootstrapScripts and bootstrapModules', async () => {
+    await actIntoEmptyDocument(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <div>hello world</div>
+          </body>
+        </html>,
+        {
+          bootstrapScripts: [
+            'foo',
+            {
+              src: 'bar',
+            },
+            {
+              src: 'baz',
+              integrity: 'qux',
+            },
+          ],
+          bootstrapModules: [
+            'quux',
+            {
+              src: 'corge',
+            },
+            {
+              src: 'grault',
+              integrity: 'garply',
+            },
+          ],
+        },
+      );
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>hello world</div>
+        </body>
+      </html>,
+    );
+    expect(
+      Array.from(document.getElementsByTagName('script')).map(n => n.outerHTML),
+    ).toEqual([
+      '<script src="foo" async=""></script>',
+      '<script src="bar" async=""></script>',
+      '<script src="baz" integrity="qux" async=""></script>',
+      '<script type="module" src="quux" async=""></script>',
+      '<script type="module" src="corge" async=""></script>',
+      '<script type="module" src="grault" integrity="garply" async=""></script>',
+    ]);
+  });
+
   describe('bootstrapScriptContent escaping', () => {
     it('the "S" in "</?[Ss]cript" strings are replaced with unicode escaped lowercase s or S depending on case, preserving case sensitivity of nearby characters', async () => {
       window.__test_outlet = '';
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -8,6 +8,7 @@
  */
 
 import type {ReactNodeList} from 'shared/ReactTypes';
+import type {BootstrapScriptDescriptor} from './ReactDOMServerFormatConfig';
 
 import ReactVersion from 'shared/ReactVersion';
 
@@ -28,8 +29,8 @@ type Options = {|
   namespaceURI?: string,
   nonce?: string,
   bootstrapScriptContent?: string,
-  bootstrapScripts?: Array<string>,
-  bootstrapModules?: Array<string>,
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -9,6 +9,7 @@
 
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {Writable} from 'stream';
+import type {BootstrapScriptDescriptor} from './ReactDOMServerFormatConfig';
 
 import ReactVersion from 'shared/ReactVersion';
 
@@ -38,8 +39,8 @@ type Options = {|
   namespaceURI?: string,
   nonce?: string,
   bootstrapScriptContent?: string,
-  bootstrapScripts?: Array<string>,
-  bootstrapModules?: Array<string>,
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
   progressiveChunkSize?: number,
   onShellReady?: () => void,
   onShellError?: (error: mixed) => void,
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
@@ -8,6 +8,7 @@
  */
 
 import type {ReactNodeList} from 'shared/ReactTypes';
+import type {BootstrapScriptDescriptor} from './ReactDOMServerFormatConfig';
 
 import ReactVersion from 'shared/ReactVersion';
 
@@ -27,8 +28,8 @@ type Options = {|
   identifierPrefix?: string,
   namespaceURI?: string,
   bootstrapScriptContent?: string,
-  bootstrapScripts?: Array<string>,
-  bootstrapModules?: Array<string>,
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticNode.js b/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
@@ -8,6 +8,8 @@
  */
 
 import type {ReactNodeList} from 'shared/ReactTypes';
+import type {BootstrapScriptDescriptor} from './ReactDOMServerFormatConfig';
+
 import {Writable, Readable} from 'stream';
 
 import ReactVersion from 'shared/ReactVersion';
@@ -28,8 +30,8 @@ type Options = {|
   identifierPrefix?: string,
   namespaceURI?: string,
   bootstrapScriptContent?: string,
-  bootstrapScripts?: Array<string>,
-  bootstrapModules?: Array<string>,
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -82,6 +82,7 @@ const endInlineScript = stringToPrecomputedChunk('</script>');
 
 const startScriptSrc = stringToPrecomputedChunk('<script src="');
 const startModuleSrc = stringToPrecomputedChunk('<script type="module" src="');
+const scriptIntegirty = stringToPrecomputedChunk('" integrity="');
 const endAsyncScript = stringToPrecomputedChunk('" async=""></script>');
 
 /**
@@ -104,13 +105,17 @@ const scriptRegex = /(<\/|<)(s)(cript)/gi;
 const scriptReplacer = (match, prefix, s, suffix) =>
   `${prefix}${s === 's' ? '\\u0073' : '\\u0053'}${suffix}`;
 
+export type BootstrapScriptDescriptor = {
+  src: string,
+  integrity?: string,
+};
 // Allows us to keep track of what we've already written so we can refer back to it.
 export function createResponseState(
   identifierPrefix: string | void,
   nonce: string | void,
   bootstrapScriptContent: string | void,
-  bootstrapScripts: Array<string> | void,
-  bootstrapModules: Array<string> | void,
+  bootstrapScripts: $ReadOnlyArray<string | BootstrapScriptDescriptor> | void,
+  bootstrapModules: $ReadOnlyArray<string | BootstrapScriptDescriptor> | void,
 ): ResponseState {
   const idPrefix = identifierPrefix === undefined ? '' : identifierPrefix;
   const inlineScriptWithNonce =
@@ -129,20 +134,42 @@ export function createResponseState(
   }
   if (bootstrapScripts !== undefined) {
     for (let i = 0; i < bootstrapScripts.length; i++) {
+      const scriptConfig = bootstrapScripts[i];
+      const src =
+        typeof scriptConfig === 'string' ? scriptConfig : scriptConfig.src;
+      const integrity =
+        typeof scriptConfig === 'string' ? undefined : scriptConfig.integrity;
       bootstrapChunks.push(
         startScriptSrc,
-        stringToChunk(escapeTextForBrowser(bootstrapScripts[i])),
-        endAsyncScript,
+        stringToChunk(escapeTextForBrowser(src)),
       );
+      if (integrity) {
+        bootstrapChunks.push(
+          scriptIntegirty,
+          stringToChunk(escapeTextForBrowser(integrity)),
+        );
+      }
+      bootstrapChunks.push(endAsyncScript);
     }
   }
   if (bootstrapModules !== undefined) {
     for (let i = 0; i < bootstrapModules.length; i++) {
+      const scriptConfig = bootstrapModules[i];
+      const src =
+        typeof scriptConfig === 'string' ? scriptConfig : scriptConfig.src;
+      const integrity =
+        typeof scriptConfig === 'string' ? undefined : scriptConfig.integrity;
       bootstrapChunks.push(
         startModuleSrc,
-        stringToChunk(escapeTextForBrowser(bootstrapModules[i])),
-        endAsyncScript,
+        stringToChunk(escapeTextForBrowser(src)),
       );
+      if (integrity) {
+        bootstrapChunks.push(
+          scriptIntegirty,
+          stringToChunk(escapeTextForBrowser(integrity)),
+        );
+      }
+      bootstrapChunks.push(endAsyncScript);
     }
   }
   return {
