ReactJS 和 DRF:如何将 JWT 令牌存储在 HTTPonly cookie 中?

IT技术 reactjs django-rest-framework jwt django-react
2021-05-10 10:31: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 令牌发送。我的理解是将这些令牌存储在本地存储中不是很安全。

那么如何将它们存储在 httpOnly cookie 中呢?或者有没有更好的方法来处理这个问题?

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

1个回答

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

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

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

请参阅此讨论:链接到 reacjs subreddit