fix: nonce support by schiller-manuel · Pull Request #5287 · TanStack/router

schiller-manuel · 2025-09-28T23:08:28Z

Summary by CodeRabbit

New Features
- Added optional nonce support to assets, enabling nonce attributes on rendered scripts, styles, and links.
- Automatically propagates a configured nonce from router SSR options to all head assets and scripts.
- Server-side rendering for both React and Solid now forwards the nonce to ensure consistent nonce application in streamed and string-rendered output.
- Improves compatibility with strict Content Security Policies by reducing manual nonce wiring.

coderabbitai · 2025-09-28T23:08:47Z

Walkthrough

Adds optional nonce support across React and Solid router rendering paths. Propagates router.options.ssr?.nonce into SSR render options and through HeadContent/Scripts into Asset and Script elements, applying nonce to link, style, and script tags. Public Asset signature updated to accept nonce.

Changes

Cohort / File(s)	Summary of changes
React Asset component `packages/react-router/src/Asset.tsx`	Asset props extended to `RouterManagedTag & { nonce?: string }`. Passes nonce to rendered link/style elements and to Script (including inline and src cases). Internal Script updated to accept and apply nonce.
React head/script wiring `packages/react-router/src/HeadContent.tsx`, `packages/react-router/src/Scripts.tsx`	Reads `router.options.ssr?.nonce` and forwards it as `nonce` to each Asset render, affecting all head and script assets.
React SSR render `packages/react-router/src/ssr/renderRouterToStream.tsx`	Adds `nonce: router.options.ssr?.nonce` to ReactDOMServer render options for both Readable and Pipeable streams.
Solid SSR render `packages/solid-router/src/ssr/renderRouterToStream.tsx`, `packages/solid-router/src/ssr/renderRouterToString.tsx`	Supplies `nonce: router.options.ssr?.nonce` to Solid’s `renderToStream` and `renderToString` options; no other flow changes.

Sequence Diagram(s)

sequenceDiagram
autonumber
participant App
participant Router
participant HeadContent
participant Scripts
participant Asset
participant Script
App->>Router: initialize with options.ssr?.nonce
Router->>HeadContent: render()
HeadContent->>Asset: render(tag, attrs, children, nonce)
Router->>Scripts: render()
Scripts->>Asset: render(tag=script, attrs, children, nonce)
Asset->>Script: render(nonce, attrs, children)
Script-->>Asset: <script nonce=...>
Asset-->>HeadContent: <link/style/script nonce=...>
Asset-->>Scripts: <script nonce=...>

sequenceDiagram
autonumber
participant Server
participant Router
participant ReactSSR as ReactDOMServer
participant SolidSSR as Solid SSR
Server->>Router: renderRouterToStream()/renderRouterToString()
alt React path
Router->>ReactSSR: render(..., { nonce: router.options.ssr?.nonce })
ReactSSR-->>Server: HTML/stream with nonce-aware tags
else Solid path
Router->>SolidSSR: render(..., { nonce: router.options.ssr?.nonce })
SolidSSR-->>Server: HTML/stream with nonce-aware tags
end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

fix(router): prevent script tag duplication in SSR and client-side navigation #5095 — Touches Asset/Script rendering paths; likely interacts with how scripts are injected/deduplicated, which now also carry nonce attributes.

Poem

A bunny taps keys with delicate paws,
Whispering “nonce” to the tags it draws.
Link, style, script—each guarded note,
Threaded through streams where pages float.
From Solid to React the tale is spun,
Secure little carrots for everyone. 🥕✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title “fix: nonce support” clearly and concisely captures the primary purpose of the changeset, which is to add and propagate nonce support across asset rendering and server-side rendering paths without including unnecessary detail or ambiguity.

✨ Finishing touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch nonce-support

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7a129f7 and cb01ecd.

📒 Files selected for processing (6)

packages/react-router/src/Asset.tsx (5 hunks)
packages/react-router/src/HeadContent.tsx (1 hunks)
packages/react-router/src/Scripts.tsx (1 hunks)
packages/react-router/src/ssr/renderRouterToStream.tsx (2 hunks)
packages/solid-router/src/ssr/renderRouterToStream.tsx (1 hunks)
packages/solid-router/src/ssr/renderRouterToString.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript in strict mode with extensive type safety across the codebase

Files:

packages/solid-router/src/ssr/renderRouterToString.tsx
packages/react-router/src/ssr/renderRouterToStream.tsx
packages/react-router/src/HeadContent.tsx
packages/solid-router/src/ssr/renderRouterToStream.tsx
packages/react-router/src/Asset.tsx
packages/react-router/src/Scripts.tsx

packages/{react-router,solid-router}/**

📄 CodeRabbit inference engine (AGENTS.md)

Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/

Files:

packages/solid-router/src/ssr/renderRouterToString.tsx
packages/react-router/src/ssr/renderRouterToStream.tsx
packages/react-router/src/HeadContent.tsx
packages/solid-router/src/ssr/renderRouterToStream.tsx
packages/react-router/src/Asset.tsx
packages/react-router/src/Scripts.tsx

🧠 Learnings (1)

📚 Learning: 2025-09-23T17:36:12.598Z

Learnt from: CR
PR: TanStack/router#0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/

Applied to files:

packages/solid-router/src/ssr/renderRouterToString.tsx

🧬 Code graph analysis (2)

packages/react-router/src/HeadContent.tsx (1)

packages/react-router/src/Asset.tsx (1)
Asset (11-45)

packages/react-router/src/Scripts.tsx (1)

packages/react-router/src/Asset.tsx (1)
Asset (11-45)

🪛 ast-grep (0.39.5)

packages/react-router/src/Asset.tsx

[warning] 31-31: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
- https://cwe.mitre.org/data/definitions/79.html

(react-unsafe-html-injection)

🪛 Biome (2.1.2)

packages/react-router/src/Asset.tsx

[error] 32-32: Avoid passing content using the dangerouslySetInnerHTML prop.

Setting content using code can expose users to cross-site scripting (XSS) attacks

(lint/security/noDangerouslySetInnerHtml)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: Test
GitHub Check: Preview

🔇 Additional comments (5)

packages/react-router/src/Scripts.tsx (1)
61-65: Nonce propagation looks correct for script assets
Confirmed both manifest-derived and route-defined scripts now receive the SSR nonce via the shared Asset component.
packages/solid-router/src/ssr/renderRouterToString.tsx (1)
15-17: Solid renderToString now honors CSP nonce
Passing the router SSR nonce into renderToString aligns Solid SSR output with the CSP requirements.
packages/react-router/src/ssr/renderRouterToStream.tsx (1)
24-27: React streaming render paths wired for nonce
Both readable and pipeable streaming branches now forward the SSR nonce, covering all React 18 server APIs.
Also applies to: 48-55
packages/solid-router/src/ssr/renderRouterToStream.tsx (1)
21-23: Solid renderToStream properly forwards nonce
The TransformStream pipeline now carries the nonce through Solid’s streaming renderer as expected.
packages/react-router/src/HeadContent.tsx (1)
176-181: Head assets now receive the router nonce
Hooking router.options.ssr?.nonce into each Asset keeps head tags CSP-compliant after hydration.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2025-09-28T23:09:05Z

View your CI Pipeline Execution ↗ for commit cb01ecd

Command	Status	Duration	Result
`nx affected --targets=test:eslint,test:unit,tes...`	✅ Succeeded	7m 42s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	1m 6s	View ↗

☁️ Nx Cloud last updated this comment at 2025-09-28 23:17:35 UTC

pkg-pr-new · 2025-09-28T23:11:31Z

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@5287

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@5287

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@5287

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@5287

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@5287

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@5287

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@5287

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@5287

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@5287

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@5287

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@5287

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@5287

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@5287

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@5287

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@5287

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@5287

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@5287

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@5287

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@5287

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@5287

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@5287

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@5287

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@5287

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@5287

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@5287

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@5287

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@5287

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@5287

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@5287

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@5287

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@5287

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@5287

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@5287

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@5287

commit: cb01ecd

fix: nonce support
cb01ecd

github-actionsBot added package: react-router package: solid-router labels Sep 28, 2025

schiller-manuel merged commit a255e9d into mainSep 28, 2025
6 checks passed

schiller-manuel deleted the nonce-support branch September 28, 2025 23:24

This was referenced Oct 3, 2025
fix: remove test type #5358
Merged
feat(react-start): allow customizing react identifierPrefix#5418
Closed

coderabbitaiBot mentioned this pull request Oct 17, 2025
fix: nonce #5522
Merged

coderabbitaiBot mentioned this pull request Nov 27, 2025
fix: add whitespace when using nonce #5981
Merged

coderabbitaiBot mentioned this pull request Jan 11, 2026
fix: make nonce accessible in headers #6359
Merged

coderabbitaiBot mentioned this pull request Aug 2, 2026
feat(plan): add harness handoff and tailnet sharing 0xzapata/agent-native#1
Merged

Navigation Menu

Uh oh!

Uh oh!

fix: nonce support - #5287

fix: nonce support#5287
schiller-manuel merged 1 commit into
mainfrom
nonce-support

schiller-manuel commented Sep 28, 2025•
edited by coderabbitai Bot
Loading

Uh oh!

coderabbitaiBot commented Sep 28, 2025•
edited
Loading

Uh oh!

nx-cloudBot commented Sep 28, 2025•
edited
Loading

Uh oh!

pkg-pr-newBot commented Sep 28, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Uh oh!

Conversation

schiller-manuel commented Sep 28, 2025• edited by coderabbitai BotLoading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitaiBot commented Sep 28, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Poem

Pre-merge checks and finishing touches

Uh oh!

nx-cloudBot commented Sep 28, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-newBot commented Sep 28, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

schiller-manuel commented Sep 28, 2025•
edited by coderabbitai Bot
Loading

coderabbitaiBot commented Sep 28, 2025•
edited
Loading

nx-cloudBot commented Sep 28, 2025•
edited
Loading