| 1 | ---
|
| 2 | title: Security
|
| 3 | ---
|
| 4 |
|
| 5 | # Security
|
| 6 |
|
| 7 | [MODES: framework, data]
|
| 8 |
|
| 9 | This is by no means a comprehensive guide, but React Router provides features to help address a few aspects under the _very large_ umbrella that is _Security_.
|
| 10 |
|
| 11 | ## `Content-Security-Policy`
|
| 12 |
|
| 13 | ### Framework Mode without RSC
|
| 14 |
|
| 15 | If you are implementing a [Content-Security-Policy (CSP)][csp] in your application, specifically one using the `unsafe-inline` directive, you will need to specify a [`nonce`][nonce] attribute on the inline `<script>` elements rendered in your HTML.
|
| 16 |
|
| 17 | Add a nonce to these two spots in [`entry.server.tsx`][entryserver]:
|
| 18 |
|
| 19 | - The [`<ServerRouter nonce>`][serverrouter] prop
|
| 20 | - This will be proxied along through React Context and used for other Framework Mode components that output `nonce`-aware elements, including [`<Scripts>`][scripts], [`<ScrollRestoration>`][scrollrestoration]
|
| 21 | - If those components specify their own `nonce` prop, it will override the `ServerRouter` value
|
| 22 | - The `nonce` options of [`renderToPipeableStream`][renderToPipeableStream]/[`renderToReadableStream`][renderToReadableStream]
|
| 23 |
|
| 24 | ### RSC Framework and RSC Data Mode
|
| 25 |
|
| 26 | For RSC Framework and RSC Data Mode, generate the nonce in `entry.ssr.tsx` and pass it to `routeRSCServerRequest`, `RSCStaticRouter`, and the CSP response header. See the [RSC Content Security Policy nonce guide][rsc-csp]. The nonce is only needed while generating the HTML document; it should not be included in the RSC payload or passed to `matchRSCServerRequest`.
|
| 27 |
|
| 28 | [csp]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP
|
| 29 | [entryserver]: ../api/framework-conventions/entry.server.tsx
|
| 30 | [nonce]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
|
| 31 | [renderToPipeableStream]: https://react.dev/reference/react-dom/server/renderToPipeableStream
|
| 32 | [renderToReadableStream]: https://react.dev/reference/react-dom/server/renderToReadableStream
|
| 33 | [scripts]: ../api/components/Scripts
|
| 34 | [scrollrestoration]: ../api/components/ScrollRestoration
|
| 35 | [serverrouter]: ../api/framework-routers/ServerRouter
|
| 36 | [rsc-csp]: ./react-server-components#content-security-policy-nonces
|