前端安全防护指南
前端安全是整体安全体系的重要组成部分。虽然后端承担了主要的防护职责，但前端代码也需要防范多种攻击手段。本文将介绍常见的前端安全威胁及防护措施。
XSS（跨站脚本攻击）
XSS 是最常见的前端安全漏洞。攻击者将恶意脚本注入到网页中，当其他用户浏览该页面时恶意脚本执行，可以窃取 Cookie、会话令牌、重定向等。
XSS 类型
存储型 XSS
恶意代码存储在服务器端（如数据库），每个访问的用户都会受到影响。攻击流程：攻击者提交恶意评论 → 服务器存储 → 其他用户浏览时执行。
反射型 XSS
恶意代码在请求 URL 中，服务器未过滤直接返回。攻击者构造恶意链接，用户点击后执行。常通过钓鱼邮件传播。
DOM 型 XSS
恶意代码通过 DOM API 动态注入到页面中。攻击不经过服务器，完全在客户端发生。例如通过 location.hash、document.referrer 等注入。
防护措施
- 输入编码：对所有用户输入进行 HTML 编码，将 < 转换为 <，> 转换为 >
- 输出转义：在展示用户输入时使用 textContent 而非 innerHTML
- 设置 CSP 头：Content-Security-Policy 限制脚本来源
- HttpOnly Cookie：禁止 JavaScript 访问 Cookie
- 框架安全：React/Vue/Angular 默认对绑定内容做转义，避免使用 dangerouslySetInnerHTML / v-html
CSP 配置示例
Content-Security-Policy: default-src 'self';
script-src 'self' https://trusted.cdn.com;
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;
connect-src 'self' https://api.example.com;
frame-ancestors 'none';
CSRF（跨站请求伪造）
攻击者诱导用户在已登录的站点上执行非本意的操作。例如：用户在论坛发帖时，页面中的隐藏图片实际上是转账请求。
防护措施
- SameSite Cookie：设置 SameSite=Strict 或 SameSite=Lax
- CSRF Token：服务端生成 Token，包含在表单中提交校验
- 验证 Referer 头：检查请求来源是否合法
- 关键操作二次确认：如输入密码或验证码
点击劫持（Clickjacking）
攻击者通过 iframe 嵌入目标网站并设置为透明，诱导用户在不知情的情况下点击按钮或链接。
防护措施
- 设置 X-Frame-Options 头：DENY（禁止所有）或 SAMEORIGIN（同源允许）
- 设置 CSP frame-ancestors：更细粒度的控制
- 使用 JS 防御：检测当前页面是否被 iframe 嵌套
示例
// 服务端响应头
X-Frame-Options: DENY
// 或者使用 CSP
Content-Security-Policy: frame-ancestors 'none';
// JS 防御代码
if (top.location !== self.location) {
top.location = self.location;
}
HTTPS 与安全传输
使用 HTTPS 加密所有通信，防止中间人攻击和数据篡改。
- 全站 HTTPS，包括 API 请求
- 使用 HSTS 头强制浏览器使用 HTTPS
- 配置 SSL 证书自动续期（Let's Encrypt）
依赖安全
第三方依赖可能引入安全漏洞。
- 定期使用 npm audit 检查依赖漏洞
- 使用 Dependabot 或 Renovate 自动更新依赖
- 锁定依赖版本（lockfile）
- 最小化依赖，避免引入不必要的包
敏感信息保护
- 不要在前端代码中硬编码 API Key、密钥等敏感信息
- 使用环境变量并通过构建工具注入
- 避免在 localStorage 中存储敏感信息（易被 XSS 窃取）
- 敏感操作使用短生命周期的 Token
总结
前端安全的基本原则是：永远不要信任用户输入和第三方来源。结合 CSP、HTTPS、输入验证、输出转义等多层防御，可以有效抵御大多数常见攻击。安全是一个持续的过程，需要定期审查和更新防护措施。