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