CSRF（跨站请求伪造）攻击详解：原理、途径与防范

本文详细解析 CSRF 攻击的工作原理、常见攻击途径，并提供多种有效的防范措施，帮助开发者构建更安全的Web应用。

一、CSRF攻击概述

CSRF（Cross-Site Request Forgery，跨站请求伪造） 是一种常见的网络攻击方式。它通过诱骗已登录的用户在不知情的情况下，向其已登录的 Web 应用程序发送非本意的请求，从而执行恶意操作。

简单来说，攻击者"伪造"了用户的请求，利用了系统对用户身份（通常是Cookie）的信任。

攻击危害等级

危害等级	影响范围	典型后果
🔴 高危	用户账户安全	资金盗取、信息泄露
🟡 中危	数据完整性	数据篡改、恶意操作
🟢 低危	用户体验	非授权操作

二、攻击原理深度解析

CSRF 攻击的核心在于利用了 Web 应用程序对用户浏览器中 Cookie 的信任机制。当用户登录一个网站时，浏览器会保存该网站的 Cookie（包含用户的身份认证信息）。如果用户在未登出的情况下访问了攻击者构造的恶意页面，该页面可以向目标网站发起请求。

攻击流程时序图

典型攻击代码示例

<!-- 方式1：隐藏图片请求 -->
<img src="https://bank.com/transfer?to=attacker&amount=1000" style="display:none;"><!-- 方式2：自动提交的表单 -->
<form id="csrf-form" action="https://bank.com/transfer" method="POST"><input type="hidden" name="to" value="attacker"><input type="hidden" name="amount" value="1000">
</form>
<script>// 页面加载时自动提交表单document.getElementById('csrf-form').submit();
</script><!-- 方式3：AJAX请求（需考虑CORS限制） -->
<script>fetch('https://bank.com/transfer', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({to: 'attacker', amount: 1000}),credentials: 'include'  // 携带Cookie});
</script>

三、攻击途径与场景分析

主要攻击载体对比

攻击途径	隐蔽性	成功率	防范难度
恶意网站	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐
钓鱼邮件	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐
论坛/博客	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
恶意广告	⭐⭐⭐⭐	⭐⭐	⭐
XSS结合	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐

具体攻击场景

1. 社交媒体攻击

<!-- 攻击者在论坛发布"有趣"的内容 -->
<a href="https://evil.com/funny-cat-video"><img src="https://evil.com/csrf-trigger" style="display:none">点击看搞笑猫咪视频！
</a>

2. 邮件钓鱼攻击

<!-- 伪装成系统通知的钓鱼邮件 -->
<div style="background: #f5f5f5; padding: 20px;"><h3>重要安全通知：您的账户需要验证</h3><p>请点击下方链接完成验证：</p><a href="https://evil.com/fake-login?redirect=csrf-attack">立即验证账户</a>
</div>

四、全面防范措施

防御策略对比表

防御方法	安全性	实现复杂度	兼容性	推荐指数
Anti-CSRF Token	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
SameSite Cookie	⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
Referer验证	⭐⭐⭐	⭐	⭐⭐⭐	⭐⭐
二次验证	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐

1. Anti-CSRF Token（同步令牌模式）⭐最佳实践⭐

实现原理流程图

服务端实现示例（Node.js/Express）

// 生成CSRF Token中间件
const crypto = require('crypto');function generateCSRFToken(req, res, next) {// 如果session中还没有token，则生成一个if (!req.session.csrfToken) {req.session.csrfToken = crypto.randomBytes(32).toString('hex');}// 将token添加到res.locals供模板使用res.locals.csrfToken = req.session.csrfToken;next();
}// 验证CSRF Token中间件
function verifyCSRFToken(req, res, next) {const clientToken = req.body.csrf_token || req.headers['x-csrf-token'];const serverToken = req.session.csrfToken;if (!clientToken || !serverToken || clientToken !== serverToken) {return res.status(403).json({error: 'CSRF token验证失败',message: '请求可能被伪造'});}// 验证成功后可以重新生成token（可选）req.session.csrfToken = crypto.randomBytes(32).toString('hex');next();
}// 应用中间件
app.use(sessionMiddleware);
app.use(generateCSRFToken);// 保护敏感路由
app.post('/transfer', verifyCSRFToken, (req, res) => {// 处理转账逻辑res.json({ success: true, message: '操作成功' });
});

前端表单示例

<!-- 传统表单方式 -->
<form action="/update-profile" method="POST"><input type="hidden" name="csrf_token" value="<%= csrfToken %>"><div class="form-group"><label for="email">邮箱地址：</label><input type="email" id="email" name="email" value="[e-mail]"></div><button type="submit" class="btn btn-primary">更新信息</button>
</form><!-- AJAX请求方式 -->
<script>
function updateProfile() {const formData = new FormData();formData.append('email', document.getElementById('email').value);formData.append('csrf_token', '<%= csrfToken %>');fetch('/update-profile', {method: 'POST',body: formData,headers: {'X-CSRF-Token': '<%= csrfToken %>'  // 或者放在header中}}).then(response => response.json()).then(data => {if (data.success) {alert('更新成功！');}});
}
</script>

2. SameSite Cookie 属性配置 🍪

配置示例

// Express.js中设置Cookie
app.use(session({secret: 'your-secret-key',resave: false,saveUninitialized: false,cookie: {httpOnly: true,      // 防止XSS读取Cookiesecure: process.env.NODE_ENV === 'production',  // 生产环境使用HTTPSsameSite: 'lax',     // CSRF防护关键设置maxAge: 24 * 60 * 60 * 1000 // 24小时}
}));// 单独设置认证Cookie
res.cookie('auth_token', token, {httpOnly: true,secure: true,sameSite: 'strict',  // 对关键操作使用严格模式maxAge: 7 * 24 * 60 * 60 * 1000 // 7天
});

SameSite 属性行为对比

3. 验证 HTTP Referer 字段

实现示例

function verifyReferer(req, res, next) {const referer = req.get('Referer');const allowedDomains = ['https://yourdomain.com','https://www.yourdomain.com'];// 允许没有Referer的情况（可能是直接访问）if (!referer) {return next();}try {const refererUrl = new URL(referer);const isValidReferer = allowedDomains.some(domain => refererUrl.origin === domain);if (!isValidReferer) {return res.status(403).json({error: '非法请求来源',message: '请求必须来自可信域名'});}} catch (error) {// Referer格式无效，拒绝请求return res.status(403).json({error: '无效的请求来源',message: '无法验证请求来源'});}next();
}

4. 敏感操作二次验证 🔒

二次验证流程设计

实现示例

// 短信验证码服务
const twilio = require('twilio');class TwoFactorAuth {constructor() {this.pendingRequests = new Map();}// 发起敏感操作，要求二次验证async initiateSensitiveOperation(userId, operation) {const verificationCode = Math.random().toString().slice(2, 8);const requestId = require('crypto').randomBytes(16).toString('hex');// 存储验证信息this.pendingRequests.set(requestId, {userId,operation,code: verificationCode,expires: Date.now() + 10 * 60 * 1000 // 10分钟过期});// 发送验证码（实际项目中集成短信/邮件服务）await this.sendVerificationCode(userId, verificationCode);return requestId;}// 验证并执行操作async verifyAndExecute(requestId, userCode) {const request = this.pendingRequests.get(requestId);if (!request) {throw new Error('验证请求不存在或已过期');}if (Date.now() > request.expires) {this.pendingRequests.delete(requestId);throw new Error('验证码已过期');}if (request.code !== userCode) {throw new Error('验证码错误');}// 验证成功，执行操作并清理this.pendingRequests.delete(requestId);return await this.executeOperation(request.operation);}async sendVerificationCode(userId, code) {// 集成短信/邮件服务console.log(`向用户 ${userId} 发送验证码: ${code}`);// 实际项目中调用Twilio、SendGrid等服务}
}

五、框架内置防护方案

1. Django CSRF防护

# settings.py
MIDDLEWARE = ['django.middleware.csrf.CsrfViewMiddleware',# ... 其他中间件
]

# 模板中自动添加 CSRF token
<form method="post">{% csrf_token %}<!-- 表单字段 --><input type="text" name="username"><button type="submit">提交</button>
</form>

# AJAX请求设置
const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;fetch('/api/endpoint', {method: 'POST',headers: {'X-CSRFToken': csrftoken,'Content-Type': 'application/json'},body: JSON.stringify(data)
});

2. Spring Security配置

@Configuration
@EnableWebSecurity
public class SecurityConfig {@Beanpublic SecurityFilterChain filterChain(HttpSecurity http) throws Exception {http.csrf(csrf -> csrf.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())// 排除某些API（如公开API）.ignoringRequestMatchers("/api/public/**")).authorizeHttpRequests(authz -> authz.anyRequest().authenticated());return http.build();}
}

// 前端使用
// 从Cookie中读取CSRF token
function getCsrfToken() {return document.cookie.replace(/(?:(?:^|.*;\s*)XSRF-TOKEN\s*=\s*([^;]*).*$)|^.*$/, '$1');
}

六、安全测试与验证

CSRF漏洞检测清单

• 所有状态修改操作是否要求CSRF Token？
• Token是否随机且与会话绑定？
• Token是否在一次使用后失效？
• 关键Cookie是否设置SameSite属性？
• 是否对Referer进行验证？
• 敏感操作是否有二次验证？

自动化测试示例

// 使用Puppeteer进行CSRF测试
const puppeteer = require('puppeteer');async function testCSRFProtection() {const browser = await puppeteer.launch();const page = await browser.newPage();// 测试1: 直接提交无Token的表单await page.goto('http://localhost:3000/login');// ... 登录逻辑// 尝试伪造请求const result = await page.evaluate(() => {return fetch('/transfer', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({to: 'attacker', amount: 1000}),credentials: 'include'}).then(r => r.status);});console.log(`CSRF保护测试结果: ${result === 403 ? '通过' : '失败'}`);await browser.close();
}

七、总结与最佳实践

防御策略优先级

1. 首要措施: 为所有状态修改操作实现CSRF Token验证
2. 浏览器层面: 为认证Cookie设置SameSite=Lax或Strict
3. 补充验证: 对敏感操作实施二次验证
4. 深度防御: 结合Referer验证和其他安全头

持续安全实践

• 🔄 定期进行安全审计和渗透测试
• 📚 保持团队安全意识培训
• 🔔 建立安全事件响应机制
• 📊 监控和记录可疑活动

通过实施多层次、深度防御的策略，可以显著降低CSRF攻击的风险，保护用户数据和系统安全。

---

进一步学习资源:

• OWASP CSRF防护手册
• MDN Web安全指南
• CSRF漏洞实战案例