概览严格的 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安全：阻断内联脚本与不受信的注入路径；通过受信策略白名单加载脚本
投稿
微信公众账号
微信扫一扫加关注
评论 返回
顶部
发表评论 取消回复