Vite 前端安全加固：CSP、依赖供应链与构建产物安全

攻击面 1：依赖供应链（npm 投毒、恶意包）
攻击面 2：构建脚本（postinstall 执行任意代码）
攻击面 3：产物（源码泄漏、API key、内联注入）
攻击面 4：运行时（XSS、CSRF、点击劫持）← CSP 主要防护

安全顺序：供应链锁 → 构建治理 → CSP 兜底 → 运行时校验

Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-aBc123'; style-src 'self'; img-src 'self' data:; connect-src 'self' https://api.example.com; object-src 'none'; base-uri 'self'

<!-- nonce 方案：服务器为每个响应生成随机 nonce -->
<script nonce="aBc123">
  // 只有带正确 nonce 的内联脚本才被允许
</script>

<!-- hash 方案：把脚本内容的 sha256 白名单化 -->
Content-Security-Policy: script-src 'sha256-<BASE64_HASH>'

nonce 注意：
✓ 每次响应重新生成（不可复用）
✓ 只加在「信任的」内联脚本上
✗ 绝不能通过脚本动态设置 CSP（会被绕过）

方式 A：静态响应头（CDN/网关/nginx 配置）
    └─ 适合：构建产物不变的纯 SPA

方式 B：HTML 注入（Vite 插件 / SSR 生成时）
    └─ 适合：需要 nonce、需要按请求动态生成

// 方式 B 示例：Vite 插件为 html 注入 CSP meta
export function cspPlugin(policy: string): Plugin {
  return {
    name: "inject-csp",
    transformIndexHtml(html) {
      return {
        html,
        tags: [
          { tag: "meta", attrs: { "http-equiv": "Content-Security-Policy", content: policy }, injectTo: "head-prepend" },
        ],
      };
    },
  };
}

// vite.config.ts
plugins: [
  cspPlugin([
    "default-src 'self'",
    "script-src 'self' 'nonce-__NONCE__'",
    "style-src 'self' 'unsafe-inline'",   // CSS 常需 inline（style 属性）
    "connect-src 'self' https://api.example.com",
  ].join("; ")),
],

开发时常见「CSP 冲突」：
- HMR WebSocket 被 connect-src 拦 → 需加 ws://localhost:*
- @vite/client 内联脚本被 script-src 拦 → dev 放宽或加 nonce
→ 用 Vite 插件按 mode 区分 policy 即可

# 1. 锁版本：commit lockfile，杜绝「下次装到不同版本」
#    pnpm-lock.yaml / package-lock.json / yarn.lock

# 2. 漏洞扫描
npm audit / pnpm audit

# 3. 许可证与来源检查
npm ls --all | grep "pinned"

# 4. CI 强制审计
CI 里把 audit 结果设为门禁（fix:true 时失败）

// 显式锁定传递依赖（防被替换）：
"overrides": {
  "lodash": "^4.17.21",     // 强制所有包用安全版本
  "tar": "6.2.1"
}

□ lockfile 进版本库、CI 用 frozen-lockfile 安装
□ 定期 pnpm audit，高危漏洞设修复时限
□ 关注 deprecation / abandoned 的包
□ 禁止直接依赖「月下载量个位数」的可疑包
□ postinstall 脚本审计（npm 允许包自带脚本执行）

// 只有 VITE_ 前缀的环境变量会进产物！
// 服务端密钥绝不进 import.meta.env（用 .env.server 或后端注入）
import.meta.env.VITE_PUBLIC_API   // ✅ 进产物
process.env.SERVER_SECRET          // ❌ 绝不可出现在前端

防 XSS 的层次：
1. 输入：验证 + 净化（不信任任何外部数据）
2. 输出：框架默认转义（React/Vue 默认安全）
3. 兜底：CSP 禁止执行未授权脚本
4. 保险：v-html / dangerouslySetInnerHTML 白名单化

// 需要渲染富文本时：净化 + CSP 双重保险
import DOMPurify from "dompurify";
const safe = DOMPurify.sanitize(userHtml);  // 剥掉 script/事件属性

安全流水线（示例）：
□ pnpm audit 高危=0（门禁）
□ 供应链扫描（Snyk/Dependabot）
□ 产物敏感信息扫描（grep 密钥/URL）
□ source map 是否泄漏（扫描 public .map）
□ CSP 策略语法校验 + violation 监控
□ 依赖更新 PR 自动触发安全评审

// package.json 脚本
"security:audit": "pnpm audit --audit-level=high",
"security:scan": "node scripts/scan-dist.mjs",
"ci": "pnpm security:audit && pnpm security:scan && pnpm build"