Web安全实战：CSP与Nonce机制详解

1. 现代Web应用的安全必修课：CSP与Nonce机制解析

2017年GitHub遭遇的XSS攻击事件让整个技术圈意识到：即使是最严谨的开发团队，也难逃注入攻击的威胁。这正是为什么Content Security Policy（CSP）从可选变成了现代Web开发的标配。但现实情况是，超过60%的开发者只在响应头简单配置script-src 'self'就以为万事大吉——这恰恰错过了CSP最强大的防御武器：Nonce机制。

Nonce（Number Used Once）的工作原理其实很精妙：每次页面加载时，服务器生成一个随机Base64字符串，同时做两件事：1) 将其注入响应头的CSP规则（如script-src 'nonce-xxxx'）2) 给页面中每个合法的<script>标签添加nonce="xxxx"属性。浏览器会严格比对两者，任何脚本的nonce值与响应头不匹配时立即拦截执行。这种动态验证机制完美解决了传统CSP白名单的痛点——既不需要维护冗长的域名列表，又能彻底封杀内联脚本和外部注入。

2. Next.js的CSP实施方案深度剖析

2.1 基于中间件的自动化Nonce生成

Next.js 13+的App Router架构下，最佳实践是通过中间件统一处理Nonce。新建middleware.ts文件时，关键点在于保证Nonce的不可预测性：

typescript复制import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import crypto from 'crypto'

export function middleware(request: NextRequest) {
  const nonce = crypto.randomBytes(16).toString('base64')
  const cspHeader = `
    default-src 'self';
    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
    style-src 'self' 'nonce-${nonce}';
    img-src 'self' blob: data:;
    font-src 'self';
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
    block-all-mixed-content;
    upgrade-insecure-requests;
  `.replace(/\s{2,}/g, ' ').trim()

  const response = NextResponse.next()
  response.headers.set('Content-Security-Policy', cspHeader)
  response.headers.set('x-nonce', nonce) // 用于后续组件访问
  return response
}

关键细节：使用Node.js的cryp