api 端点未在 Sanctum 上执行 CSRF 令牌验证 - CSRF 令牌不匹配

Laravel

使用 CSRF 令牌验证是一种常见的安全措施，可以防止跨站请求伪造攻击。在 Web 开发中，经常使用 Laravel 框架的 Sanctum 组件来实现身份验证和授权。然而，有时候在使用 Sanctum 进行 API 端点访问时，可能会遇到 "CSRF 令牌不匹配" 的错误。本文将探讨这个问题的原因，并提供解决方法。

在 Laravel Sanctum 中，CSRF 令牌验证是默认启用的。这意味着每次进行认证或授权的请求都需要提供一个有效的 CSRF 令牌，以确保请求的合法性。CSRF 令牌是由后端生成的，并存储在用户的会话中。每个请求都需要在请求头或请求参数中附带这个令牌，后端会验证令牌的有效性。

然而，当出现 "CSRF 令牌不匹配" 的错误时，意味着前端发送的 CSRF 令牌与后端存储的令牌不匹配。这可能是由于以下几个原因导致的：

1. CSRF 令牌过期：CSRF 令牌有一个有效期，如果请求发送的时间超过了令牌的有效期，后端会认为令牌无效。这可能是由于前端长时间未发送请求，导致令牌过期。

2. CSRF 令牌未正确传递：在进行请求时，需要将 CSRF 令牌正确地附加到请求头或请求参数中。如果令牌未正确传递，后端无法验证令牌的有效性，从而导致令牌不匹配的错误。

3. 跨域请求：如果请求是跨域的，即请求的来源与 API 端点的域名不一致，浏览器会进行预检请求（OPTIONS 请求），并在预检请求中不包含 CSRF 令牌。这会导致后端无法验证 CSRF 令牌，从而引发错误。

为了解决 "CSRF 令牌不匹配" 的问题，我们可以采取以下几个步骤：

1. 检查 CSRF 令牌的有效期

在前端代码中，我们可以检查 CSRF 令牌的有效期，并在令牌过期前及时更新令牌。这可以通过在用户登录或每次发送请求时，返回 CSRF 令牌的有效期信息，并在令牌即将过期时重新获取新的令牌。

下面是一个使用 AxIOS 发送请求并更新 CSRF 令牌的示例代码：

Javascript
axIOS.interceptors.response.use(response => {
  const newCsrfToken = response.headers['x-csrf-token']; // 从响应头中获取新的 CSRF 令牌
  if (newCsrfToken) {
    axIOS.defaults.headers['X-CSRF-TOKEN'] = newCsrfToken; // 更新默认的 CSRF 令牌
  }
  return response;
}, error => {
  return Promise.reject(error);
});

2. 确保正确传递 CSRF 令牌

在发送请求时，确保正确地附加 CSRF 令牌到请求头或请求参数中。具体的传递方式取决于后端框架的要求，可以查阅 Sanctum 的文档或后端 API 的说明来确定正确的传递方式。

下面是一个使用 AxIOS 发送请求并附加 CSRF 令牌的示例代码：

Javascript
axIOS.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('Meta[name="csrf-token"]').getAttribute('content');
axIOS.post('/api/endpoint', {
  // 请求体
})
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

3. 处理跨域请求

如果请求是跨域的，需要在后端进行相应的配置，以允许跨域请求包含 CSRF 令牌。具体的配置方法也取决于后端框架的要求，可以查阅 Sanctum 的文档或后端 API 的说明来进行相应的配置。

通过以上步骤，我们可以解决 "CSRF 令牌不匹配" 的问题，并确保安全地使用 Laravel Sanctum 进行 API 端点访问。记住，在开发过程中，及时更新令牌、正确传递令牌和处理跨域请求是保障安全性的重要措施。

希望本文对你理解和解决 "CSRF 令牌不匹配" 的问题有所帮助。如有其他问题或疑问，请随时向我们咨询。