JavaScript CSRF攻击[编辑 | 编辑源代码]

简介[编辑 | 编辑源代码]

跨站请求伪造（Cross-Site Request Forgery, CSRF）是一种常见的网络安全漏洞，攻击者利用受害者在已认证网站上的身份，诱骗其执行非预期的操作。在JavaScript环境中，CSRF攻击尤为危险，因为现代Web应用大量依赖AJAX和前端逻辑。

CSRF攻击的核心原理是：浏览器会自动携带目标站点的认证信息（如Cookies），而攻击者通过构造恶意请求，利用这一特性以受害者身份完成操作。

攻击原理[编辑 | 编辑源代码]

数学描述：当存在漏洞时，攻击成功的概率 $P_{c s r f}$ 可表示为： $P_{c s r f} = P_{a u t h} \times P_{v i s i t}$ 其中 $P_{a u t h}$ 是用户认证概率， $P_{v i s i t}$ 是访问恶意页面的概率。

攻击示例[编辑 | 编辑源代码]

基础表单攻击[编辑 | 编辑源代码]

<!-- 恶意网站上的代码 -->
<form action="https://bank.com/transfer" method="POST">
    <input type="hidden" name="amount" value="10000">
    <input type="hidden" name="to" value="attacker_account">
</form>
<script>document.forms[0].submit();</script>

AJAX攻击进阶版[编辑 | 编辑源代码]

// 使用Fetch API发起跨域请求（需CORS配置不当）
fetch('https://bank.com/api/transfer', {
    method: 'POST',
    credentials: 'include', // 携带Cookies
    body: JSON.stringify({
        amount: 10000,
        to: 'attacker_account'
    }),
    headers: { 'Content-Type': 'application/json' }
});

防御措施[编辑 | 编辑源代码]

同步令牌模式[编辑 | 编辑源代码]

服务器生成并验证CSRF令牌：

// 服务器生成令牌
const csrfToken = crypto.randomBytes(32).toString('hex');
res.cookie('XSRF-TOKEN', csrfToken);

// 客户端使用时
fetch('/api/data', {
    method: 'POST',
    headers: {
        'X-XSRF-TOKEN': getCookie('XSRF-TOKEN')
    }
});

SameSite Cookie属性[编辑 | 编辑源代码]

设置Cookie的SameSite属性：

Set-Cookie: sessionId=abc123; SameSite=Strict; Secure

实际案例[编辑 | 编辑源代码]

2018年某银行漏洞：

攻击者构造虚假"安全验证"页面
利用<img>标签触发转账请求：

<img src="https://bank.com/transfer?to=attacker&amount=5000" 
     width="0" height="0">

导致已登录用户在不知情时执行转账

检测与测试[编辑 | 编辑源代码]

使用浏览器开发者工具检查： 1. 查看请求是否缺少CSRF令牌 2. 验证SameSite Cookie设置 3. 测试JSON/XML端点是否接受伪造请求

扩展阅读[编辑 | 编辑源代码]

双重提交Cookie模式
基于加密的令牌验证
CORS策略与CSRF的关系

总结[编辑 | 编辑源代码]

CSRF攻击利用的是Web的身份验证机制缺陷。现代前端框架（如React、Angular）通常内置CSRF防护，但开发者仍需理解底层原理。关键防御原则是：任何状态修改请求必须包含不可预测的验证令牌。