前端安全进阶：XSS、CSP、SRI 与供应链安全

<!-- Vue：{{ }} 自动转义 HTML -->
<template>
  <!-- 用户输入 <script>alert(1)</script> -->
  <div>{{ userInput }}</div>
  <!-- 输出：&lt;script&gt;alert(1)&lt;/script&gt; — 安全！ -->

  <!-- ❌ 危险：v-html 绕过转义 -->
  <div v-html="userInput"></div>

  <!-- ✅ 必须用 v-html 时先净化 -->
  <div v-html="sanitizedHtml"></div>
</template>

<script setup>
import DOMPurify from 'dompurify';
const sanitizedHtml = DOMPurify.sanitize(userInput);
</script>

// React：{} 自动转义 JSX
function Profile({ bio }) {
  return (
    <div>
      {bio}  {/* 自动转义 — 安全 */}
      {/* <div dangerouslySetInnerHTML={{ __html: bio }} />  ← 危险！ */}
    </div>
  );
}

import DOMPurify from 'dompurify';

// 基础配置
const clean = DOMPurify.sanitize(dirtyHtml);

// 安全配置（富文本编辑器场景）
const config = {
  ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'a', 'ul', 'ol', 'li', 'h1', 'h2', 'h3'],
  ALLOWED_ATTR: ['href', 'title', 'target'],
  ALLOW_DATA_ATTR: false,
  SANITIZE_DOM: true,
  // 强制链接 noopener
  ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp|xxx):|[^a-z]|[a-z+.-]+(?:[^a-z+.-:]|$))/i
};

const safeHtml = DOMPurify.sanitize(dirtyHtml, config);

// 注册 Trusted Types 策略
if (window.trustedTypes && window.trustedTypes.createPolicy) {
  window.trustedTypes.createPolicy('default', {
    createHTML: (input) => DOMPurify.sanitize(input),
    createScriptURL: (input) => {
      const allowedDomains = ['cdn.example.com', 'cdn.jsdelivr.net'];
      const url = new URL(input, location.href);
      if (!allowedDomains.includes(url.hostname)) {
        throw new TypeError(`Blocked script URL: ${input}`);
      }
      return input;
    }
  });
}

// CSP 中强制 Trusted Types
// Content-Security-Policy: require-trusted-types-for 'script'

// next.config.js
const nonce = Buffer.from(crypto.randomUUID()).toString('base64');

const cspHeader = `
  default-src 'self';
  script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
  style-src 'self' 'nonce-${nonce}';
  img-src 'self' blob: data:;
  font-src 'self';
  object-src 'none';
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'none';
  upgrade-insecure-requests;
`;

module.exports = {
  async headers() {
    return [{
      source: '/(.*)',
      headers: [{
        key: 'Content-Security-Policy',
        value: cspHeader.replace(/\s+/g, ' ').trim()
      }]
    }];
  }
};

# nginx.conf
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'nonce-$csp_nonce'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.example.com; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none';" always;

add_header X-Content-Type-Options "nosniff" always;
add_header X-Frame-Options "DENY" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;

<!-- CDN 资源添加 integrity 属性 -->
<script
  src="https://cdn.jsdelivr.net/npm/vue@3.4.0/dist/vue.global.prod.js"
  integrity="sha384-abc123..."
  crossorigin="anonymous"
></script>

<!-- 使用 SRI Hash 生成工具 -->
<!-- https://www.srihash.org/ -->
<!-- 或命令行：
  curl -s https://cdn.example.com/lib.js | openssl dgst -sha384 -binary | openssl base64 -A
-->

// webpack.config.js
const SriPlugin = require('webpack-subresource-integrity');

module.exports = {
  plugins: [
    new SriPlugin({
      hashFuncNames: ['sha384', 'sha512'],
      enabled: process.env.NODE_ENV === 'production'
    })
  ]
};

Set-Cookie: session=xxx;
  HttpOnly;      // 禁止 JS 访问（防 XSS 窃取）
  Secure;        // 仅 HTTPS 传输
  SameSite=Strict; // 完全禁止跨站携带（CSRF 防御最强）
  Path=/;
  Max-Age=86400

// ❌ 危险：递归合并不检查 __proto__
function mergeDeep(target, source) {
  for (const key in source) {
    if (typeof source[key] === 'object') {
      mergeDeep(target[key], source[key]); // key 可能为 "__proto__"
    } else {
      target[key] = source[key];
    }
  }
}

// 攻击：
// mergeDeep({}, JSON.parse('{ "__proto__": { "isAdmin": true } }'))
// 所有对象都成了 isAdmin: true

// ✅ 安全：冻结 Object.prototype
Object.freeze(Object.prototype);
Object.freeze(Array.prototype);

// ✅ 安全：递归合并时拒绝危险 key
const DANGEROUS_KEYS = ['__proto__', 'constructor', 'prototype'];
function safeMerge(target, source) {
  for (const key in source) {
    if (DANGEROUS_KEYS.includes(key)) continue;
    // ...
  }
}

# 检查已知漏洞
npm audit
npm audit fix
npm audit fix --force  # ⚠️ 可能引入 breaking change

# 升级检查
npm outdated

# lockfile 验证（防篡改）
npm ci  # 严格按 lockfile 安装

# SBOM（软件物料清单）
npm sbom

# 依赖分析
dependency-check --project my-app --scan ./

# Snyk（更全面的扫描）
npx snyk test
npx snyk monitor