前端安全防护体系构建指南1. 问题概述前端安全正在成为越来越重要的话题。XSS、CSRF、供应链攻击、敏感数据泄露等问题频发构建完善的前端安全防护体系是每个团队必须面对的挑战。2. 主要威胁与防护2.1 XSS跨站脚本攻击反射型 XSS 防护// ❌ 危险 div dangerouslySetInnerHTML{{ __html: userInput }} / // ✅ 使用 DOMPurify 净化 import DOMPurify from dompurify const clean DOMPurify.sanitize(userInput) div dangerouslySetInnerHTML{{ __html: clean }} /Content Security Policymeta http-equivContent-Security-Policy contentdefault-src self; script-src self nonce-{random} /2.2 CSRF跨站请求伪造// 同源 Cookie 设置 document.cookie tokenxxx; SameSiteStrict; Secure; HttpOnly // 请求携带 CSRF Token fetch(/api/data, { headers: { X-CSRF-Token: getCsrfToken() } })2.3 敏感数据保护// 使用加密存储 import { encrypt, decrypt } from ./crypto // 避免在前端存储敏感信息 // ❌ localStorage.setItem(password, plainText) // ✅ 使用 HttpOnly Cookie 由服务端管理2.4 供应链安全# 定期审计依赖 npm audit npx socket security # 锁定依赖版本 npm ci # 而非 npm install2.5 点击劫持防护!-- 服务端设置响应头 -- X-Frame-Options: DENY Content-Security-Policy: frame-ancestors none2.6 原型污染防护// 避免使用 Object.create(null) 之外的对象作为 Map const safeMap Object.create(null) // 使用 Map 替代普通对象 const cache new Map()3. 安全开发检查清单3.1 输入验证所有用户输入进行验证和净化文件上传进行类型和大小限制URL 参数进行编码处理3.2 认证与授权Token 使用 HttpOnly、Secure、SameSite Cookie敏感操作二次确认实现合理的超时机制3.3 数据传输全站 HTTPSAPI 请求签名验证敏感数据不在 URL 中传输3.4 第三方依赖定期npm audit使用 Snyk/Dependabot 自动检测审查第三方脚本权限4. 安全工具链工具用途Helmet.jsHTTP 安全头设置DOMPurifyHTML 净化OWASP ZAP安全扫描Snyk依赖漏洞检测CSP EvaluatorCSP 策略评估npm auditNode.js 依赖审计5. 安全监控// 使用 Sentry 监控安全事件 Sentry.init({ dsn: your-dsn, beforeSend(event) { // 过滤敏感数据 delete event.request?.cookies return event } }) // CSP 违规上报 // Content-Security-Policy: ...; report-uri /csp-report6. 参考资源OWASP Top 10Web Security AcademyMDN Web Security
