[Float] Nonce preload support (#26939)

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" })`
facebook · Jun 15, 2023 · 86acc10 · 86acc10
1 parent 4ddc019
commit 86acc10
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 0 deletions.
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 = {