从响应标头中解析 Django CSRF 令牌答案

【问题标题】：Parsing Django CSRF token from response headers从响应标头中解析 Django CSRF 令牌
【发布时间】：2020-01-15 01:04:59
【问题描述】：

首先，我知道有很多关于 CSRF 令牌/Django 的问题，但我没有找到任何对我所处的场景有用的问题。

我正在尝试将 Django 的内置密码重置端点与 React 前端一起使用。我的目标是使用后端功能（生成令牌、电子邮件响应等），同时通过 React 而不是使用 Django 模板显示相关表单。前端和后端托管在两台不同的服务器上。

在我的前端代码中，当我的 React 组件挂载以获取 CSRF 令牌时，我调用了 password_reset 端点。

    componentDidMount() {
        let url = "http://(raw ip address)/accounts/password_reset/"

        fetch(url, {
            credentials: 'include',
        })
    }

令牌在响应标头中接收为

Set-Cookie: csrftoken=b...e; expires=Sun, 10 Jan 2021 21:50:20 GMT; Max-Age=31449600; Path=/; SameSite=Lax

这是我的问题开始的地方 - 我无法检查我的存储选项卡中的令牌，并且令牌值不存在于 document.cookie 中。理想情况下，我想使用类似于 Django 文档中演示的 getCookie 方法

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

但这假设令牌值正确存储在document.cookie中。

我的相关 Django 设置都是默认值，尽管我已经轮换了 CSRF_COOKIE_SAMESITE 和 CSRF_USE_SESSIONS 的有效选项，但无济于事。

另外注意，如果我在安装组件后发出POST 请求，则令牌已成功设置在请求上 - 但我需要在正文中添加默认 Django 身份验证视图的令牌！

任何建议或见解将不胜感激！

伊恩

【问题讨论】：

标签： csrf django-csrf csrf-token

【解决方案1】：

根据 Django 文档，如果您的视图没有呈现带有 csrf_token 标记的 html 模板，我猜是您的情况，因为您没有使用 Django 的内置模板进行输出，则不会设置 cookie。一种可能的解决方案是将您的视图调用包装到您的 urlpatterns 中的 ensure_csrf_token 装饰器。

【讨论】：

我没有修改 Django 的身份验证视图，所以它在技术上仍然呈现默认模板。我会更多地研究 ensure_csrf_token，但那时我觉得我最好重写身份验证端点。
对不起，我一开始没有完全理解你的问题。看起来问题不在 Django 端，因为它在响应中发送带有 csrftoken 的 Set-Cookie 标头。问题是，据我了解，设置 cookie 是浏览器的责任。当它首先收到 Set-Cookie 标头时，它会这样做，但在您的示例中，此标头是在您的 React 应用程序向后端发出的后续请求中发送的。因此，您必须在 React 应用程序中收到响应后手动设置 cookie。 js-cookie 库会很有帮助。
不幸的是 js-cookie 也不是一个有效的解决方案，因为它无法读取 cookie 的值 - 即 Cookies.get('csrftoken') === undefined 我假设 cookie 需要在 @ 之前通过 document.cookie 可见987654325@ 将接听。我最终在自定义视图中使用了 Django 的密码令牌生成器 - 目前它没有 csrf 保护，但它是用于测试目的的有效解决方案。