前端架构手记
安全

前端安全：XSS、CSRF 与 CSP 实战

梳理前端最常见的三大安全威胁 XSS、CSRF 与 CSP 防御，附可落地的防护清单。

一舟 1 分钟阅读

前端安全常被忽视，直到被攻击才追悔莫及。本文梳理三大核心威胁与防御手段。

XSS：跨站脚本攻击

XSS 是攻击者把恶意脚本注入页面，在用户浏览器执行，窃取 Cookie、篡改页面。

防御：

  • 永远不要用 innerHTML 插入不可信内容，优先用 textContent；
  • 对任何用户输入做转义；
  • 使用框架的默认转义（React/Vue 的插值默认安全）；
  • 谨慎使用 dangerouslySetInnerHTML，确需使用时先做净化（如 DOMPurify）。

CSRF：跨站请求伪造

CSRF 诱导用户在已登录状态下，对目标站点发起非本意的请求。

防御：

  • 使用 CSRF Token：请求带服务端签发的令牌，攻击者无法伪造；
  • 校验请求来源（Origin/Referer）；
  • 关键操作（转账、改密）二次验证；
  • 配合 SameSite Cookie 属性，限制跨站携带。

CSP：内容安全策略

CSP 是浏览器提供的一道声明式防线，通过响应头告诉浏览器哪些资源可信：

Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-xxx'

它能在源头阻止 XSS 注入脚本的执行，是纵深防御的关键一层。

防护清单

  1. 是否对用户输入做转义/净化？
  2. 是否使用了 CSRF Token 与 SameSite？
  3. 是否配置了 CSP 响应头？
  4. 敏感数据是否避免存 localStorage（XSS 可读）？

结语

安全是纵深防御：编码习惯 + 框架机制 + 浏览器策略层层叠加。没有单点银弹，但把清单做实，就能挡住绝大多数攻击。