概览严格的 CSP 可有效阻断非受信脚本，Trusted Types 能限制危险的字符串到脚本/HTML 的赋值路径。在 Next.js 15 App Router 下，结合 nonce 与策略可实现细粒度的前端脚本治理。设置安全头next.config.tsconst securityHeaders = [
{
key: 'Content-Security-Policy',
value: [
"default-src 'self'",
"script-src 'self' 'nonce-__nonce__'",
"style-src 'self' 'unsafe-inline'",
"img-src 'self' data:",
"connect-src 'self'",
"require-trusted-types-for 'script'",
"trusted-types app default"
].join('; '),
},
{ key: 'X-Content-Type-Options', value: 'nosniff' },
{ key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
{ key: 'Permissions-Policy', value: 'geolocation=(), microphone=()' },
]
export default {
async headers() {
return [
{
source: '/(.*)',
headers: securityHeaders,
},
]
},
}
注入 nonce 与策略app/layout.tsxexport default function RootLayout({ children }: { children: React.ReactNode }) {
const nonce = crypto.randomUUID()
return (
<html>
<head>
<meta httpEquiv="Content-Security-Policy" content={`script-src 'self' 'nonce-${nonce}'; require-trusted-types-for 'script'; trusted-types app default`} />
<script nonce={nonce} dangerouslySetInnerHTML={{ __html: `
(function(){
if (window.trustedTypes && !trustedTypes.getPolicy('app')) {
trustedTypes.createPolicy('app', {
createScriptURL: (s) => s,
createHTML: (s) => s
});
}
})();
` }} />
</head>
<body>{children}</body>
</html>
)
}
客户端加载治理'use client'
// 仅通过受信策略生成 URL/HTML
const policy = (window as any).trustedTypes?.getPolicy('app')
const url = policy?.createScriptURL('/trusted.js') ?? '/trusted.js'
const s = document.createElement('script')
;(s as any).src = url
document.head.appendChild(s)
验证与指标浏览器：Chrome 120+（Trusted Types）、现代浏览器均支持 CSP；Safari/Firefox 对 Trusted Types 支持有限时仅启用 CSPNext.js：15.0+；Node.js：20.x安全：阻断内联脚本与不受信的注入路径；通过受信策略白名单加载脚本
发表评论 取消回复