Add support for 'crossorigin' attribute on bootstrapScripts and bootstrapModules

HenriqueLimas · HenriqueLimas · commit bc2588022f49 · 2023-05-24T08:18:57.000-07:00
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -163,6 +163,7 @@ const startScriptSrc = stringToPrecomputedChunk('<script src="');
 const startModuleSrc = stringToPrecomputedChunk('<script type="module" src="');
 const scriptNonce = stringToPrecomputedChunk('" nonce="');
 const scriptIntegirty = stringToPrecomputedChunk('" integrity="');
+const scriptCrossOrigin = stringToPrecomputedChunk('" crossorigin="');
 const endAsyncScript = stringToPrecomputedChunk('" async=""></script>');
 
 /**
@@ -192,6 +193,7 @@ const scriptReplacer = (
 export type BootstrapScriptDescriptor = {
   src: string,
   integrity?: string,
+  crossOrigin?: string,
 };
 export type ExternalRuntimeScript = {
   src: string,
@@ -265,6 +267,8 @@ export function createResponseState(
         typeof scriptConfig === 'string' ? scriptConfig : scriptConfig.src;
       const integrity =
         typeof scriptConfig === 'string' ? undefined : scriptConfig.integrity;
+      const crossOrigin =
+        typeof scriptConfig === 'string' ? undefined : scriptConfig.crossOrigin;
 
       bootstrapChunks.push(
         startScriptSrc,
@@ -282,6 +286,12 @@ export function createResponseState(
           stringToChunk(escapeTextForBrowser(integrity)),
         );
       }
+      if (crossOrigin) {
+        bootstrapChunks.push(
+          scriptCrossOrigin,
+          stringToChunk(escapeTextForBrowser(crossOrigin)),
+        );
+      }
       bootstrapChunks.push(endAsyncScript);
     }
   }
@@ -292,6 +302,8 @@ export function createResponseState(
         typeof scriptConfig === 'string' ? scriptConfig : scriptConfig.src;
       const integrity =
         typeof scriptConfig === 'string' ? undefined : scriptConfig.integrity;
+      const crossOrigin =
+        typeof scriptConfig === 'string' ? undefined : scriptConfig.crossOrigin;
 
       bootstrapChunks.push(
         startModuleSrc,
@@ -310,6 +322,12 @@ export function createResponseState(
           stringToChunk(escapeTextForBrowser(integrity)),
         );
       }
+      if (crossOrigin) {
+        bootstrapChunks.push(
+          scriptCrossOrigin,
+          stringToChunk(escapeTextForBrowser(crossOrigin)),
+        );
+      }
       bootstrapChunks.push(endAsyncScript);
     }
   }
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -3777,6 +3777,64 @@ describe('ReactDOMFizzServer', () => {
     ]);
   });
 
+  it('accepts a crossOrigin property for bootstrapScripts and bootstrapModules', async () => {
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <div>hello world</div>
+          </body>
+        </html>,
+        {
+          bootstrapScripts: [
+            'foo',
+            {
+              src: 'bar',
+            },
+            {
+              src: 'baz',
+              crossOrigin: 'anonymous',
+            },
+          ],
+          bootstrapModules: [
+            'quux',
+            {
+              src: 'corge',
+            },
+            {
+              src: 'grault',
+              crossOrigin: 'use-credentials',
+            },
+          ],
+        },
+      );
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>hello world</div>
+        </body>
+      </html>,
+    );
+    expect(
+      stripExternalRuntimeInNodes(
+        document.getElementsByTagName('script'),
+        renderOptions.unstable_externalRuntimeSrc,
+      ).map(n => n.outerHTML),
+    ).toEqual([
+      '<script src="foo" async=""></script>',
+      '<script src="bar" async=""></script>',
+      '<script src="baz" crossorigin="anonymous" async=""></script>',
+      '<script type="module" src="quux" async=""></script>',
+      '<script type="module" src="corge" async=""></script>',
+      '<script type="module" src="grault" crossorigin="use-credentials" 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 = '';
