在 JavaScript 中获取 CSRF 令牌

CSRF（Cross-Site Request Forgery ）攻击是一种常见的攻击方式，通常会利用被攻击站点的 Cookie，向其他站点发送假冒的请求。为了防御此类攻击，很多 Web 应用程序会使用 CSRF 令牌来验证用户的请求。

在使用 JavaScript 开发 Web 应用程序时，如何在客户端获取并使用 CSRF 令牌呢？下面将介绍几种方法。

1. 从 Cookie 中获取

一些 Web 应用程序会将 CSRF 令牌存储在 Cookie 中，这时候可以通过 JavaScript 读取 Cookie 的值来获取令牌。

以下是一个简单的 getCookie 函数，用于获取指定名称的 Cookie 值：

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) {
    return parts.pop().split(';').shift();
  }
}

获取 CSRF 令牌的代码如下：

const csrfToken = getCookie('csrf_token');

请注意，如果 CSRF 令牌存储在 HttpOnly Cookie 中，则无法通过 JavaScript 访问。

2. 从 HTML 属性中获取

有些 Web 应用程序会将 CSRF 令牌作为 HTML 属性的值，在需要提交请求的表单中包含该属性。

例如：

<form method="POST" action="/submit">
  <input type="hidden" name="csrf_token" value="abcdef123456">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Submit</button>
</form>

在 JavaScript 中获取 CSRF 令牌的代码如下：

const csrfToken = document.querySelector('input[name="csrf_token"]').value;

3. 从 HTTP 头部中获取

有些 Web 应用程序不会将 CSRF 令牌存储在 Cookie 或 HTML 属性中，而是在每个请求的 HTTP 头部中包含令牌的值。

这需要在服务器端生成 CSRF 令牌，并将其作为响应头或 JavaScript 代码的一部分发送给客户端。客户端在发起请求时需要在 HTTP 头部中带上 X-CSRF-Token 字段。

例如：

fetch('/submit', {
  method: 'POST',
  headers: {
    'X-CSRF-Token': 'abcdef123456'
  },
  body: new FormData(document.querySelector('form'))
})

在这种情况下，JavaScript 代码中需要提前获取 CSRF 令牌值，才能在发起请求时设置 HTTP 头部。获取 CSRF 令牌的代码通常需要通过 Ajax 请求获得。

总结

总之，获取 CSRF 令牌的方式取决于具体的 Web 应用程序实现。需要注意的是，不管从哪里获取 CSRF 令牌，都应该确保令牌值的安全性，避免被攻击者窃取和利用。