Recent activity
))\n```\n\n`policy` may be static or a sync/async factory receiving `{ nonce, context }`; `reportOnlyPolicy` takes the same forms (see [Report-only policies](#report-only-policies)). At least one of them is required. Before the factory or downstream handlers run, `csp()` establishes a base64-encoded nonce with 128 random bits from `crypto.getRandomValues()`.\n\nInferred directive objects and factory returns reject unknown directive names without annotations. For shared factories, `satisfies CspPolicyFactory` preserves this check; annotations that erase extra keys prevent `csp()` from detecting them.\n\n`render()` applies the nonce to generated import maps, module preloads, and CSS mixin styles. Internal frame requests, including redirects, share the enclosing nonce; independent requests generate fresh values. Authored script and style tags use `getCspNonce(context)`, which returns `undefined` before a nonce is established.\n\nModule preloads can load without a nonce under `'strict-dynamic'`. The renderer stamps them so they also work with nonce-based policies that omit `'strict-dynamic'` and do not otherwise allow their URLs.\n\nBrowser navigation retains the original document's CSP. Matching resource nonces are rewritten when the response's CSP identifies one shared nonce, using the report-only header when the enforcing header is absent. The browser still enforces the original document's policies. See [CSP integration](https://github.com/remix-run/remix/tree/main/packages/component/src/server#content-security-policy) for island updates, nonce requirements, and custom resolvers.\n\n### Nonce access in components\n\nComponents do not receive the route's request context directly. Pass `getCspNonce(context)` as a component prop, or use [`asyncContext()`](https://github.com/remix-run/remix/tree/main/packages/async-context-middleware) on Node.js to read it during server rendering:\n\n```tsx\nimport { createRouter } from 'remix/router'\nimport { asyncContext, getContext } from 'remix/middleware/async-context'\nimport { csp, getCspNonce } from 'remix/middleware/csp'\nimport { render } from 'remix/middleware/render'\n\nlet router = createRouter({\n middleware: [\n asyncContext(),\n csp({\n policy: ({ nonce }) => ({ scriptSrc: [`'nonce-${nonce}'`] }),\n }),\n render(),\n ],\n})\n\nfunction Document() {\n return () => (\n \n \n \n \n Hello, world!\n \n )\n}\n\nrouter.get('/', (context) => context.render(