[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" })`
Josh Story committed
Jun 15, 2023 at 13:39 UTC
86acc10f2596e1a6fe2fd57a5b325de85175800b
4 files changed
+42
packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+1
@@ -2233,6 +2233,7 @@ function preloadPropsFromPreloadOptions(
2233
crossOrigin: as === 'font' ? '' : options.crossOrigin,
2234
integrity: options.integrity,
2235
type: options.type,
2236
+ nonce: options.nonce,
2237
fetchPriority: options.fetchPriority,
2238
};
2239
}
packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+1
@@ -5532,6 +5532,7 @@ function preloadPropsFromPreloadOptions(
5532
crossOrigin: as === 'font' ? '' : options.crossOrigin,
5533
integrity: options.integrity,
5534
type: options.type,
5535
+ nonce: options.nonce,
5536
fetchPriority: options.fetchPriority,
5537
};
5538
}
packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+39
@@ -3981,6 +3981,45 @@ body {
3981
</html>,
3982
);
3983
});
3984
+
3985
+ it('supports nonce', async () => {
3986
+ function App({url}) {
3987
+ ReactDOM.preload(url, {as: 'script', nonce: 'abc'});
3988
+ return 'hello';
3989
+ }
3990
+
3991
+ await act(() => {
3992
+ renderToPipeableStream(<App url="server" />).pipe(writable);
3993
+ });
3994
+
3995
+ expect(getMeaningfulChildren(document)).toEqual(
3996
+ <html>
3997
+ <head />
3998
+ <body>
3999
+ <div id="container">
4000
+ <link rel="preload" as="script" href="server" nonce="abc" />
4001
+ hello
4002
+ </div>
4003
+ </body>
4004
+ </html>,
4005
+ );
4006
+
4007
+ ReactDOMClient.hydrateRoot(container, <App url="client" />);
4008
+ await waitForAll([]);
4009
+ expect(getMeaningfulChildren(document)).toEqual(
4010
+ <html>
4011
+ <head>
4012
+ <link rel="preload" as="script" href="client" nonce="abc" />
4013
+ </head>
4014
+ <body>
4015
+ <div id="container">
4016
+ <link rel="preload" as="script" href="server" nonce="abc" />
4017
+ hello
4018
+ </div>
4019
+ </body>
4020
+ </html>,
4021
+ );
4022
+ });
4023
});
4024
4025
describe('ReactDOM.preinit(href, { as: ... })', () => {
packages/react-dom/src/shared/ReactDOMTypes.js
+1
@@ -14,6 +14,7 @@ export type PreloadOptions = {
14
crossOrigin?: string,
15
integrity?: string,
16
type?: string,
17
+ nonce?: string,
18
fetchPriority?: 'high' | 'low' | 'auto',
19
};
20
export type PreinitOptions = {