Security

• Framework
• Data
• Declarative

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.

Content-Security-Policy

Framework Mode without RSC

If you are implementing a Content-Security-Policy (CSP) in your application, specifically one using the unsafe-inline directive, you will need to specify a nonce attribute on the inline <script> elements rendered in your HTML.

Add a nonce to these two spots in entry.server.tsx:

• The <ServerRouter nonce> prop
  • This will be proxied along through React Context and used for other Framework Mode components that output nonce-aware elements, including <Scripts>, <ScrollRestoration>
  • If those components specify their own nonce prop, it will override the ServerRouter value
• The nonce options of renderToPipeableStream/renderToReadableStream

RSC Framework and RSC Data Mode

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. The nonce is only needed while generating the HTML document; it should not be included in the RSC payload or passed to matchRSCServerRequest.