"Next.js 15 安全响应头与 CSP/Trusted Types 集成实践：Middleware 与 Metadata 协同"

Next.js 15 安全响应头与 CSP/Trusted Types 集成实践概述统一设置 CSP/Trusted Types 与基础安全头，通过 Middleware 与 Metadata 协同输出，保障边缘与服务器端一致的安全策略。Middleware 统一安全头import { NextResponse } from 'next/server' import type { NextRequest } from 'next/server' export function middleware(req: NextRequest) { const res = NextResponse.next() res.headers.set('X-Frame-Options', 'SAMEORIGIN') res.headers.set('X-Content-Type-Options', 'nosniff') res.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin') res.headers.set('Cross-Origin-Opener-Policy', 'same-origin') res.headers.set('Cross-Origin-Embedder-Policy', 'require-corp') return res } export const config = { matcher: ['/((?!_next|static|api).*)'] } Metadata 输出 CSP 与 Trusted Typesimport type { Metadata } from 'next' export function generateMetadata(): Metadata { return { robots: { index: true, follow: true }, viewport: 'width=device-width, initial-scale=1', other: { 'Content-Security-Policy': "default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-__NONCE__'; object-src 'none'; base-uri 'self'; require-trusted-types-for 'script'; trusted-types app-policy;", 'Report-To': '{"group":"csp-endpoint","max_age":10800,"endpoints":[{"url":"https://report.example.com/csp"}]}' } } } Trusted Types 初始化<script nonce="__NONCE__"> window.trustedTypes?.createPolicy('app-policy', { createScriptURL: (url) => url.startsWith(location.origin) ? url : '' }) </script> 技术参数与验证浏览器：Chrome 120+；报告端点接收正常；COOP/COEP/CORP 生效；脚本注入风险降低。注意事项CSP 策略需与第三方资源白名单协同；逐步启用 Trusted Types 并提供回退；收集报告用于优化策略。---发布信息：已发布 · 技术验证 · 阅读 36 分钟 · CC BY-SA 4.0