常见的前端安全威胁

前端开发中，安全问题往往容易被忽视，但一旦发生漏洞，可能导致用户数据泄露、会话劫持甚至系统瘫痪。从XSS到CSRF，从点击劫持到依赖库漏洞，攻击手段多种多样，开发者需要全面了解这些威胁的运作机制和防御方案。

跨站脚本攻击（XSS）

XSS攻击通过注入恶意脚本到网页中，在用户浏览时执行。分为三种主要类型：

1. 存储型XSS：恶意脚本永久存储在服务器上

// 攻击者提交的评论内容
恶意payload：<script>stealCookies()</script>

2. 反射型XSS：恶意脚本来自当前HTTP请求

// 攻击者构造的恶意URL
http://example.com/search?q=<script>alert(1)</script>

3. DOM型XSS：完全在客户端执行

// 不安全的DOM操作
document.getElementById('output').innerHTML = userInput;

防御措施：

• 对所有动态内容进行HTML实体编码
• 使用CSP（内容安全策略）头部
• 避免使用innerHTML，优先使用textContent
• 对富文本使用DOMPurify等库过滤

跨站请求伪造（CSRF）

CSRF诱使用户在已认证的Web应用中执行非预期操作。典型攻击流程：

1. 用户登录银行网站，会话cookie有效
2. 攻击者诱使用户访问恶意页面
3. 页面自动提交转账表单

<!-- 恶意页面中的自动提交表单 -->
<form action="https://bank.com/transfer" method="POST">
  <input type="hidden" name="amount" value="10000">
  <input type="hidden" name="to" value="attacker">
</form>
<script>document.forms[0].submit()</script>

防御方案：

• 使用CSRF Token
• 设置SameSite Cookie属性
• 检查Origin/Referer头部
• 关键操作要求二次认证

点击劫持（Clickjacking）

通过透明iframe覆盖诱导用户点击隐藏元素。例如：

<style>
  iframe {
    opacity: 0.01;
    position: absolute;
    top: 300px;
    left: 400px;
    width: 200px;
    height: 50px;
  }
</style>
<iframe src="https://bank.com/delete-account"></iframe>

防御方法：

• 设置X-Frame-Options头部
• 使用CSP的frame-ancestors指令
• 添加"framebuster"脚本

不安全的第三方依赖

现代前端项目依赖大量npm包，可能引入漏洞：

# 检查已知漏洞
npm audit

典型问题包括：

• 过期的jQuery版本存在XSS漏洞
• 被篡改的依赖包（供应链攻击）
• 包含恶意代码的字体/图片资源

解决方案：

• 定期更新依赖
• 使用npm ci代替npm install
• 验证资源完整性签名
• 锁定依赖版本

客户端数据存储风险

不安全的本地存储使用方式：

// 不安全：将敏感数据存入localStorage
localStorage.setItem('authToken', 'eyJhbGci...');

// 可能被读取的cookie
document.cookie = "session=123; path=/;";

安全实践：

• 敏感数据应设置HttpOnly和Secure的cookie
• 使用SessionStorage替代localStorage
• 加密存储的必要数据
• 定期清理存储数据

CORS配置错误

错误的CORS配置可能导致数据泄露：

// 危险的服务端配置
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

正确做法：

• 明确指定允许的源
• 避免使用通配符时携带凭据
• 对敏感操作禁用CORS
• 预检请求严格验证

前端输入验证绕过

仅依赖前端验证的风险：

// 容易被绕过的客户端验证
if(password.length > 6) {
  submitForm();
}

完整方案：

• 服务端必须重复所有验证
• 使用正则表达式严格限制输入格式
• 对特殊字符进行转义
• 实施速率限制防暴力破解

WebSocket安全问题

不安全的WebSocket实现：

const ws = new WebSocket('ws://example.com/chat');

// 未验证的消息处理
ws.onmessage = (event) => {
  document.getElementById('chat').innerHTML += event.data;
};

防护措施：

• 使用wss://协议
• 验证消息来源和格式
• 设置消息大小限制
• 敏感操作仍需服务端鉴权

性能API滥用

通过性能API可能泄露敏感信息：

// 测量特定操作的耗时
const start = performance.now();
checkPassword(input);
const duration = performance.now() - start;

缓解方法：

• 禁用高精度时间戳
• 使用PerformanceObserver监控
• 添加随机延迟消除时序差异

浏览器缓存问题

敏感数据可能被意外缓存：

HTTP/1.1 200 OK
Content-Type: application/json
Cache-Control: public

正确缓存策略：

• 默认使用Cache-Control: no-store
• API响应添加no-cache
• 静态资源使用hash指纹
• 敏感页面设置Clear-Site-Data

前端供应链攻击

构建工具链可能成为攻击载体：

1. 恶意pre-commit钩子
2. 被篡改的webpack插件
3. 恶意编辑器扩展

防护建议：

• 校验构建产物的完整性
• 使用锁定文件（package-lock.json）
• 隔离CI/CD环境
• 审计所有构建脚本

不安全的通信传输

未加密通信的风险示例：

<!-- 混合内容警告 -->
<img src="http://example.com/logo.png">

安全要求：

• 全站HTTPS部署
• 启用HSTS头部
• 自动升级不安全请求
• 禁用TLS 1.0/1.1

客户端逻辑绕过

前端验证可被轻易绕过：

// 修改前端验证逻辑
document.forms[0].onsubmit = function(){ return true; }

防御设计：

• 关键逻辑必须服务端实现
• 混淆重要客户端代码
• 使用WebAssembly处理敏感算法
• 实施运行时完整性检查

浏览器扩展风险

恶意扩展可能：

• 读取所有页面数据
• 修改DOM内容
• 窃取登录凭证

防护建议：

• 最小化安装扩展
• 定期审查扩展权限
• 使用企业策略限制扩展安装
• 敏感操作使用独立浏览器

自动化工具滥用

爬虫和自动化脚本威胁：

# 使用Selenium模拟用户操作
driver.find_element_by_id('username').send_keys('admin')

对抗措施：

• 实施人机验证（CAPTCHA）
• 检测自动化行为模式
• 设置操作频率限制
• 使用反自动化服务如Akamai Bot Manager

前端加密实现缺陷

错误的加密实现：

// 不安全的自定义加密
function encrypt(text) {
  return text.split('').reverse().join('');
}

正确做法：

• 使用Web Crypto API
• 避免在客户端处理敏感加密
• 密钥管理交给服务端
• 使用经过审计的加密库

服务端渲染安全

SSR特有的安全问题：

// 不安全的props传递
<script>
  window.__INITIAL_STATE__ = ${JSON.stringify(data)};
</script>

安全实践：

• 对JSON进行序列化过滤
• 避免直接将用户输入注入模板
• 实施严格的CSP策略
• 隔离渲染进程权限