ReactJS 和 DRF：如何将 JWT 令牌存储在 HTTPonly cookie 中？答案

【问题标题】：ReactJS and DRF: How to store JWT token inside HTTPonly cookies?ReactJS 和 DRF：如何将 JWT 令牌存储在 HTTPonly cookie 中？
【发布时间】：2021-02-11 14:43:19
【问题描述】：

目前，我的 Web 应用程序具有登录功能，在我发出登录请求后，服务器会使用包含 2 个令牌的 JSON 对象进行响应：

这是登录功能：

async function login() {
    const data = {
            "email": "user1@gmail.com",
            "password": "testPassword123"
        }
    const response = await Backend.post('auth/login/', data)
    console.log(response.data)
}

这是回应：

{
"access": "access_token_here",
"refresh": "refresh_token_here" 
}

根据 Postman 的说法，这个响应还包含 3 个 cookie：

1) access_token=access_token_here; Path=/; Domain=localhost; HttpOnly; Expires=Thu, 29 Oct 2020 06:49:56 GMT;
2) csrftoken=csrf_token_here; Path=/; Domain=localhost; Expires=Thu, 28 Oct 2021 06:44:56 GMT;
3) sessionid=session_id_here; Path=/; Domain=localhost; HttpOnly; Expires=Thu, 12 Nov 2020 06:44:56 GMT;

要向服务器中的受保护端点发出请求，我可以将 access_token 作为 cookie 或作为 Bearer 令牌发送。我的理解是，将这些令牌存储在 Local Storage 中并不是很安全。

那么如何将它们存储在 httpOnly cookie 中？或者有没有更好的处理方法？

我的后端服务器正在使用 Django Rest Framework。

【问题讨论】：

标签： reactjs django-rest-framework jwt django-react

【解决方案1】：

我猜你想设置 httpOnly cookie，因为它会比在 localStorage 中设置令牌（令牌）更安全？

最安全的方式是将令牌仅存储在内存（状态）中，而不是将其存储在 cookie 或 localStorage 中。每次页面刷新后，强制用户重新登录。这就是银行网站的运作方式。

如果您需要将令牌存储在客户端（您不想在每次刷新后强制登录），那么我建议您使用 localStorage 而不是 cookie。 React 本身受到 XSS 保护。但是，如果存在 XSS，那么当然，localStorage 数据很容易读取，而且 cookie（甚至 httpOnly）中的数据也可以被利用（通过发送带有可用 cookie 的请求）。 localStorage 和 cookie 都容易受到 XSS 的攻击，但正如我所写的，React 具有针对 XSS 的保护。使用 localStorage 也更容易实现。

请参阅此讨论：link to reacjs subreddit。

【讨论】：

【解决方案2】：

您可以使用 set_cookie(key,value,https=True) 进行设置，并在 react 的请求中使用 {withcredentials=true} 你可以参考这篇文章这篇文章 https://www.procoding.org/jwt-token-as-httponly-cookie-in-django/

【讨论】：