目前,我的网络应用程序具有登录功能,在我发出登录请求后,服务器使用包含 2 个 token 的 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;
要向服务器中 protected 端点发出请求,我可以将 access_token 作为 cookie 或 Bearer token 发送。 我的理解是将这些 token 存储在本地存储中不是很安全。
那么如何将它们存储在 httpOnly cookie 中呢?或者有更好的方法来处理这个问题吗?
我的后端服务器使用的是 Django Rest Framework。
最佳答案
我猜你想设置httpOnly cookie是因为它会比在localStorage中设置 token (tokens)更安全?
最安全的方式是只将token存在内存(state)中,不存在cookies或localStorage中。每次页面刷新后,强制用户重新登录。这就是银行网站的运作方式。
如果您需要在客户端存储 token (您不想在每次刷新后强制登录),那么我建议使用 localStorage 而不是 cookie。 React 本身受到 XSS 保护。但是,如果存在 XSS,那么当然,localStorage 数据很容易读取,但 cookie 中的数据(甚至 httpOnly)也可以被利用(通过发送带有可用 cookie 的请求)。 localStorage 和 cookie 都容易受到 XSS 攻击,但正如我写的那样,React 具有针对 XSS 的保护。使用 localStorage 也更容易实现。
请参阅此讨论:link to reacjs subreddit .
关于ReactJS 和 DRF : How to store JWT token inside HTTPonly cookies?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64586312/