From 7adb20352515b9b86a75199375212b74b59d8da4 Mon Sep 17 00:00:00 2001
From: Manuel Schiller <manuel.schiller@caligano.de>
Date: Sat, 18 Oct 2025 00:57:31 +0200
Subject: [PATCH 1/2] fix: nonce

fixes #5511
---
 packages/react-router/src/Asset.tsx        | 11 ++---------
 packages/react-router/src/HeadContent.tsx  | 15 ++++++++++++++-
 packages/react-router/src/Scripts.tsx      | 12 +++++-------
 packages/router-core/src/ssr/ssr-client.ts |  7 +++++++
 packages/solid-router/src/HeadContent.tsx  | 18 +++++++++++++++++-
 packages/solid-router/src/Scripts.tsx      |  5 +++--
 6 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/packages/react-router/src/Asset.tsx b/packages/react-router/src/Asset.tsx
index c16c65ad45e..37347631cf4 100644
--- a/packages/react-router/src/Asset.tsx
+++ b/packages/react-router/src/Asset.tsx
@@ -34,11 +34,7 @@ export function Asset({
         />
       )
     case 'script':
-      return (
-        <Script attrs={attrs} nonce={nonce}>
-          {children}
-        </Script>
-      )
+      return <Script attrs={attrs}>{children}</Script>
     default:
       return null
   }
@@ -47,11 +43,9 @@ export function Asset({
 function Script({
   attrs,
   children,
-  nonce,
 }: {
   attrs?: ScriptAttrs
   children?: string
-  nonce?: string
 }) {
   const router = useRouter()
 
@@ -154,7 +148,7 @@ function Script({
   }
 
   if (attrs?.src && typeof attrs.src === 'string') {
-    return <script {...attrs} suppressHydrationWarning nonce={nonce} />
+    return <script {...attrs} suppressHydrationWarning />
   }
 
   if (typeof children === 'string') {
@@ -163,7 +157,6 @@ function Script({
         {...attrs}
         dangerouslySetInnerHTML={{ __html: children }}
         suppressHydrationWarning
-        nonce={nonce}
       />
     )
   }
diff --git a/packages/react-router/src/HeadContent.tsx b/packages/react-router/src/HeadContent.tsx
index 690e046bd7e..87dfe1a7174 100644
--- a/packages/react-router/src/HeadContent.tsx
+++ b/packages/react-router/src/HeadContent.tsx
@@ -6,7 +6,7 @@ import type { RouterManagedTag } from '@tanstack/router-core'
 
 export const useTags = () => {
   const router = useRouter()
-
+  const nonce = router.options.ssr?.nonce
   const routeMeta = useRouterState({
     select: (state) => {
       return state.matches.map((match) => match.meta!).filter(Boolean)
@@ -44,6 +44,7 @@ export const useTags = () => {
             tag: 'meta',
             attrs: {
               ...m,
+              nonce,
             },
           })
         }
@@ -54,6 +55,15 @@ export const useTags = () => {
       resultMeta.push(title)
     }
 
+    if (router.options.ssr?.nonce) {
+      resultMeta.push({
+        tag: 'meta',
+        attrs: {
+          property: 'csp-nonce',
+          content: router.options.ssr.nonce,
+        },
+      })
+    }
     resultMeta.reverse()
 
     return resultMeta
@@ -69,6 +79,7 @@ export const useTags = () => {
           tag: 'link',
           attrs: {
             ...link,
+            nonce,
           },
         })) satisfies Array<RouterManagedTag>
 
@@ -133,6 +144,7 @@ export const useTags = () => {
         tag: 'style',
         attrs,
         children,
+        nonce,
       })),
     structuralSharing: true as any,
   })
@@ -148,6 +160,7 @@ export const useTags = () => {
         tag: 'script',
         attrs: {
           ...script,
+          nonce,
         },
         children,
       })),
diff --git a/packages/react-router/src/Scripts.tsx b/packages/react-router/src/Scripts.tsx
index beb332cbd72..c79f4dfeeb3 100644
--- a/packages/react-router/src/Scripts.tsx
+++ b/packages/react-router/src/Scripts.tsx
@@ -5,7 +5,7 @@ import type { RouterManagedTag } from '@tanstack/router-core'
 
 export const Scripts = () => {
   const router = useRouter()
-
+  const nonce = router.options.ssr?.nonce
   const assetScripts = useRouterState({
     select: (state) => {
       const assetScripts: Array<RouterManagedTag> = []
@@ -23,8 +23,9 @@ export const Scripts = () => {
             .forEach((asset) => {
               assetScripts.push({
                 tag: 'script',
-                attrs: asset.attrs,
+                attrs: { ...asset.attrs, nonce },
                 children: asset.children,
+                nonce,
               } as any)
             }),
         )
@@ -46,6 +47,7 @@ export const Scripts = () => {
         attrs: {
           ...script,
           suppressHydrationWarning: true,
+          nonce,
         },
         children,
       })),
@@ -58,11 +60,7 @@ export const Scripts = () => {
   return (
     <>
       {allScripts.map((asset, i) => (
-        <Asset
-          {...asset}
-          key={`tsr-scripts-${asset.tag}-${i}`}
-          nonce={router.options.ssr?.nonce}
-        />
+        <Asset {...asset} key={`tsr-scripts-${asset.tag}-${i}`} />
       ))}
     </>
   )
diff --git a/packages/router-core/src/ssr/ssr-client.ts b/packages/router-core/src/ssr/ssr-client.ts
index cff2dc61bee..736fbeac6ca 100644
--- a/packages/router-core/src/ssr/ssr-client.ts
+++ b/packages/router-core/src/ssr/ssr-client.ts
@@ -86,6 +86,13 @@ export async function hydrate(router: AnyRouter): Promise<any> {
   router.ssr = {
     manifest,
   }
+  const meta = document.querySelector('meta[property="csp-nonce"]') as
+    | HTMLMetaElement
+    | undefined
+  const nonce = meta?.content
+  router.options.ssr = {
+    nonce,
+  }
 
   // Hydrate the router state
   const matches = router.matchRoutes(router.state.location)
diff --git a/packages/solid-router/src/HeadContent.tsx b/packages/solid-router/src/HeadContent.tsx
index 820473e3b31..e87d221e89d 100644
--- a/packages/solid-router/src/HeadContent.tsx
+++ b/packages/solid-router/src/HeadContent.tsx
@@ -7,7 +7,7 @@ import type { RouterManagedTag } from '@tanstack/router-core'
 
 export const useTags = () => {
   const router = useRouter()
-
+  const nonce = router.options.ssr?.nonce
   const routeMeta = useRouterState({
     select: (state) => {
       return state.matches.map((match) => match.meta!).filter(Boolean)
@@ -46,6 +46,7 @@ export const useTags = () => {
             tag: 'meta',
             attrs: {
               ...m,
+              nonce,
             },
           })
         }
@@ -56,6 +57,15 @@ export const useTags = () => {
       resultMeta.push(title)
     }
 
+    if (router.options.ssr?.nonce) {
+      resultMeta.push({
+        tag: 'meta',
+        attrs: {
+          property: 'csp-nonce',
+          content: router.options.ssr.nonce,
+        },
+      })
+    }
     resultMeta.reverse()
 
     return resultMeta
@@ -71,6 +81,7 @@ export const useTags = () => {
           tag: 'link',
           attrs: {
             ...link,
+            nonce,
           },
         })) satisfies Array<RouterManagedTag>
 
@@ -130,6 +141,7 @@ export const useTags = () => {
         tag: 'style',
         attrs: {
           ...style,
+          nonce,
         },
         children,
       })),
@@ -146,6 +158,7 @@ export const useTags = () => {
         tag: 'script',
         attrs: {
           ...script,
+          nonce,
         },
         children,
       })),
@@ -172,6 +185,9 @@ export const useTags = () => {
  */
 export function HeadContent() {
   const tags = useTags()
+  const router = useRouter()
+  const nonce = router.options.ssr?.nonce
+
   return (
     <MetaProvider>
       {tags().map((tag) => (
diff --git a/packages/solid-router/src/Scripts.tsx b/packages/solid-router/src/Scripts.tsx
index e3fdca99a43..798ae1adf37 100644
--- a/packages/solid-router/src/Scripts.tsx
+++ b/packages/solid-router/src/Scripts.tsx
@@ -5,7 +5,7 @@ import type { RouterManagedTag } from '@tanstack/router-core'
 
 export const Scripts = () => {
   const router = useRouter()
-
+  const nonce = router.options.ssr?.nonce
   const assetScripts = useRouterState({
     select: (state) => {
       const assetScripts: Array<RouterManagedTag> = []
@@ -23,7 +23,7 @@ export const Scripts = () => {
             .forEach((asset) => {
               assetScripts.push({
                 tag: 'script',
-                attrs: asset.attrs,
+                attrs: { ...asset.attrs, nonce },
                 children: asset.children,
               } as any)
             }),
@@ -44,6 +44,7 @@ export const Scripts = () => {
         tag: 'script',
         attrs: {
           ...script,
+          nonce,
         },
         children,
       })),

From ae3976a6baf2d653355fe52d6cbc6a786c0277f5 Mon Sep 17 00:00:00 2001
From: Manuel Schiller <manuel.schiller@caligano.de>
Date: Sat, 18 Oct 2025 01:09:38 +0200
Subject: [PATCH 2/2] fix review

---
 packages/react-router/src/HeadContent.tsx | 2 ++
 packages/react-router/src/Scripts.tsx     | 1 -
 packages/solid-router/src/HeadContent.tsx | 5 ++---
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-router/src/HeadContent.tsx b/packages/react-router/src/HeadContent.tsx
index 87dfe1a7174..c3ac2bbafea 100644
--- a/packages/react-router/src/HeadContent.tsx
+++ b/packages/react-router/src/HeadContent.tsx
@@ -99,6 +99,7 @@ export const useTags = () => {
               attrs: {
                 ...asset.attrs,
                 suppressHydrationWarning: true,
+                nonce,
               },
             }) satisfies RouterManagedTag,
         )
@@ -123,6 +124,7 @@ export const useTags = () => {
                 attrs: {
                   rel: 'modulepreload',
                   href: preload,
+                  nonce,
                 },
               })
             }),
diff --git a/packages/react-router/src/Scripts.tsx b/packages/react-router/src/Scripts.tsx
index c79f4dfeeb3..28c05bf2749 100644
--- a/packages/react-router/src/Scripts.tsx
+++ b/packages/react-router/src/Scripts.tsx
@@ -25,7 +25,6 @@ export const Scripts = () => {
                 tag: 'script',
                 attrs: { ...asset.attrs, nonce },
                 children: asset.children,
-                nonce,
               } as any)
             }),
         )
diff --git a/packages/solid-router/src/HeadContent.tsx b/packages/solid-router/src/HeadContent.tsx
index e87d221e89d..0292b52d120 100644
--- a/packages/solid-router/src/HeadContent.tsx
+++ b/packages/solid-router/src/HeadContent.tsx
@@ -98,7 +98,7 @@ export const useTags = () => {
           (asset) =>
             ({
               tag: 'link',
-              attrs: asset.attrs,
+              attrs: { ...asset.attrs, nonce },
             }) satisfies RouterManagedTag,
         )
 
@@ -121,6 +121,7 @@ export const useTags = () => {
                 attrs: {
                   rel: 'modulepreload',
                   href: preload,
+                  nonce,
                 },
               })
             }),
@@ -185,8 +186,6 @@ export const useTags = () => {
  */
 export function HeadContent() {
   const tags = useTags()
-  const router = useRouter()
-  const nonce = router.options.ssr?.nonce
 
   return (
     <MetaProvider>