[Float] Nonce preload support (facebook#26939)

gnoff · AndyPengc12 · commit bdf2c9964f57 · 2024-04-15T09:43:24.000+08:00
Some browsers, with some CSP configuration, will not preload a script if
the prelaod link tag does not provide a valid nonce attribute. This
change adds the ability to specify a nonce for `ReactDOM.preload(..., {
as: "script" })`
diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -2233,6 +2233,7 @@ function preloadPropsFromPreloadOptions(
     crossOrigin: as === 'font' ? '' : options.crossOrigin,
     integrity: options.integrity,
     type: options.type,
+    nonce: options.nonce,
     fetchPriority: options.fetchPriority,
   };
 }
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -5532,6 +5532,7 @@ function preloadPropsFromPreloadOptions(
     crossOrigin: as === 'font' ? '' : options.crossOrigin,
     integrity: options.integrity,
     type: options.type,
+    nonce: options.nonce,
     fetchPriority: options.fetchPriority,
   };
 }
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -3981,6 +3981,45 @@ body {
         </html>,
       );
     });
+
+    it('supports nonce', async () => {
+      function App({url}) {
+        ReactDOM.preload(url, {as: 'script', nonce: 'abc'});
+        return 'hello';
+      }
+
+      await act(() => {
+        renderToPipeableStream(<App url="server" />).pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body>
+            <div id="container">
+              <link rel="preload" as="script" href="server" nonce="abc" />
+              hello
+            </div>
+          </body>
+        </html>,
+      );
+
+      ReactDOMClient.hydrateRoot(container, <App url="client" />);
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="preload" as="script" href="client" nonce="abc" />
+          </head>
+          <body>
+            <div id="container">
+              <link rel="preload" as="script" href="server" nonce="abc" />
+              hello
+            </div>
+          </body>
+        </html>,
+      );
+    });
   });
 
   describe('ReactDOM.preinit(href, { as: ... })', () => {
diff --git a/packages/react-dom/src/shared/ReactDOMTypes.js b/packages/react-dom/src/shared/ReactDOMTypes.js
@@ -14,6 +14,7 @@ export type PreloadOptions = {
   crossOrigin?: string,
   integrity?: string,
   type?: string,
+  nonce?: string,
   fetchPriority?: 'high' | 'low' | 'auto',
 };
 export type PreinitOptions = {

Original file line number	Diff line number	Diff line change
`@@ -2233,6 +2233,7 @@ function preloadPropsFromPreloadOptions(`
`2233`	`2233`	`crossOrigin: as === 'font' ? '' : options.crossOrigin,`
`2234`	`2234`	`integrity: options.integrity,`
`2235`	`2235`	`type: options.type,`
	`2236`	`+ nonce: options.nonce,`
`2236`	`2237`	`fetchPriority: options.fetchPriority,`
`2237`	`2238`	`};`
`2238`	`2239`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5532,6 +5532,7 @@ function preloadPropsFromPreloadOptions(`
`5532`	`5532`	`crossOrigin: as === 'font' ? '' : options.crossOrigin,`
`5533`	`5533`	`integrity: options.integrity,`
`5534`	`5534`	`type: options.type,`
	`5535`	`+ nonce: options.nonce,`
`5535`	`5536`	`fetchPriority: options.fetchPriority,`
`5536`	`5537`	`};`
`5537`	`5538`	`}`