安全

问题：用户输入被当作代码执行

攻击者输入：<script>document.cookie</script>
服务器原样返回 → 浏览器执行脚本 → 窃取 Cookie

解决：输出转义 + CSP + Trusted Types（三层防御）

输出转义：< → &lt;  浏览器只显示文本，不执行
CSP：限制脚本来源，即使注入也无法加载外部恶意脚本
Trusted Types：innerHTML 只接受安全类型，不接受原始字符串

┌───────────────────────────────────────┐
│  用户登录 bank.com，浏览器保存 Cookie  │  ← 正常登录
└─────────────────┬─────────────────────┘
                  │ 用户访问恶意页面
                  ▼
┌───────────────────────────────────────┐
│  恶意页面：<img src="bank.com/transfer  │  ← 自动发起请求
│    ?to=hacker&amount=10000">           │
└─────────────────┬─────────────────────┘
                  │ 浏览器自动带上 bank.com 的 Cookie
                  ▼
┌───────────────────────────────────────┐
│  bank.com 收到请求，Cookie 有效         │  ← 服务器无法区分
│  执行转账 → 资金被盗                    │
└───────────────────────────────────────┘

// 防御方案 1：SameSite Cookie（最有效）
// Strict：跨站请求一律不发送
// Lax：同站始终发送；跨站仅顶层导航的安全方法（如 GET）发送，POST 不发（Chrome 默认值）
// None：始终发送（必须配合 Secure）
Set-Cookie: token=xxx; SameSite=Lax; Secure; HttpOnly

// 防御方案 2：CSRF Token
// 服务器生成随机 token，前端每次请求带上
const token = document.querySelector('meta[name="csrf-token"]').content;
await fetch("/api/transfer", {
  headers: { "X-CSRF-Token": token },
});

// 防御方案 3：验证 Origin/Referer（服务端检查请求头是否在白名单）

Set-Cookie: session=xxx; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=3600

// CSP 的核心检查逻辑
bool ContentSecurityPolicy::AllowFromSource(
    CSPDirectiveName directive,
    const KURL& url,
    const RedirectStatus& redirect_status) {
  // 遍历所有 CSP 策略（可能有多条 CSP 头）
  for (const auto& policy : policies_) {
    // 检查该策略的对应指令是否允许该来源
    if (!policy->AllowFromSource(directive, url, redirect_status))
      return false;  // 任一策略拒绝就拒绝
  }
  return true;
}

// CSP 指令的检查顺序：
// 1. script-src：检查脚本来源
// 2. style-src：检查样式来源
// 3. img-src：检查图片来源
// 4. connect-src：检查 fetch/XHR/WebSocket 来源
// 5. default-src：以上指令的默认值

// Trusted Types 在 DOM 操作前检查类型
// innerHTML 赋值时，如果值不是 TrustedHTML 类型，抛 TypeError

// 使用方式：
// 1. 创建 Trusted Types 策略
// const policy = trustedTypes.createPolicy('myPolicy', {
//   createHTML: (input) => sanitize(input)  // 必须经过清理
// });
// 2. 使用策略创建安全类型
// element.innerHTML = policy.createHTML(userInput);
// 3. 直接赋值原始字符串会报错
// element.innerHTML = '<script>alert(1)</script>';  // TypeError!