fix: nonce support (#5287)

Author: schiller-manuel

packages/react-router/src/Asset.tsx

@@ -12,7 +12,8 @@ export function Asset({
   tag,
   attrs,
   children,
-}: RouterManagedTag): React.ReactElement | null {
+  nonce,
+}: RouterManagedTag & { nonce?: string }): React.ReactElement | null {
   switch (tag) {
     case 'title':
       return (
@@ -23,16 +24,21 @@ export function Asset({
     case 'meta':
       return <meta {...attrs} suppressHydrationWarning />
     case 'link':
-      return <link {...attrs} suppressHydrationWarning />
+      return <link {...attrs} nonce={nonce} suppressHydrationWarning />
     case 'style':
       return (
         <style
           {...attrs}
           dangerouslySetInnerHTML={{ __html: children as string }}
+          nonce={nonce}
         />
       )
     case 'script':
-      return <Script attrs={attrs}>{children}</Script>
+      return (
+        <Script attrs={attrs} nonce={nonce}>
+          {children}
+        </Script>
+      )
     default:
       return null
   }
@@ -41,9 +47,11 @@ export function Asset({
 function Script({
   attrs,
   children,
+  nonce,
 }: {
   attrs?: ScriptAttrs
   children?: string
+  nonce?: string
 }) {
   const router = useRouter()
 
@@ -146,7 +154,7 @@ function Script({
   }
 
   if (attrs?.src && typeof attrs.src === 'string') {
-    return <script {...attrs} suppressHydrationWarning />
+    return <script {...attrs} suppressHydrationWarning nonce={nonce} />
   }
 
   if (typeof children === 'string') {
@@ -155,6 +163,7 @@ function Script({
         {...attrs}
         dangerouslySetInnerHTML={{ __html: children }}
         suppressHydrationWarning
+        nonce={nonce}
       />
     )
   }

packages/react-router/src/HeadContent.tsx

@@ -174,8 +174,10 @@ export const useTags = () => {
  */
 export function HeadContent() {
   const tags = useTags()
+  const router = useRouter()
+  const nonce = router.options.ssr?.nonce
   return tags.map((tag) => (
-    <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} />
+    <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />
   ))
 }
 

packages/react-router/src/Scripts.tsx

@@ -58,7 +58,11 @@ export const Scripts = () => {
   return (
     <>
       {allScripts.map((asset, i) => (
-        <Asset {...asset} key={`tsr-scripts-${asset.tag}-${i}`} />
+        <Asset
+          {...asset}
+          key={`tsr-scripts-${asset.tag}-${i}`}
+          nonce={router.options.ssr?.nonce}
+        />
       ))}
     </>
   )

packages/react-router/src/ssr/renderRouterToStream.tsx

@@ -23,6 +23,7 @@ export const renderRouterToStream = async ({
   if (typeof ReactDOMServer.renderToReadableStream === 'function') {
     const stream = await ReactDOMServer.renderToReadableStream(children, {
       signal: request.signal,
+      nonce: router.options.ssr?.nonce,
     })
 
     if (isbot(request.headers.get('User-Agent'))) {
@@ -44,6 +45,7 @@ export const renderRouterToStream = async ({
 
     try {
       const pipeable = ReactDOMServer.renderToPipeableStream(children, {
+        nonce: router.options.ssr?.nonce,
         ...(isbot(request.headers.get('User-Agent'))
           ? {
               onAllReady() {

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

@@ -18,7 +18,9 @@ export const renderRouterToStream = async ({
 }) => {
   const { writable, readable } = new TransformStream()
 
-  const stream = Solid.renderToStream(children)
+  const stream = Solid.renderToStream(children, {
+    nonce: router.options.ssr?.nonce,
+  })
 
   if (isbot(request.headers.get('User-Agent'))) {
     await stream

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

@@ -12,7 +12,9 @@ export const renderRouterToString = async ({
   children: () => JSXElement
 }) => {
   try {
-    let html = Solid.renderToString(children)
+    let html = Solid.renderToString(children, {
+      nonce: router.options.ssr?.nonce,
+    })
     router.serverSsr!.setRenderFinished()
     const injectedHtml = await Promise.all(router.serverSsr!.injectedHtml).then(
       (htmls) => htmls.join(''),