如何将 JWT 存储在 HttpOnly Cookie 中？答案

【问题标题】：How to store JWTs in HttpOnly Cookies?如何将 JWT 存储在 HttpOnly Cookie 中？
【发布时间】：2020-12-09 03:09:04
【问题描述】：

我目前正在开发一个 React-Django 应用程序并使用 JWT 进行身份验证。

经过一番研究，我发现将 JWT 存储在客户端是不安全的（XSS 和 XSRF），大多数人建议我应该使用 HttpOnly cookie 将它们存储在服务器端，但没有人告诉如何去做。那么有人可以帮忙吗？

我得到 jwt-cookies 作为响应，但它没有保存在浏览器中。

【问题讨论】：

标签： python django reactjs authentication jwt

【解决方案1】：

您可以使用set_cookie() 方法设置cookie。

例如：

...
response = Response(serializer.data)
response.set_cookie('token', serializer.data['token'], httponly=True)
return response

关于在哪里存储 JWT（以及如何存储）here 的好文章。

【讨论】：

好吧，我正在使用 dj-rest-auth 包和 settings.py 如果我启用 REST_USE_JWT = True 它会自动使用此方法响应 jwt cookie。(github.com/jazzband/dj-rest-auth/blob/master/dj_rest_auth/…) 所以我得到了 jwt响应cookie部分中登录请求后的cookie，但未保存在浏览器中，因此刷新页面后它消失了。
嗯，也许this 的问题会有所帮助。
不幸的是我已经尝试过了。也许我应该手动完成，而不是让 dj-rest-auth 的标准代码完成这项工作。

【解决方案2】：

我遇到了同样的问题。这里同站点标志是“Lax”或“strict”，因此 cookie 被浏览器阻止。因为跨站响应没有设置cookie。

因此，在开发过程中，您必须将后端和前端托管在同一 IP 下。前任。我的后端：

python manage.py runserver localhost:8000

本地主机：8000

前端：

本地主机：3000

不同的端口相同的ip。

这不是投入生产的场景，您可以拥有任何域。 For more detail.

WithCredentials = true 双方..

【讨论】：

【解决方案3】：

好吧，我犯了一个愚蠢的错误，所以从这里移动{withCredentials:true} =>

export const login = (username, password) => dispatch => {
    //Headers
    const config = {
        headers: {
            "Content-type": "application/json"
        }
    }

    //Request body
    const body = JSON.stringify({ username, password })

    axios.post("http://127.0.0.1:8000/auth/login/", body, config, {withCredentials: true})
        .then(res => {
            dispatch({
                type: LOGIN_SUCCESS,
                payload: res.data
            })
        }).catch(err => {
            console.log(err)
            dispatch({
                type: LOGIN_FAIL
            })
        })
}

到这里 =>

    //Headers
    const config = {
        headers: {
            "Content-type": "application/json"
        },
        withCredentials: true
    }

解决了我的问题。

【讨论】：