时间戳

首页 > 解决方案 > 使用 Http 和 Secure 将 Jwt 令牌存储在 Cookie 中，而不是 Javascript 中的 LocalStorage

javascript - 使用 Http 和 Secure 将 Jwt 令牌存储在 Cookie 中，而不是 Javascript 中的 LocalStorage

问题描述

美好的一天，伙计们，

我正在开发一个具有 Web API（RestAPI）和 SPA（单页应用程序）解决方案的项目。

根据我在 Udemy 上关注的视频，他将 jwt 令牌存储在 localstorage 中，但后来我发现存储在 localstorage 中有点冒险，因为攻击者可以复制实际令牌并在将来发出请求。

我读过一些博客，将令牌存储在 cookie 中很好，因为您可以将 cookie 设置为 httpOnly 和安全。但问题是，我不知道如何实现它。

当用户具有有效登录时，这是我的示例代码：

axios.post('api/login/', this.account).then(response=>{
    if(response){
        localStorage.setItem('token', response.data.token); // will successfully save to localstorage
        // navigation here
    }
}).catch(error=> console.log(error); );

如何使用安全设置将其存储在 cookie 中？

标签： javascriptcookiesjwt

解决方案

您不能从客户端代码（如 Javascript）设置 HttpOnly cookie。因此，此类 cookie 不得使用 Javascript 读取。您必须从服务器设置此类 cookie。您可以发送带有服务器响应的 cookie，浏览器将从标题中读取它们来存储它们。之后，浏览器会将该 cookie 发送到服务器，并将每个请求发送到服务器，直到 cookie 过期。

您可以从服务器设置cookie如下..

Cookie cookie = new Cookie(name, value); //name and value of the cookie
cookie.setMaxAge(expire); //expire could be 60 (seconds)
cookie.setHttpOnly(true);
cookie.setPath("/");
response.addCookie(cookie);

推荐阅读