Web 安全：XSS 与 CSRF 防护

XSS：跨站脚本攻击

XSS 攻击通过在页面中注入恶意脚本，在受害者浏览器中执行攻击者的代码。

存储型 XSS 是最危险的：攻击者将恶意脚本存入数据库，所有访问该内容的用户都会受到攻击。

防护措施

// React 默认转义 JSX 中的字符串 ✅
<div>{userContent}</div>

// dangerouslySetInnerHTML 需要先消毒 ⚠️
import DOMPurify from "dompurify";
<div dangerouslySetInnerHTML={{
  __html: DOMPurify.sanitize(userHtml)
}} />

设置严格的 CSP（Content Security Policy）：

Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-{random}'

CSRF：跨站请求伪造

CSRF 利用用户已登录的状态，诱骗其在不知情的情况下发起恶意请求。

防护措施

1. SameSite Cookie（现代浏览器首选方案）：

cookies().set("session", token, {
  httpOnly: true,
  secure: true,
  sameSite: "lax",  // 或 "strict"
  path: "/",
});

2. CSRF Token（兼容旧浏览器）：在表单中加入服务端生成的随机 token，提交时验证。

3. 验证 Origin/Referer Header：Server Action 默认验证请求来源。

Next.js 安全配置

// next.config.ts
const nextConfig = {
  headers: async () => [{
    source: "/(.*)",
    headers: [
      { key: "X-Content-Type-Options", value: "nosniff" },
      { key: "X-Frame-Options", value: "DENY" },
      { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
    ],
  }],
};

总结

安全不是功能，而是每个功能都必须具备的属性。Server Actions 天然防 CSRF，React 天然防 XSS，但这些保护都有边界——理解攻击原理，才能在边界处做好防护。