CSRFTOKEN 未在隐身模式下定义

Question

我正在开发一个应用程序，其后端在 django 上，前端在 React 上。我现在面临的问题是

csrftoken

。我的所有表单都是使用普通浏览器提交的，但如果我使用

Incognito

模式，我无法提交请求，因为

csrftoken is not found

。

我用来接收

csrftoken

的功能：

const getCsrfToken = () => {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; csrftoken=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
};

我知道我可以在视图上使用

@csrf_exempt

，但我想保证我的应用程序的安全。即使用户使用隐身模式，有没有办法生成 csrftoken？

Answer 1

在 Django 中，CSRF 令牌通常作为隐藏输入字段包含在 HTML 表单中，并且由 Django 的中间件自动生成和管理。但是，在您的 React 前端中，您需要在请求中手动包含 CSRF 令牌，特别是在您发出 AJAX 请求或 API 调用时。

确保 CSRF 令牌在您的 HTML 模板中可用。在 Django 模板中，您可以使用 {% csrf_token %} 模板标记包含 CSRF 令牌。例如：

<form method="post">
    {% csrf_token %}
    <!-- Other form fields -->
    <button type="submit">Submit</button>
</form>

在 React 前端中，当您发出 AJAX 请求或 API 调用时，您需要在请求标头中包含 CSRF 令牌。您可以从 HTML 中提取 CSRF 令牌并将其包含在内，如下所示：

const csrftoken = getCsrfToken();

const requestOptions = {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrftoken // Include the CSRF token in the headers
    },
    body: JSON.stringify({ /* Your request data */ })
};

fetch('/your-api-endpoint/', requestOptions)
    .then(response => response.json())
    .then(data => {
        // Handle the response data
    })
    .catch(error => {
        // Handle errors
    });

通过在请求标头中包含 'X-CSRFToken': csrftoken，您将随 AJAX 请求一起发送 CSRF 令牌，这允许 Django 验证 CSRF 令牌并防止跨站点请求伪造 (CSRF) 攻击。

此方法应该在常规和隐身模式下都有效，因为它不依赖于 cookie。它在请求标头中显式发送 CSRF 令牌，确保 CSRF 保护机制按预期工作。