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 addes the ability to specify a nonce for `ReactDOM.preload(..., { as: "script" })`
facebook · Jun 13, 2023 · 8ed2797 · 8ed2797
1 parent a7bf5ba
commit 8ed2797
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 = {