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

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