核心价值SRI 保证第三方资源未被篡改；CSP 控制脚本/样式加载源并允许受控的内联。二者协同可显著降低资源投毒与 XSS 风险。SRI 示例<link rel="stylesheet" href="https://cdn.example.com/app.css" integrity="sha256-BASE64_HASH" crossorigin="anonymous"> <script src="https://cdn.example.com/app.js" integrity="sha256-BASE64_HASH" crossorigin="anonymous"></script> Next.js 15 nonce 传递与 CSP 注入// middleware.ts import { NextResponse, NextRequest } from 'next/server' export function middleware(req: NextRequest) { const nonce = crypto.randomUUID().replace(/-/g, '') const res = NextResponse.next() res.headers.set('x-nonce', nonce) const csp = [ `default-src 'self'`, `script-src 'self' 'nonce-${nonce}' https://cdn.example.com`, `style-src 'self' 'nonce-${nonce}' https://cdn.example.com`, `img-src 'self' https: data:`, ].join('; ') res.headers.set('content-security-policy', csp) return res } export const config = { matcher: ['/((?!_next/static|_next/image).*)'] } // app/layout.tsx (RSC) import { headers } from 'next/headers' export default function RootLayout({ children }: { children: React.ReactNode }) { const nonce = headers().get('x-nonce') || '' return ( <html> <head /> <body> {children} <script nonce={nonce} dangerouslySetInnerHTML={{ __html: `window.__BOOTSTRAP__=true` }} /> </body> </html> ) } 治理建议对第三方静态资源始终使用 SRI 与 `crossorigin="anonymous"`；CDN 更新需同步生成新哈希。CSP 中仅允许可信源；对内联脚本/样式使用 nonce 或哈希，避免 `unsafe-inline`。与 `Trusted Types` 协同防止 DOM XSS 注入；对动态构造的脚本/样式进行白名单控制。结论SRI 保证资源完整性，CSP 保持执行面可控。两者在 Next.js 15 中实现简单且高效，能显著提升前端供应链与运行时安全。
投稿
微信公众账号
微信扫一扫加关注
评论 返回
顶部
发表评论 取消回复