前端常见攻击手段与防御措施完整指南

作为前端开发者，你是应用安全的第一道防线。本文整理了前端最常见的攻击手段及其对应的防御措施，按威胁程度和发生频率排序。

一、XSS（跨站脚本攻击）⭐⭐⭐⭐⭐

最常见、危害最大的前端安全漏洞

攻击原理

攻击者将恶意 JavaScript 代码注入到网页中，当其他用户访问该页面时，恶意代码会在用户浏览器中执行。

主要类型

存储型 XSS：恶意代码存储在服务器数据库中（如评论、用户资料），每次请求页面时都会执行。
反射型 XSS：恶意代码通过 URL 参数等提交，服务器“反射”回页面立即执行。
DOM 型 XSS：纯客户端漏洞，恶意代码通过修改 DOM 执行，不经过服务器。

危害

窃取用户 Cookie、Session、Token
劫持用户账户，执行任意操作
篡改页面内容，钓鱼攻击
传播蠕虫，扩散攻击

防御措施

输出编码（上下文敏感转义）
将动态数据插入 HTML 时，必须根据位置（HTML 标签、属性、JavaScript、CSS）进行正确转义。

javascript

// 基础 HTML 转义
function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}

利用现代框架的默认防御
React、Vue、Angular 等框架默认对插值内容进行转义。但需警惕：
- dangerouslySetInnerHTML（React）
- v-html（Vue）
- [innerHTML]（Angular）
  使用前务必对内容做严格清洗（如 DOMPurify）。
启用内容安全策略（CSP）
限制脚本来源，即使注入恶意代码也无法执行。
http
```
Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-random123' https://trusted-cdn.com
```
还可通过 nonce 或 hash 机制精准控制内联脚本。
使用 HttpOnly Cookie
防止 JavaScript 读取敏感 Cookie。
http
```
Set-Cookie: sessionid=abc123; HttpOnly; Secure; SameSite=Strict
```
避免危险的 API
禁用或谨慎使用：eval()、new Function()、setTimeout(string)、setInterval(string)、document.write()、element.innerHTML（直接插入不可信内容）。

二、CSRF（跨站请求伪造）⭐⭐⭐⭐

攻击原理

攻击者诱导已登录的用户访问恶意页面，恶意页面向目标站点发送伪造请求（如转账、修改密码），浏览器自动携带用户的凭证（Cookie），使请求看起来合法。

危害

以用户身份执行敏感操作（转账、改密、删除数据）
劫持用户会话

防御措施

使用 CSRF Token
服务端生成随机 Token，前端请求时在 Header 或表单中携带。

javascript

// 从 meta 标签读取 CSRF Token，加入请求头
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
fetch('/api/transfer', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-Token': csrfToken
  },
  body: JSON.stringify({ amount: 1000 })
});

SPA 中可用 Axios 拦截器统一添加。

设置 SameSite Cookie 属性
阻止跨站请求自动携带 Cookie。
http
```
Set-Cookie: sessionid=abc123; SameSite=Strict; HttpOnly; Secure
```
现代浏览器默认 SameSite=Lax 已能防御大多数 CSRF，但仍建议显式设置。
验证 Origin / Referer 头
服务端检查请求来源是否在允许列表中。
关键操作二次验证
转账、修改密码等操作要求用户重新输入密码或进行多因素认证。

三、点击劫持（Clickjacking）⭐⭐⭐

攻击原理

攻击者将目标网站通过 <iframe> 嵌入恶意页面，利用透明层将用户点击“劫持”到目标网站的按钮上。

危害

诱导用户执行非本人意愿的操作（如关注、点赞、开启摄像头）
窃取鼠标交互信息

防御措施

设置 CSP frame-ancestors 指令（推荐）

http

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

使用 X-Frame-Options 响应头（旧浏览器兼容）
http
```
X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
```
JavaScript 辅助防御（非可靠）
javascript
```
if (top !== self) {
  top.location = self.location;
}
```
攻击者可通过 sandbox="allow-forms" 等方式绕过，仅作辅助，必须配合响应头使用。

四、敏感信息泄露⭐⭐⭐⭐

攻击原理

前端代码、请求或存储中意外暴露凭证、密钥等敏感信息，攻击者通过查看源码、监控网络或访问本地存储获取。

常见泄露点

硬编码的 API 密钥、Token、数据库密码
注释中的敏感信息
错误提示暴露的服务器技术栈
localStorage / sessionStorage 中的明文凭证
前端日志（console.log）输出的用户数据

防御措施

绝对不在前端硬编码密钥
所有密钥、密码仅存于服务端，前端通过安全会话获取临时 Token。
使用环境变量注入非敏感配置
通过构建工具（Webpack、Vite）定义环境变量，但仍不可用于密钥。
清理代码与注释
上线前移除所有可能暴露实现细节的注释和 debug 代码。
避免在本地存储存放敏感数据
认证 Token 优先使用 HttpOnly Cookie；若必须存储，加密并缩短有效期。
自定义错误页面
避免直接抛出服务端堆栈；开发环境与生产环境严格分离。
.gitignore 与密钥扫描
防止配置文件被提交，使用 git-secrets、truffleHog 等工具扫描仓库历史。

五、不安全的跨域配置（CORS 配置不当）⭐⭐⭐

攻击原理

服务端错误配置 CORS，允许任意域访问受保护的资源，并可能携带用户凭证。

危险配置示例

http

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

注意：浏览器会直接拒绝这种组合，但单独允许所有源且不携带凭证仍会暴露公开接口；若仅限特定域却未严格验证，也可能被绕过。

危害

恶意网站跨域读取用户私有数据
实现跨站请求伪造

防御措施

明确指定允许的源
http
```
Access-Control-Allow-Origin: https://trusted-domain.com
```
多个可信域需服务端动态判断 Origin 并返回对应值。

限制允许的方法与头

http

Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, X-CSRF-Token

谨慎启用 Access-Control-Allow-Credentials
仅在确需跨域携带 Cookie 时开启，且必须配合具体的 Origin，不能使用 *。
服务端严格校验 Origin
维护白名单，拒绝非预期来源的跨域请求。

六、第三方依赖漏洞⭐⭐⭐⭐

攻击原理

项目引用的第三方库存在已知安全漏洞，攻击者利用这些漏洞实现 XSS、原型链污染、远程代码执行等。

常见风险

直接依赖的漏洞（如旧版 lodash 的原型污染）
间接依赖的隐患
供应链攻击（如恶意包、依赖混淆）

防御措施

使用包管理器并定期审计
bash
```
npm audit
npm audit fix
```
锁定依赖版本
提交 package-lock.json / yarn.lock / pnpm-lock.yaml，避免自动升级引入风险。
自动化漏洞扫描
集成 Snyk、Dependabot、Renovate 等工具，持续监控并自动提 PR 修复。
使用可信源并检查包信息
避免拼写相近的恶意包（如 lodahs），关注下载量、维护状况。

子资源完整性（SRI）
通过 CDN 引用脚本时添加 integrity 属性，防止 CDN 文件被篡改。

html

<script src="https://cdn.example.com/lib.js"
        integrity="sha384-abc123..."
        crossorigin="anonymous"></script>

最小化依赖
减少不必要的第三方库，缩小攻击面。

七、不安全的本地存储⭐⭐⭐

攻击原理

一旦发生 XSS，攻击者可以轻易读取 localStorage / sessionStorage 中的数据，若其中存有明文 Token 或敏感信息，将导致账户被盗。

常见问题

将 JWT 或 Session Token 存在 localStorage
存储未加密的个人信息
数据无过期机制

防御措施

认证信息优先使用 HttpOnly Cookie
Token 存于 Cookie 并设 HttpOnly; Secure; SameSite，JavaScript 无法访问。
若必须前端存储，加密并控制生命周期
javascript
```
// 仅为示意，密钥管理仍是难题
import CryptoJS from 'crypto-js';
const encrypted = CryptoJS.AES.encrypt('data', 'passphrase').toString();
```
注意：前端加密无法防御 XSS（攻击者可读取加密密钥），只能增加攻击难度，最安全的是“不存”。
存储最小化
只存放非敏感、临时性的 UI 状态。
设置过期与清理机制
存储时写入时间戳，定期或启动时清理过期数据。

八、开放重定向漏洞⭐⭐⭐

攻击原理

应用根据 URL 参数进行跳转，且未验证目标地址的合法性。攻击者构造链接将用户从可信站点重定向到钓鱼页面。

示例

https://example.com/redirect?url=https://evil.com

危害

钓鱼攻击，窃取凭证
结合 CSRF 或 OAuth 流程扩大危害

防御措施

白名单验证
只允许跳转到站内相对路径或预先定义的外部域名。

javascript

const allowedPaths = ['/home', '/dashboard', '/profile'];
function safeRedirect(url) {
  if (allowedPaths.includes(url)) {
    window.location.href = url;
  } else {
    window.location.href = '/home';
  }
}

使用绝对 URL 检查域名
若必须跳转外部，解析 URL 并校验主机名是否在白名单内。
添加用户确认中间页
显示“您即将离开本站，是否继续？”并明确展示目标域名。
避免将用户输入直接作为跳转地址
使用映射标识代替真实 URL（如 ?redirectTo=dashboard）。

九、不安全的客户端数据交互（前端 SQL / NoSQL 注入风险）⭐⭐⭐

攻击原理

虽然注入攻击主要发生在服务端，但前端如果直接拼接查询语句，或传递恶意构造的参数给 API，仍可能成为攻击链条的一部分。

前端诱发场景

直接拼接 GraphQL 查询、MongoDB 查询字符串发给后端
URL 参数未做处理直接用于数据库查询
前端构建 JSON 查询对象时未校验字段名（可能导致 NoSQL 注入）

防御措施

前端严格校验输入格式
限制字段类型、长度、正则匹配，拒绝意外字符。
使用参数化机制
调用 API 时确保发送的是结构化数据，绝不自行拼接 SQL 或命令字符串。
后端必须作为最终防线
前端校验仅为用户体验，所有数据到达服务端仍需参数化查询和权限检查。
避免在前端暴露查询结构
不要将数据库字段名、操作符直接暴露给客户端。

十、中间人攻击（MITM）⭐⭐⭐

攻击原理

攻击者在用户与服务器之间拦截、窃听或篡改通信内容，特别是在公共 Wi-Fi 环境下。

危害

窃取登录凭证、会话 Token
注入恶意代码到传输的页面中

防御措施

全站启用 HTTPS
获取可信 SSL/TLS 证书，将所有 HTTP 流量重定向到 HTTPS。
设置 HSTS 头
http
```
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
```
强制浏览器仅通过 HTTPS 访问，防止 SSL 剥离攻击。
避免混合内容
HTTPS 页面中不得加载 HTTP 资源（可通过 CSP upgrade-insecure-requests 自动升级）。
启用证书透明度检查
监控证书是否被非法颁发。
使用安全的 Cookie 属性
Secure 标记确保 Cookie 仅在 HTTPS 下传输。

前端安全最佳实践总结

永远不信任用户输入
输入验证、输出编码是基本操作，前后端双重防御。
最小权限原则
用户、应用、接口仅获取完成功能所必需的最小权限。
纵深防御
组合多种安全层（CSP + HttpOnly + Token + HTTPS…），单点失效不影响整体。
供应链安全
锁定依赖、定期审计、使用 SRI，拒绝来历不明的第三方脚本。
保持更新
及时升级框架、库、语言版本，响应安全公告。
安全开发文化
团队培训、代码审查、安全测试（SAST/DAST）融入开发流程。
监控与日志
记录前端异常与可疑行为，但避免记录敏感信息。
额外的安全头
根据场景配置 Referrer-Policy、Permissions-Policy、X-Content-Type-Options: nosniff 等。

前端常见攻击手段与防御措施完整指南 ​

一、XSS（跨站脚本攻击）⭐⭐⭐⭐⭐ ​

攻击原理 ​

主要类型 ​

危害 ​

防御措施 ​

二、CSRF（跨站请求伪造）⭐⭐⭐⭐ ​

攻击原理 ​

危害 ​

防御措施 ​

三、点击劫持（Clickjacking）⭐⭐⭐ ​

攻击原理 ​

危害 ​

防御措施 ​

四、敏感信息泄露⭐⭐⭐⭐ ​

攻击原理 ​

常见泄露点 ​

防御措施 ​

五、不安全的跨域配置（CORS 配置不当）⭐⭐⭐ ​

攻击原理 ​

危险配置示例 ​

危害 ​

防御措施 ​

六、第三方依赖漏洞⭐⭐⭐⭐ ​

攻击原理 ​

常见风险 ​

防御措施 ​

七、不安全的本地存储⭐⭐⭐ ​

攻击原理 ​

常见问题 ​

防御措施 ​

八、开放重定向漏洞⭐⭐⭐ ​

攻击原理 ​

示例 ​

危害 ​

防御措施 ​

九、不安全的客户端数据交互（前端 SQL / NoSQL 注入风险）⭐⭐⭐ ​

攻击原理 ​

前端诱发场景 ​

防御措施 ​

十、中间人攻击（MITM）⭐⭐⭐ ​

攻击原理 ​

危害 ​

防御措施 ​

前端安全最佳实践总结 ​

前端常见攻击手段与防御措施完整指南

一、XSS（跨站脚本攻击）⭐⭐⭐⭐⭐

攻击原理

主要类型

危害

防御措施

二、CSRF（跨站请求伪造）⭐⭐⭐⭐

攻击原理

危害

防御措施

三、点击劫持（Clickjacking）⭐⭐⭐

攻击原理

危害

防御措施

四、敏感信息泄露⭐⭐⭐⭐

攻击原理

常见泄露点

防御措施

五、不安全的跨域配置（CORS 配置不当）⭐⭐⭐

攻击原理

危险配置示例

危害

防御措施

六、第三方依赖漏洞⭐⭐⭐⭐

攻击原理

常见风险

防御措施

七、不安全的本地存储⭐⭐⭐

攻击原理

常见问题

防御措施

八、开放重定向漏洞⭐⭐⭐

攻击原理

示例

危害

防御措施

九、不安全的客户端数据交互（前端 SQL / NoSQL 注入风险）⭐⭐⭐

攻击原理

前端诱发场景

防御措施

十、中间人攻击（MITM）⭐⭐⭐

攻击原理

危害

防御措施

前端安全最佳实践总结