Web 安全加固：CSP、HSTS、安全响应头与 XSS 防护实战

HTTP/2 200
content-security-policy: default-src 'self'; script-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'
strict-transport-security: max-age=31536000; includeSubDomains; preload
x-frame-options: DENY
x-content-type-options: nosniff
referrer-policy: strict-origin-when-cross-origin
permissions-policy: camera=(), microphone=(), geolocation=()

第一步（开发期，只报告不拦截）：
content-security-policy-report-only: default-src 'self'; script-src 'self'; report-uri /csp-report

第二步（观察报告，修正白名单）：
  在 report 里看哪些合法资源被拦 → 补进白名单

第三步（正式启用）：
content-security-policy: default-src 'self'; script-src 'self'; report-uri /csp-report

# 需要引入第三方脚本时的 CSP：
content-security-policy:
  default-src 'self';
  script-src 'self' https://cdn.example.com 'nonce-abc123';
  img-src 'self' data: https://img.example.com;
  style-src 'self' 'unsafe-inline';
  connect-src 'self' https://api.example.com;
  frame-ancestors 'none'

<!-- 配合 nonce：只放行带此 nonce 的内联脚本 -->
<script nonce="abc123">
  window.analytics = { enabled: true }
</script>

// 上报 CSP 违规到自建端点，便于持续观测
addEventListener('securitypolicyviolation', (e) => {
  fetch('/csp-report', {
    method: 'POST',
    body: JSON.stringify({
      blocked: e.blockedURI,
      directive: e.effectiveDirective,
      source: e.sourceFile,
      line: e.lineNumber,
    }),
  })
})

// 边缘层：HTTP 请求一律 301 跳 HTTPS，并带上 HSTS
export default {
  async fetch(request) {
    const url = new URL(request.url)
    if (url.protocol === 'http:') {
      url.protocol = 'https:'
      return Response.redirect(url.toString(), 301)
    }
    const response = await fetch(request)
    const h = new Headers(response.headers)
    h.set('Strict-Transport-Security', 'max-age=31536000; includeSubDomains')
    return new Response(response.body, { status: response.status, headers: h })
  },
}

# Cookie 安全属性（从响应头看）
set-cookie: session=abc; HttpOnly; Secure; SameSite=Lax; Path=/

<!-- 正常加载：integrity 指定哈希 -->
<script
  src="https://cdn.example.com/sdk.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxRZ/2vM4V4wQ5R3+s+xv3YbQ"
  crossorigin="anonymous"
></script>

# 生成 SRI 哈希（sha384 是常见选择）
openssl dgst -sha384 -binary sdk.js | openssl base64 -A

# 或用 npm 工具
npx sri-toolbox sha384 ./sdk.js

# Cloudflare Transform Rules（Response Header Modification）
# 对所有响应统一注入安全头
# - 优先级高的规则先执行，可用表达式限定路径

// 或用 Worker 统一注入（可编程、更灵活）
export default {
  async fetch(request) {
    const response = await fetch(request)
    const headers = new Headers(response.headers)
    const csp = [
      "default-src 'self'",
      "script-src 'self'",
      "style-src 'self' 'unsafe-inline'",
      "img-src 'self' data:",
      "connect-src 'self'",
      "frame-ancestors 'none'",
    ].join('; ')
    headers.set('Content-Security-Policy', csp)
    headers.set('X-Frame-Options', 'DENY')
    headers.set('X-Content-Type-Options', 'nosniff')
    headers.set('Referrer-Policy', 'strict-origin-when-cross-origin')
    return new Response(response.body, { status: response.status, headers })
  },
}

// next.config.js
const securityHeaders = [
  { key: 'Content-Security-Policy', value: "default-src 'self'; script-src 'self'" },
  { key: 'Strict-Transport-Security', value: 'max-age=31536000; includeSubDomains' },
  { key: 'X-Frame-Options', value: 'DENY' },
  { key: 'X-Content-Type-Options', value: 'nosniff' },
  { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
]

module.exports = {
  async headers() {
    return [{ source: '/(.*)', headers: securityHeaders }]
  },
}