Web前端常见的攻击方式及防御策略你都知道吗？

JacksonGao
248 阅读3分钟

前端是用户与系统交互的第一线，也因此容易成为攻击目标。下面总结了常见的前端攻击方式以及对应的防御策略，从安全角度帮助你构建更稳固的前端系统。

一、常见前端攻击方式及防御措施

攻击方式描述防御方法
XSS（跨站脚本攻击）注入恶意脚本到页面，盗取用户信息、伪造操作✅ 输出内容时进行 HTML 转义✅ 使用 DOMPurify 过滤富文本✅ CSP 限制脚本来源✅ 不拼接 HTML，使用框架绑定
CSRF（跨站请求伪造）利用用户登录状态伪造请求✅ 使用 SameSite Cookie✅ 请求中携带 CSRF Token 验证✅ 重要操作使用 POST + Token
Clickjacking（点击劫持）把页面嵌入 iframe 中，诱导点击✅ 在响应头设置 X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none'
Open Redirect（开放重定向）恶意引导用户跳转到钓鱼网站✅ 不信任 URL 参数，白名单校验跳转地址
Form Injection / DOM Injection注入伪造表单或 HTML 节点✅ 使用安全的 DOM API，避免 innerHTML 拼接
Man-in-the-middle（中间人攻击）未加密通信被监听、篡改✅ 全站启用 HTTPS✅ 使用 HSTS 强制 HTTPS
localStorage 泄漏XSS 导致 localStorage 中的 token 被盗✅ 尽量用 HttpOnly Cookie 存储敏感信息
Subresource Integrity (SRI) 缺失外部 script 被篡改执行恶意代码✅ 使用 <script src integrity="..." crossorigin="anonymous">
前端源码泄露 / 反编译代码被直接查看，甚至被篡改✅ 使用构建工具混淆压缩代码✅ 不在前端暴露敏感逻辑（如权限判断、密钥等）
缓存投毒利用不安全缓存导致数据混乱或污染✅ 设置合适的 Cache-Control✅ 动态接口禁止中间代理缓存

二、具体攻击示例

🧨 XSS 示例

<!-- 恶意输入 -->
<input value="<script>alert('xss')</script>">

防御方式：

使用前端模板绑定而非拼接 HTML，或进行转义：

// ❌ 不安全
element.innerHTML = userInput;

// ✅ 安全
element.textContent = userInput;

🧨 CSRF 示例

攻击者页面自动提交用户浏览器中有效 Cookie 请求：

<img src="https://your-site.com/api/delete?id=123" />

防御方式：

  • Cookie 设置 SameSite=Lax|Strict
  • 请求校验 CSRF token（如 Django、Laravel 都有内建支持）

三、通用前端安全最佳实践

✅ 内容安全策略 CSP

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;

限制脚本来源，防止加载恶意 JS。

✅ Cookie 设置示例（Next.js、Express 中）

Set-Cookie: token=abc; HttpOnly; Secure; SameSite=Strict; Path=/
  • HttpOnly: JS 无法访问（防止 XSS）
  • Secure: 仅 HTTPS 有效
  • SameSite: 限制跨站请求使用

✅ 客户端依赖检查

  • 使用可信任 CDN 或本地缓存
  • 开启 SRI 校验：
<script src="..." integrity="sha384-..." crossorigin="anonymous"></script>

✅ 使用安全开发库

  • 对用户输入富文本使用 DOMPurify

  • 对路径、URL、HTML 转义使用：

    • encodeURIComponent
    • lodash.escape
    • sanitize-html

四、安全检测工具推荐

工具说明
SonarLint实时代码静态扫描（插件）
OWASP ZAP动态安全测试
Google Lighthouse检查 HTTPS、CSP、安全标头等
Retire.js检查前端依赖漏洞
npm audit检查第三方库漏洞

五、总结建议

  • 不信任任何用户输入
  • 最小权限原则（最小暴露）
  • 安全配置写进默认架构
  • 推荐将认证信息存入 Cookie（含 HttpOnly）而非 localStorage
  • 使用安全标头（CSP、X-Frame-Options、HSTS、X-Content-Type-Options 等）
avatar
文章
阅读
粉丝