核心价值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 中实现简单且高效，能显著提升前端供应链与运行时安全。
发表评论 取消回复