前端安全

🔒 前端安全最佳实践 Checklist

1. XSS 防护

• 所有用户输入都进行 严格校验和转义（避免直接 innerHTML）。
• 使用 DOM API 安全插入内容（textContent / innerText）。
• 对富文本使用 白名单过滤（如 DOMPurify）。
• 开启 CSP（内容安全策略），限制脚本、样式、图片加载来源。

---

2. CSRF 防护

• 所有敏感操作都携带 CSRF Token 并在服务端验证。
• Cookie 设置 SameSite=Lax/Strict，必要时配合 Secure 和 HttpOnly。
• 高风险操作（转账、改密）需 二次确认（验证码 / 短信 / 弹窗）。

---

3. 点击劫持防护

• 后端返回头：

  X-Frame-Options: DENY
  

  或

  Content-Security-Policy: frame-ancestors 'self'
  

• 检查页面是否被 iframe 嵌套，必要时跳出。

---

4. 前端存储安全

• 不在 LocalStorage / SessionStorage 存放 敏感信息（如 Token、密码）。
• 使用 HttpOnly Cookie 存储 Token，避免被 XSS 读取。
• 如必须前端存储，需对数据进行加密/混淆，并控制生命周期。

---

5. 依赖与第三方安全

• 使用 npm audit / yarn audit 定期扫描依赖漏洞。
• 只使用可信赖的第三方库和 CDN。
• CDN 资源开启 SRI（Subresource Integrity）校验：

  <script src="xxx.js" integrity="sha384-xxxxx" crossorigin="anonymous"></script>
  

---

6. 敏感信息保护

• 不要在前端代码里硬编码 API Key、密钥、密码。
• 使用 .env 管理环境变量，构建时区分 dev / prod。
• 后端代理第三方 API，不要让前端直接调用。

---

7. HTTPS 与传输安全

• 全站启用 HTTPS，避免中间人攻击。
• 配置 HSTS，强制 HTTPS：

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

---

8. 文件上传安全

• 前端限制文件类型、大小。
• 后端再次验证 MIME 类型、扩展名。
• 对上传的文件名进行处理（避免执行脚本）。

---

9. 重定向与跳转

• 避免开放重定向，跳转 URL 使用 白名单。
• 不信任 query 参数里的跳转链接。

---

10. 请求与接口安全

• 接口需 鉴权与限流，防止被暴力刷接口。
• 使用 验证码 / 滑块 防止恶意请求。
• 接口数据脱敏（如手机号只显示 138****8888）。