Add support for 'crossorigin' attribute on bootstrapScripts and boots…

…trapModules (facebook#26844) base build ci job failing but this change is unrelated and I think it is just flake with the builds host application
EdisonVan · Apr 15, 2024 · 6af7037 · 6af7037
1 parent 3bbe565
commit 6af7037
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 0 deletions.
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,
@@ -266,6 +268,12 @@ export function createResponseState(
         typeof scriptConfig === 'string' ? scriptConfig : scriptConfig.src;
       const integrity =
         typeof scriptConfig === 'string' ? undefined : scriptConfig.integrity;
+      const crossOrigin =
+        typeof scriptConfig === 'string' || scriptConfig.crossOrigin == null
+          ? undefined
+          : scriptConfig.crossOrigin === 'use-credentials'
+          ? 'use-credentials'
+          : '';
 
       preloadBootstrapScript(resources, src, nonce, integrity);
 
@@ -285,6 +293,12 @@ export function createResponseState(
           stringToChunk(escapeTextForBrowser(integrity)),
         );
       }
+      if (typeof crossOrigin === 'string') {
+        bootstrapChunks.push(
+          scriptCrossOrigin,
+          stringToChunk(escapeTextForBrowser(crossOrigin)),
+        );
+      }
       bootstrapChunks.push(endAsyncScript);
     }
   }
@@ -295,6 +309,12 @@ export function createResponseState(
         typeof scriptConfig === 'string' ? scriptConfig : scriptConfig.src;
       const integrity =
         typeof scriptConfig === 'string' ? undefined : scriptConfig.integrity;
+      const crossOrigin =
+        typeof scriptConfig === 'string' || scriptConfig.crossOrigin == null
+          ? undefined
+          : scriptConfig.crossOrigin === 'use-credentials'
+          ? 'use-credentials'
+          : '';
 
       preloadBootstrapModule(resources, src, nonce, integrity);
 
@@ -315,6 +335,12 @@ export function createResponseState(
           stringToChunk(escapeTextForBrowser(integrity)),
         );
       }
+      if (typeof crossOrigin === 'string') {
+        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
@@ -3824,6 +3824,69 @@ 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: '',
+            },
+            {
+              src: 'qux',
+              crossOrigin: 'defaults-to-empty',
+            },
+          ],
+          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="" async=""></script>',
+      '<script src="qux" crossorigin="" 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 = '';