兴趣岛
前端

前端安全常见漏洞防范

2026/4/30

一次XSS攻击让我夜不能寐

那是个普通的周三晚上，安全团队突然拉了一个紧急会议：我们的一个表单页面存在存储型XSS漏洞，已经有少量用户数据受到影响。

我是这个功能模块的开发者。虽然漏洞很快被修复，但那种「我的代码给别人造成了实际损失」的愧疚感，让我连续几个晚上睡不好。从那以后，前端安全成了我每次代码评审中最重要的检查项。

第一步：理解前端安全的三座大山

前端安全问题中，最常见也最危险的三个方向：

  • XSS（跨站脚本攻击）：攻击者在页面中注入恶意脚本，窃取用户信息
  • CSRF（跨站请求伪造）：诱导用户在本站已登录状态下执行非本意的操作
  • 点击劫持：用透明的iframe覆盖合法页面，诱导用户点击

这三种攻击每年造成数十亿美元的经济损失，而很多前端开发者对它们的了解仅限于面试八股文。

第二步：XSS防护的实操方案

XSS分为反射型、存储型和DOM型三种。防护手段各有侧重：

  • 对所有用户输入进行转义输出，不要相信任何来自用户的数据
  • 使用CSP（内容安全策略）限制脚本执行来源
  • 给Cookie设置HttpOnly和SameSite属性
  • 使用DOMPurify库对富文本内容进行清洗
<!-- CSP配置示例 -->
<meta http-equiv="Content-Security-Policy"
      content="default-src &quot;self&quot;; script-src &quot;self&quot; trusted-cdn.com;">

第三步：CSRF和点击劫持的防御

CSRF防御三板斧：

  1. SameSite Cookie：设置为Lax或Strict模式
  2. CSRF Token：每个表单请求携带服务端生成的随机令牌
  3. 验证Referer头：检查请求来源是否合法

点击劫持的防御很简单但容易被忽略：

<!-- 禁止页面被嵌入iframe -->
<meta http-equiv="X-Frame-Options" content="DENY">

前端安全防范示意图

第四步：建立安全开发习惯

安全不是一次性的检查，而是贯穿开发全流程的习惯：

  • 代码评审时增加「安全检查清单」
  • 使用ESLint插件 eslint-plugin-security 自动检测常见问题
  • 定期用OWASP ZAP做安全扫描
  • 第三方依赖用 npm audit 定期检查已知漏洞

那次XSS事件过去一年了，但每次提交代码前我都会问自己一句：这段代码如果被恶意用户看到了会发生什么？保持这种敬畏心，比任何安全工具都重要。

延伸阅读：

前端安全常见漏洞防范 | 兴趣岛