前端安全

XSS（Cross-Site Scripting）

类型对比

// DOM 型 XSS 示例 - 危险代码
const name = new URLSearchParams(location.search).get('name');
document.getElementById('welcome').innerHTML = `欢迎，${name}！`;
// 攻击: ?name=<img src=x onerror=alert('XSS')>

// ✅ 安全的写法: 使用 textContent 而非 innerHTML
document.getElementById('welcome').textContent = `欢迎，${name}！`;

XSS 防御体系

CSP（Content Security Policy）

# 严格 CSP 配置（推荐）
Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' https:; font-src 'self'; connect-src 'self'; frame-ancestors 'none';

DOMPurify 使用

import DOMPurify from 'dompurify';

const dirty = '<img src=x onerror=alert("xss")><p>hello</p>';
const clean = DOMPurify.sanitize(dirty);
// 结果: <p>hello</p> （移除恶意标签和事件处理）

CSRF（Cross-Site Request Forgery）

原理

用户已登录 bank.com（Cookie 已设置）
                  │
                  ▼
用户访问 evil.com ──► 自动向 bank.com/transfer?to=attacker&amount=10000 发请求
                         │
                         ▼
                      Cookie 自动携带 ──► 服务端收到合法请求（以为是用户本人）

• 跨域请求自动携带 Cookie（包括 session cookie）
• 攻击者无法读取响应，但能执行写操作（转账、改密）

防御方案对比

SameSite Cookie

Set-Cookie: session=abc123; HttpOnly; Secure; SameSite=Lax
Set-Cookie: CSRF-Token=xyz789; HttpOnly; Secure; SameSite=Strict

Chrome 80+ 默认 SameSite=Lax，必须手动设置 SameSite=None; Secure 才能跨站发送。

CSRF Token 流程

// 服务端生成 token 嵌入页面
<meta name="csrf-token" content="random-token-123">

// 前端每次请求携带
fetch('/api/transfer', {
  method: 'POST',
  headers: {
    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
  },
  body: ...
});

点击劫持（Clickjacking）

原理

• 攻击者使用透明 iframe 覆盖在诱饵页面（按钮）上
• 用户实际点击的是透明 iframe 中的目标页面（如"点赞"、"转账"）

防御

# 方法 1：X-Frame-Options（旧，支持度广）
X-Frame-Options: DENY           # 禁止任何 iframe 加载
X-Frame-Options: SAMEORIGIN     # 仅允许同域名 iframe 加载

# 方法 2：CSP frame-ancestors（更灵活，推荐现代浏览器）
Content-Security-Policy: frame-ancestors 'none';                    # 禁止任何
Content-Security-Policy: frame-ancestors 'self' https://trusted.com; # 白名单

CORS 配置安全

# ❌ 不安全
Access-Control-Allow-Origin: *

# ✅ 安全
Access-Control-Allow-Origin: https://your-app.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Vary: Origin

使用 Vary: Origin 让 CDN 根据 Origin 缓存不同的响应。

HTTPS 与传输安全

HSTS（HTTP Strict Transport Security）

# 严格配置
Strict-Transport-Security: max-age=63072000; includeSubDomains; preload

• HSTS 生效后浏览器自动将 HTTP 转为 HTTPS
• 首次访问风险：浏览器尚未收到 HSTS 头 → 中间人可以拦截 → 解决：HSTS Preload

证书透明（Certificate Transparency）

• 所有公开 CA 签发的证书必须记录到公共 CT 日志
• 浏览器验证证书是否存在于 CT 日志中
• 防止 CA 被攻破后签发伪造证书而不被发现

依赖安全

npm audit

# 扫描已知漏洞
npm audit

# 修复（自动升级可修复的依赖）
npm audit fix

# 查看详情
npm audit --json

lockfile 固定版本

# package-lock.json 或 yarn.lock 必须提交到仓库
# 确保 CI/CD 和生产环境安装的依赖版本一致

供应链攻击类型

防御措施:

• npm audit / npm outdated 定期检查
• 使用 socket.dev 或 snyk 进行依赖安全扫描
• 设置 npm config set registry 指定私有 registry 优先
• 使用 --ignore-scripts 安装 + 手动检查 postinstall 脚本

SRI（Subresource Integrity）

<!-- CDN 引入时校验文件哈希 -->
<script
  src="https://cdn.example.com/react@18/react.production.min.js"
  integrity="sha384-..."
  crossorigin="anonymous"
></script>

• integrity 属性指定 base64 编码的哈希值（sha384/sha512）
• 浏览器下载后计算哈希对比，不匹配则拒绝执行
• 必须配合 crossorigin 属性

认证与授权

JWT（JSON Web Token）

结构: header.payload.signature

// header: 算法类型
{ "alg": "HS256", "typ": "JWT" }
// payload: 声明
{ "sub": "user123", "iat": 1516239022, "exp": 1516242622 }
// signature: 对 header + payload 的签名
HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)

Token 存储位置对比

推荐: accessToken 短时效（15min）存内存 + refreshToken 长时效（7天）存 httpOnly Cookie

双 Token 刷新策略

// 请求拦截器：自动检查 token 过期
let isRefreshing = false;
let refreshSubscribers = [];

axios.interceptors.response.use(
  response => response,
  async error => {
    if (error.response?.status === 401 && !error.config._retry) {
      if (isRefreshing) {
        // 队列等待刷新完成
        return new Promise(resolve => {
          refreshSubscribers.push(token => {
            error.config.headers.Authorization = `Bearer ${token}`;
            resolve(axios(error.config));
          });
        });
      }
      error.config._retry = true;
      isRefreshing = true;
      const { token } = await axios.post('/refresh');
      isRefreshing = false;
      error.config.headers.Authorization = `Bearer ${token}`;
      refreshSubscribers.forEach(cb => cb(token));
      refreshSubscribers = [];
      return axios(error.config);
    }
    return Promise.reject(error);
  }
);

Token 刷新策略对比

OAuth 2.0 流程

PKCE（Proof Key for Code Exchange）: 客户端生成 code_verifier + code_challenge（SHA256），授权码换 token 时校验，即使授权码被拦截也无法换 token。

Session 管理

其他安全风险

原型污染（Prototype Pollution）

// 攻击示例
const obj = {};
obj.__proto__.isAdmin = true;
// 或通过 lodash merge 等深拷贝方法
_.merge({}, JSON.parse('{"__proto__": {"isAdmin": true}}'));

// 防御
// 1. 使用无原型对象
const safe = Object.create(null);
// 2. 冻结原型
Object.freeze(Object.prototype);
// 3. 校验 JSON key
function sanitize(obj) {
  delete obj.__proto__;
  delete obj.constructor;
  return obj;
}

SSRF（Server Side Request Forgery）

• 攻击者控制服务端发起的内网请求，访问内部资源
• 防御: 白名单 URL、禁止对内网 IP 发起请求、限制协议

ReDoS（正则拒绝服务）

// 危险正则 - 灾难性回溯
const evil = /^(a+)+b$/;
evil.test('aaaaaaaaaaaaaaaaaaaaaac'); // 指数级耗时

// 防御
// 1. 避免嵌套量词（`(a+)+` / `(a|aa)+` / `(.*)*`）
// 2. 使用 `re2` 库（拒绝回溯机制的正则引擎）
// 3. 设置正则匹配超时