ReactJS和DRF:如何将JWT令牌存储在HTTPonly cookie中? [英] ReactJS and DRF: How to store JWT token inside HTTPonly cookies?

问题描述

当前，我可以在Web应用程序上使用登录功能，在发出登录请求后，服务器将使用包含2个令牌的JSON对象进行响应:

Currently, I have the login functionality working on my web app, after I make a login request the server responds with a JSON object that contains 2 tokens:

这是登录功能:

async function login() {
    const data = {
            "email": "[e-mail]",
            "password": "testPassword123"
        }
    const response = await Backend.post('auth/login/', data)
    console.log(response.data)
}

这是响应:

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

根据邮递员，此回复还包含3个Cookie:

According to Postman, this response also contains 3 cookies:

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令牌发送.我的理解是，将这些令牌存储在本地存储中不是很安全.

To make a request to a protected endpoint in the server, I can send the access_token as a cookie or as a Bearer token. My understanding is that storing these tokens in Local Storage is not very secure.

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

So how can I store them in httpOnly cookie? Or is there a better way of dealing with this?

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

My backend server is using Django Rest Framework.

推荐答案

我想您想设置httpOnly cookie，因为它比在localStorage中设置令牌(令牌)更安全吗?

I guess that you would like to set httpOnly cookie because it will be more secure than setting token (tokens) in localStorage?

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

The most secure way is to store token only in memory (state) and do not store it in cookies or localStorage. After every page refresh, force the user to login again. This is how bank's websites are working.

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

If you need to store the token on the client-side (you don't want to force login after every refresh) then I would recommend localStorage instead of cookies. React itself is protected against XSS. But if there will be XSS then, of course, localStorage data is easy to read but also data in cookies (even httpOnly) can be exploited (by sending requests with available cookies). Both localStorage and cookies are vulnerable to XSS, but as I wrote React has protection against XSS. Using localStorage is also easier in implementation.

请参阅以下讨论:链接到reacjs subreddit .

这篇关于ReactJS和DRF:如何将JWT令牌存储在HTTPonly cookie中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！