常见的前端安全威胁

前端安全是Web开发中不可忽视的重要环节，随着Web应用的复杂度提升，攻击手段也日益多样化。以下是几种常见的前端安全威胁及其防护方案。

跨站脚本攻击（XSS）

XSS攻击通过注入恶意脚本到用户浏览的页面中，窃取用户数据或执行未授权操作。根据攻击方式不同，XSS可分为以下三类：

1. 存储型XSS：恶意脚本被持久化到目标服务器（如评论区、用户资料字段）。例如：

   // 攻击者提交的内容
   <script>stealCookie(document.cookie)</script>
   

   当其他用户访问该页面时，脚本自动执行。

2. 反射型XSS：恶意脚本作为请求参数嵌入URL中，服务器未过滤直接返回。例如：

   // 诱导用户点击的链接
   https://example.com/search?q=<script>alert(1)</script>
   

3. DOM型XSS：完全由前端代码缺陷导致，不经过服务端。例如：

   // 不安全的DOM操作
   document.getElementById('output').innerHTML = location.hash.slice(1);
   

防御方案：

• 对所有动态内容使用textContent替代innerHTML
• 启用CSP（内容安全策略）：

  Content-Security-Policy: default-src 'self'; script-src 'unsafe-inline'
  

• 使用DOMPurify库过滤HTML：

  import DOMPurify from 'dompurify';
  element.innerHTML = DOMPurify.sanitize(userInput);
  

跨站请求伪造（CSRF）

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

1. 用户登录银行网站，会话cookie有效
2. 攻击者诱导访问恶意页面：

   <img src="https://bank.com/transfer?to=attacker&amount=10000">
   

防御方案：

• 使用CSRF Token：

  <form action="/transfer" method="POST">
    <input type="hidden" name="_csrf" value="随机令牌">
  </form>
  

• 设置SameSite Cookie属性：

  Set-Cookie: sessionId=abc123; SameSite=Strict
  

• 验证Referer头部

点击劫持（Clickjacking）

攻击者通过透明iframe覆盖诱导用户点击隐藏元素。例如伪造点赞按钮：

<style>
  iframe {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
<iframe src="https://social.com/like?post=123"></iframe>
<button>点击抽奖</button>

防御方案：

• 设置X-Frame-Options响应头：

  X-Frame-Options: DENY
  

• 使用CSP的frame-ancestors指令：

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

• 添加防护JavaScript代码：

  if (top !== self) top.location = self.location;
  

不安全的第三方依赖

现代前端项目大量使用npm包，可能引入恶意代码。典型案例：

• 2018年event-stream包被注入窃取比特币钱包的代码
• 依赖链攻击通过间接依赖传播恶意包

防御方案：

• 定期审计依赖：

  npm audit
  

• 锁定版本号：

  "dependencies": {
    "react": "18.2.0"
  }
  

• 使用SRI校验CDN资源：

  <script src="https://cdn.example/lib.js" 
          integrity="sha384-验签值"
          crossorigin="anonymous"></script>
  

敏感数据泄露

前端不当处理敏感信息会导致数据暴露：

• 硬编码API密钥：

  const API_KEY = 'a1b2c3d4'; // 反例
  

• 本地存储认证令牌：

  localStorage.setItem('token', 'jwt令牌'); // 可能被XSS窃取
  

防御方案：

• 敏感操作必须通过后端验证
• 使用HttpOnly Cookie存储会话标识
• 避免在前端日志记录敏感数据：

  // 反例
  console.log('User token:', token);
  

不安全的通信

未加密的通信可能被中间人攻击：

• 混合内容（HTTP与HTTPS混用）
• 未启用HSTS导致SSL剥离攻击

防御方案：

• 强制HTTPS：

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

• 升级不安全的请求：

  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  

客户端存储滥用

过度依赖本地存储可能引发问题：

• localStorage无过期机制
• sessionStorage标签页关闭即清除
• IndexedDB可能存储敏感结构化数据

最佳实践：

// 加密存储敏感数据
const encrypted = CryptoJS.AES.encrypt(data, '密钥').toString();
localStorage.setItem('safeData', encrypted);

前端供应链攻击

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

• 恶意的Babel/Webpack插件
• 被篡改的脚手架模板
• CI/CD脚本注入

防护措施：

• 校验构建产物哈希值
• 隔离构建环境网络
• 使用--ignore-scripts安装参数：

  npm install --ignore-scripts
  

原型链污染

JavaScript原型特性可能被滥用：

// 攻击者注入
JSON.parse('{"__proto__":{"isAdmin":true}}');

// 影响所有对象
console.log({}.isAdmin); // true

防御方案：

• 使用Object.create(null)创建无原型对象
• 冻结原型对象：

  Object.freeze(Object.prototype);
  

• 使用Map替代普通对象

界面伪装攻击

通过UI欺骗用户操作：

• 伪造登录弹窗
• 虚假进度条掩盖恶意操作
• 透明按钮覆盖合法元素

检测方法：

// 检测窗口是否被重定向
if (window.outerWidth - window.innerWidth > 200 || 
    window.outerHeight - window.innerHeight > 200) {
  alert('疑似钓鱼窗口！');
}