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

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

当前，我可以在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" 
}

根据邮递员，此回复还包含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令牌发送。我的理解是，将这些令牌存储在本地存储中不是很安全。

那么如何将它们存储在httpOnly cookie中？还是有更好的方法来解决这个问题？

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

解决方法

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

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

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

请参阅以下讨论：link to reacjs subreddit。