如何在浏览器中存储 JWT？答案

【问题标题】：How to store JWT in browser?如何在浏览器中存储 JWT？
【发布时间】：2017-10-21 03:09:45
【问题描述】：

我是第一次使用 JSON Web Tokens (JWT)。我正在使用 Hydra-Express 框架制作 Node.js 应用程序。我想使用 JWT 进行身份验证。根据文档，我将 JSON 令牌返回到前端。

var tokenData = {
    username: req.body.username,
};

var result = {
    username: req.body.username,
    token: jwt.sign(tokenData, 'secret', { expiresIn: 60 * 60 })
};

res.json(result);

但我不知道如何将此 JSON 令牌保存到我的浏览器标头中，以免它丢失并与标头一起再次发送到后端。每次向后端发送请求时，如何将其保存在我的浏览器存储中并将其添加到请求标头中？

【问题讨论】：

如果你愿意，你可以使用 cookie、localStorage，甚至是 WebSQL，我猜任何浏览器存储都可以。尽管如此，我还是建议你阅读这篇文章：cryto.net/~joepie91/blog/2016/06/13/stop-using-jwt-for-sessions

标签： javascript json node.js jwt

【解决方案1】：

基于 Chris 的回答：

JWT 永远不应存储在您的 localStorage 中
事实上，它们甚至不应该存储在您的 cookie 中，除非您能够实施非常严格的 CSRF 保护

Checkout this for motivation

作为 id_token 的 JWT 就像您的用户凭据
JWT 作为 access_token 就像你的会话令牌

最安全的选项是内存中。 Checkout this for a deep dive

【讨论】：

【解决方案2】：

安全建议：

尽量简短： cookie（仅限 http 和安全标志）易受 CSRF 攻击，但不受 XSS 攻击。本地存储中的 JWT 易受 XSS 攻击，但不受 CSRF 攻击

您能做的最好的事情就是将风险降到最低：将 JWT 存储在 cookie 中在本地存储中存储一个 csrf_token

使其无状态：在 JWT 负载中包含 csrf_token 并检查服务器端是否 JWT csrf_token 和从 localstorage 读取并在 header 中提供的 csrf_token 匹配。

这需要攻击者通过 XSS 获取 csrf_token（例如，您在您的站点中使用了受感染的第 3 方 js 库或未应用卫生设施）然后他需要用 csrf_token 触发一个 csrf 请求（例如嵌入 img src 标签或网页/电子邮件中的表单）

这种组合使攻击者更难（但并非不可能）。

它提供与使用 csrf_tokens 的基于会话的普通身份验证相同的安全级别，但不需要状态。

【讨论】：

【解决方案3】：

当它回来时，将整个令牌存储在 sessionStorage 中

sessionStorage.token = json.access_token;

要访问有效负载，请将 jwt 令牌拆分为其 header.payload.signature 部分并仅获取有效负载

var enc = json.access_token.split(".")[1];

然后解析base64

var payload = JSON.parse(window.atob(enc));

然后您就可以抓取并使用经过验证的有效载荷数据 payload.sub、payload.role ...等

【讨论】：

【解决方案4】：

您可以使用 HTML5 网络存储 或 cookie 来存储您的 JWT 令牌，并在您想将请求发送到 web api 时从中读取。

此link 将帮助您确定最适合您的应用的匹配项。

希望对你有帮助！！

【讨论】：