Next.js 15 Trusted Types 与 DOM XSS 防护治理实践

正文Trusted Types 通过浏览器原生的类型约束限制脚本相关的危险 DOM API（如 `innerHTML`）的使用，仅允许白名单策略生成的受信内容。本文在 Next.js 15 中设置 CSP 与客户端策略，构建更强的 DOM XSS 防线。一、中间件设置 CSP 与策略白名单import { NextResponse } from 'next/server' export function middleware() { const res = NextResponse.next() // 要求所有脚本相关注入必须使用 Trusted Types；允许策略名 app res.headers.set('Content-Security-Policy', "require-trusted-types-for 'script'; trusted-types app") return res } 二、客户端创建策略并安全注入'use client' import { useEffect } from 'react' export default function TrustedBoot() { useEffect(() => { const tt = (window as any).trustedTypes if (tt && typeof tt.createPolicy === 'function') { const policy = tt.createPolicy('app', { createHTML: (s: string) => s, createScript: (s: string) => s }) const el = document.getElementById('inject-safe') if (el) { // 仅允许通过策略生成的 TrustedHTML 进行注入 ;(el as any).innerHTML = policy.createHTML('<strong>安全注入</strong>') as any } } }, []) return null } 三、治理要点兼容性：不支持 Trusted Types 的浏览器将忽略相关 CSP 指令；保持渐进增强。白名单策略：按需定义策略名并限定创建函数，不允许通配策略滥用；审计策略使用点。与 CSP 协同：建议同时设置 `script-src` 基于 `nonce`/`strict-dynamic` 的严格模式，进一步降低内联脚本风险。