AJAX 如何在静态网站上防御CSRF攻击

在本文中，我们将介绍如何在一个静态网站中防御跨站请求伪造（CSRF）攻击。CSRF攻击是一种常见的网络攻击方式，通过利用用户已经登录过的身份，在用户不知情的情况下发送恶意请求。AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术，也容易受到CSRF攻击。因此，在使用AJAX的静态网站中，保护用户免受CSRF攻击是至关重要的。

阅读更多：AJAX 教程

什么是CSRF攻击？

CSRF攻击是在用户进行一些操作时，如点击一个链接、提交一个表单等，利用用户已经登录的身份发送未经授权的请求。攻击者会在自己的网站上插入一个恶意链接或表单，当用户点击或提交时，就会触发恶意请求。这样一来，攻击者就能够在用户不知情的情况下执行恶意操作，如以用户身份发送付款请求、修改密码等。

CSRF攻击的原理

CSRF攻击利用了浏览器对网站认证的方式以及浏览器对Cookie的自动发送。当用户登录一个网站时，网站会在用户的浏览器中设置Cookie，用于保存用户的登录状态。当用户发送请求时，浏览器会自动发送对应的Cookie。攻击者通过欺骗用户点击或提交恶意请求，利用浏览器自动发送对应的Cookie来伪装成用户发送请求。

防御CSRF攻击的方法

1. 同源检测

在AJAX请求中，可以对请求目标的源进行检测，确保请求来源于同一个源。同源检测可以通过检查请求的Referer字段来进行，这个字段会告诉服务器请求的来源地址。如果请求的来源地址与当前页面的地址不同，服务器可以拒绝该请求。

if (request.getHeader("Referer") != null && !request.getHeader("Referer").startsWith("https://example.com")) {
    throw new SecurityException("Invalid request origin");
}

2. 加入CSRF令牌

在网站的每个请求中加入一个CSRF令牌（Token），并在每个请求中验证该令牌的有效性。CSRF令牌是一个随机生成的字符串，每次请求时会嵌入到请求参数或请求头中。服务器在接收到请求后会验证CSRF令牌的有效性，如果验证失败则拒绝该请求。

<script>
    var csrfToken = generateCSRFToken();
    var request = new XMLHttpRequest();
    request.open("POST", "https://example.com/api/update");
    request.setRequestHeader("X-CSRF-Token", csrfToken);
    request.send();
</script>

服务器端的代码示例：

String csrfToken = request.getHeader("X-CSRF-Token");
if (!validateCSRFToken(csrfToken)) {
    throw new SecurityException("Invalid CSRF token");
}

3. 设置SameSite属性

设置Cookie的SameSite属性为Strict或Lax可以阻止跨域请求发送对于Cookie的自动发送。Strict模式下，浏览器只会在完全同源的情况下发送Cookie，而Lax模式下会在同源但通过链接跳转的情况下发送Cookie。这样一来，即使请求是恶意的，由于无法携带Cookie，服务器也能够判断出该请求是非法的。

Set-Cookie: sessionid=0123456789abcdef; SameSite=Strict; Secure; HttpOnly

4. 随机生成请求参数

为每个请求生成一个随机的请求参数，并将该参数嵌入到请求中。服务器在接收到请求后会验证请求参数的有效性，如果验证失败则拒绝该请求。这种方法可以有效地区分合法请求和非法请求。

<script>
    var requestParam = generateRequestParam();
    var request = new XMLHttpRequest();
    request.open("POST", "https://example.com/api/update?param=" + requestParam);

    // 发送请求
    request.send();
</script>

服务器端的代码示例：

String requestParam = request.getParameter("param");
if (!validateRequestParam(requestParam)) {
    throw new SecurityException("Invalid request parameter");
}