TanStack · hybrist · Jan 27, 2026
diff --git a/e2e/react-start/csp-trusted-types/.gitignore b/e2e/react-start/csp-trusted-types/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+.output
+dist
+*.txt
diff --git a/e2e/react-start/csp-trusted-types/package.json b/e2e/react-start/csp-trusted-types/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "tanstack-react-start-e2e-csp-trusted-types",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev --port 3000",
+    "dev:e2e": "vite dev",
+    "build": "vite build && tsc --noEmit",
+    "start": "pnpx srvx --prod -s ../client dist/server/server.js",
+    "test:e2e": "rm -rf port*.txt; playwright test --project=chromium"
+  },
+  "dependencies": {
+    "@tanstack/react-router": "workspace:^",
+    "@tanstack/react-start": "workspace:^",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vite": "^7.3.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.50.1",
+    "@tanstack/router-e2e-utils": "workspace:^",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "srvx": "^0.10.1",
+    "typescript": "^5.7.2"
+  }
+}
diff --git a/e2e/react-start/csp-trusted-types/playwright.config.ts b/e2e/react-start/csp-trusted-types/playwright.config.ts
@@ -0,0 +1,35 @@
+import { defineConfig, devices } from '@playwright/test'
+import { getTestServerPort } from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = await getTestServerPort(packageJson.name)
+const baseURL = `http://localhost:${PORT}`
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  workers: 1,
+
+  reporter: [['line']],
+
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL,
+  },
+
+  webServer: {
+    command: `VITE_SERVER_PORT=${PORT} pnpm build && PORT=${PORT} VITE_SERVER_PORT=${PORT} pnpm start`,
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+})
diff --git a/e2e/react-start/csp-trusted-types/public/external.css b/e2e/react-start/csp-trusted-types/public/external.css
@@ -0,0 +1,4 @@
+.external-styled {
+  color: blue;
+  font-weight: bold;
+}
diff --git a/e2e/react-start/csp-trusted-types/public/external.js b/e2e/react-start/csp-trusted-types/public/external.js
@@ -0,0 +1,3 @@
+// This script sets a window global when loaded
+// Using a global avoids race conditions with React and DOM ownership issues
+window.__EXTERNAL_SCRIPT_LOADED__ = true
diff --git a/e2e/react-start/csp-trusted-types/src/routeTree.gen.ts b/e2e/react-start/csp-trusted-types/src/routeTree.gen.ts
@@ -0,0 +1,86 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as OtherRouteImport } from './routes/other'
+import { Route as IndexRouteImport } from './routes/index'
+
+const OtherRoute = OtherRouteImport.update({
+  id: '/other',
+  path: '/other',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/other': typeof OtherRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/other': typeof OtherRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/other': typeof OtherRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/other'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/other'
+  id: '__root__' | '/' | '/other'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  OtherRoute: typeof OtherRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/other': {
+      id: '/other'
+      path: '/other'
+      fullPath: '/other'
+      preLoaderRoute: typeof OtherRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  OtherRoute: OtherRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}
diff --git a/e2e/react-start/csp-trusted-types/src/router.tsx b/e2e/react-start/csp-trusted-types/src/router.tsx
@@ -0,0 +1,20 @@
+import { createRouter } from '@tanstack/react-router'
+import { createIsomorphicFn } from '@tanstack/react-start'
+import { routeTree } from './routeTree.gen'
+
+const getSSROptions = createIsomorphicFn().server(() => {
+  const array = new Uint8Array(16)
+  crypto.getRandomValues(array)
+  const nonce = Array.from(array, (b) => b.toString(16).padStart(2, '0')).join(
+    '',
+  )
+  return { nonce }
+})
+
+export function getRouter() {
+  return createRouter({
+    routeTree,
+    scrollRestoration: true,
+    ssr: getSSROptions(),
+  })
+}
diff --git a/e2e/react-start/csp-trusted-types/src/routes/__root.tsx b/e2e/react-start/csp-trusted-types/src/routes/__root.tsx
@@ -0,0 +1,54 @@
+import {
+  HeadContent,
+  Link,
+  Outlet,
+  Scripts,
+  createRootRoute,
+} from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+  headers: ({ ssr }) => {
+    const nonce = ssr?.nonce
+    if (!nonce) return
+    return {
+      'Content-Security-Policy': [
+        // "default-src 'self'",
+        // `script-src 'self' 'nonce-${nonce}'`,
+        // "style-src 'self' 'unsafe-inline'",
+        "require-trusted-types-for 'script'",
+      ].join('; '),
+    }
+  },
+  head: () => ({
+    meta: [
+      { charSet: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { title: 'CSP Trusted Types Test' },
+    ],
+    links: [{ rel: 'stylesheet', href: '/external.css' }],
+    scripts: [{ src: '/external.js' }],
+    styles: [
+      { children: '.inline-styled { color: green; font-weight: bold; }' },
+    ],
+  }),
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <html>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <div style={{ display: 'flex', gap: '1rem', padding: '1rem' }}>
+          <Link to="/">Home</Link>
+          <Link to="/other">Other</Link>
+        </div>
+        <hr />
+        <Outlet />
+        <Scripts />
+      </body>
+    </html>
+  )
+}
diff --git a/e2e/react-start/csp-trusted-types/src/routes/index.tsx b/e2e/react-start/csp-trusted-types/src/routes/index.tsx
@@ -0,0 +1,18 @@
+import { useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  component: Home,
+})
+
+function Home() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div>
+      <button data-testid="counter-btn" onClick={() => setCount((c) => c + 1)}>
+        Count: <span data-testid="counter-value">{count}</span>
+      </button>
+    </div>
+  )
+}
diff --git a/e2e/react-start/csp-trusted-types/src/routes/other.tsx b/e2e/react-start/csp-trusted-types/src/routes/other.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/other')({
+  head: () => ({
+    meta: [{ title: 'Other Page' }],
+    scripts: [
+      {
+        children: `window.__OTHER_PAGE_LOADED__ = Date.now();`,
+      },
+    ],
+  }),
+  component: OtherComponent,
+})
+
+function OtherComponent() {
+  return (
+    <div>
+      <h2 data-testid="other-heading">Other Page</h2>
+      <p>This page has its own scripts.</p>
+    </div>
+  )
+}
diff --git a/e2e/react-start/csp-trusted-types/tests/trusted-types.spec.ts b/e2e/react-start/csp-trusted-types/tests/trusted-types.spec.ts
@@ -0,0 +1,46 @@
+import { expect } from '@playwright/test'
+import { test } from '@tanstack/router-e2e-utils'
+
+test('CSP header is set with Trusted Types enforcement', async ({ page }) => {
+  const response = await page.goto('/')
+  const csp = response?.headers()['content-security-policy']
+  expect(csp).toContain("require-trusted-types-for 'script'")
+})
+
+test('Hydration works with Trusted Types enabled', async ({ page }) => {
+  await page.goto('/')
+  await expect(page.getByTestId('counter-value')).toContainText('0')
+
+  // Verify hydration by clicking counter
+  await page.getByTestId('counter-btn').click()
+  await expect(page.getByTestId('counter-value')).toContainText('1')
+})
+
+test('Client-side navigation works', async ({ page }) => {
+  await page.goto('/')
+  await expect(page.getByTestId('csp-heading')).toBeVisible()
+
+  const violations: Array<string> = []
+  const logViolation = (text: string) => {
+    const lowerText = text.toLowerCase()
+    if (
+      lowerText.includes('trusted type') ||
+      lowerText.includes('content security policy') ||
+      lowerText.includes('trustedscript')
+    ) {
+      violations.push(text)
+    }
+  }
+
+  page.on('console', (msg) => logViolation(msg.text()))
+  page.on('pageerror', (err) => logViolation(err.message))
+
+  await page.getByRole('link', { name: 'Other' }).click()
+  await expect(page.getByTestId('other-heading')).toBeVisible()
+
+  // Check that the script on the other page actually executed
+  const scriptExecuted = await page.evaluate(
+    () => (window as any).__OTHER_PAGE_LOADED__,
+  )
+  expect(typeof scriptExecuted).toBe('number')
+})
diff --git a/e2e/react-start/csp-trusted-types/tsconfig.json b/e2e/react-start/csp-trusted-types/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "target": "ES2022",
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./src/*"]
+    },
+    "noEmit": true
+  }
+}
diff --git a/e2e/react-start/csp-trusted-types/vite.config.ts b/e2e/react-start/csp-trusted-types/vite.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  plugins: [tanstackStart()],
+})