Skip to content

fix: nonce support #5287

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Sep 28, 2025
Merged

fix: nonce support #5287

merged 1 commit into from
Sep 28, 2025

Conversation

schiller-manuel
Copy link
Contributor

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

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 coderabbitai
Copy link
Contributor

coderabbitai bot commented Sep 28, 2025 •
edited
Loading

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=...>
Loading 
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
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

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 Nx Cloud
Copy link

nx-cloud bot commented Sep 28, 2025 •
edited
Loading

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 pkg.pr.new
Copy link

pkg-pr-new bot commented Sep 28, 2025

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

@schiller-manuel schiller-manuel merged commit a255e9d into main Sep 28, 2025
6 checks passed
@schiller-manuel schiller-manuel deleted the nonce-support branch September 28, 2025 23:24
This was referenced Oct 3, 2025
Merged
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

package: react-router package: solid-router

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@schiller-manuel