## Contents - Content Security Policy (nonce + strict-dynamic + Trusted Types) - Next.js — per-request nonce via middleware - Trusted Types policy (kills DOM-XSS) - Roll it out safely with Report-Only first - SPA (React/Vue) without a server middleware ## Content Security Policy (nonce + strict-dynamic + Trusted Types) A static allowlist CSP (`script-src 'self' https://cdn...`) is bypassable: any script-gadget or open redirect on an allowlisted host re-enables XSS, and `'unsafe-inline'` defeats the whole header. The modern, Google-recommended CSP is **nonce-based + `strict-dynamic`**: you nonce only your root scripts, and `strict-dynamic` propagates trust to scripts they load, so you can drop host allowlists entirely. Pair it with **Trusted Types** to kill DOM-XSS sinks. Key rules: - A fresh, ≥128-bit nonce **per response** (never reuse across requests — a static nonce is no better than `'unsafe-inline'`). - `'strict-dynamic'` makes browsers **ignore** `'self'` and host allowlists for scripts, so old browsers fall back to them; keep `https:` as a fallback only. - `'unsafe-inline'` is intentionally listed AFTER the nonce: CSP3 browsers ignore it when a nonce is present, CSP1/2 browsers honor it (graceful degradation). - `require-trusted-types-for 'script'` forces all DOM sink writes (`innerHTML`, `script.src`, `eval`) through a vetted `TrustedTypePolicy`. ### Next.js — per-request nonce via middleware ```typescript // middleware.ts — runs on every request; injects a unique nonce + CSP header. import { NextRequest, NextResponse } from 'next/server'; export function middleware(req: NextRequest) { const nonce = Buffer.from(crypto.randomUUID()).toString('base64'); const csp = [ `default-src 'self'`, // 'strict-dynamic' + nonce is the real defense; 'unsafe-inline'/https: are // CSP1/2 fallbacks that modern browsers ignore when the nonce is present. `script-src 'nonce-${nonce}' 'strict-dynamic' 'unsafe-inline' https:`, `style-src 'self' 'nonce-${nonce}'`, // nonce styles too; avoid 'unsafe-inline' `img-src 'self' blob: data: https://images.example.com`, `font-src 'self' https://fonts.gstatic.com`, `connect-src 'self' https://api.example.com wss://ws.example.com`, `object-src 'none'`, // kill / plugin XSS `frame-ancestors 'none'`, `form-action 'self'`, `base-uri 'self'`, // stop tag nonce-stripping `require-trusted-types-for 'script'`, // DOM-XSS sink enforcement `trusted-types default dompurify`, // policy names allowed to exist `upgrade-insecure-requests`, // Send violations somewhere you can watch (Reporting API): `report-to csp-endpoint`, ].join('; '); // Pass the nonce to the app via a request header so Server Components can read it. const requestHeaders = new Headers(req.headers); requestHeaders.set('x-nonce', nonce); const res = NextResponse.next({ request: { headers: requestHeaders } }); res.headers.set('Content-Security-Policy', csp); res.headers.set('X-Content-Type-Options', 'nosniff'); res.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin'); res.headers.set('Permissions-Policy', 'camera=(), microphone=(), geolocation=()'); // Reporting API endpoint (replaces the deprecated report-uri directive): res.headers.set( 'Reporting-Endpoints', 'csp-endpoint="https://example.com/api/csp-report"' ); return res; } export const config = { matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'] }; ``` ```tsx // app/layout.tsx — read the nonce and stamp it onto your scripts. import { headers } from 'next/headers'; import Script from 'next/script'; export default async function RootLayout({ children }: { children: React.ReactNode }) { const nonce = (await headers()).get('x-nonce') ?? ''; return ( {children} {/* Next.js auto-propagates the nonce to its own bootstrap scripts; pass it to any third-party