跨站请求伪造 (CSRF) 是一种恶意网络攻击技术，攻击者利用受害者的登录会话，在受害者不知情的情况下执行恶意操作。本文将重点介绍如何使用 JavaScript 来增强网站安全，抵御 CSRF 攻击。
CSRF 的原理
CSRF 攻击利用网站对用户浏览器 Cookie 的信任。当用户登录到网站 A 并保持登录状态时，攻击者将用户重定向到网站 B，该网站包含一个恶意请求，例如执行金融交易或更改帐户设置。浏览器会自动将网站 A 的 Cookie 发送到网站 B，这使得网站 B 能够冒充用户执行恶意操作。
使用 JavaScript 抵御 CSRF
JavaScript 提供了多种方法来抵御 CSRF 攻击：
1. 使用同步令牌模式 (Synchronizer Token Pattern)
同步令牌模式通过在客户端和服务器端生成并匹配令牌来工作。
客户端代码：
const token = document.querySelector("meta[name="csrf-token"]").content;
// 在 AJAX 请求中包含令牌
$.ajax({
method: "POST",
url: "/api/submit-form",
data: { data: "value" },
headers: {
"X-CSRF-Token": token
}
});服务器端代码：
// 生成令牌并将其作为元数据添加到页面中
$token = bin2hex(random_bytes(32));
echo "<meta name="csrf-token" content="" . $token . "">";
// 验证令牌
if (!isset($_SERVER["HTTP_X_CSRF_TOKEN"]) || !hash_equals($_SERVER["HTTP_X_CSRF_TOKEN"], $token)) {
// CSRF 验证失败
}2. 使用双向同步令牌
双向同步令牌通过在客户端和服务器端交换令牌来增强安全性。
客户端代码：
// 获取服务器端生成的令牌
const token = document.querySelector("meta[name="csrf-token"]").content;
// 向服务器发送令牌请求
fetch("/api/get-token", {
method: "POST",
headers: {
"X-CSRF-Token": token
}
});
// 将收到的令牌用于 AJAX 请求
// ...服务器端代码：
// 接收客户端令牌并生成新令牌
$clientToken = $_SERVER["HTTP_X_CSRF_TOKEN"];
$newToken = bin2hex(random_bytes(32));
// 向客户端发送新令牌
echo $newToken;
// 验证令牌
if (!isset($_SERVER["HTTP_X_CSRF_TOKEN"]) || !hash_equals($_SERVER["HTTP_X_CSRF_TOKEN"], $newToken)) {
// CSRF 验证失败
}3. 使用 cookie-to-header 令牌
cookie-to-header 令牌模式利用 JavaScript 将 Cookie 中的令牌移动到请求头中。
客户端代码：
const cookieToken = document.cookie.match(/csrftoken=([^;]*)/)[1];
$.ajax({
method: "POST",
url: "/api/submit-form",
data: { data: "value" },
headers: {
"X-CSRFToken": cookieToken
}
});服务器端代码：
// 验证请求头中的令牌
$token = $_SERVER["HTTP_X_CSRFTOKEN"];
// 验证令牌
// ...浏览器原生的 CSRF 保护
现代浏览器已经实现了原生的 CSRF 保护措施，例如：
- SameSite Cookie 属性：此属性限制 Cookie 只能在同源请求中发送。
- Referer Header Referrer Policy：此策略控制浏览器发送 Referer 头信息的方式，可以防止跨源请求向恶意网站发送敏感数据。
结论
通过使用 JavaScript 来实现 CSRF 预防措施，网站开发人员可以提高网站的安全性，抵御恶意攻击。推荐使用双向同步令牌模式，因为它提供了最强的保护。此外，采用浏览器原生的 CSRF 保护措施也可以进一步增强安全性。通过遵循这些最佳实践，开发人员可以确保其网站免受 CSRF 攻击的侵害。
