Question

我第一次使用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令牌保存到我的浏览器标题中，这样它就不会丢失，并再次与标题一起发送到后端。如何将其保存在我的浏览器存储中，并在每次将请求发送到后端时将其添加到请求标头中？

Answer 1

安全建议：

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

的攻击

您可以做的最好是将风险降至最低：将JWT存储在cookie中在localstorage中存储csrf_token

使其无国籍：在JWT有效负载中包含csrf_token，如果JWT csrf_token和从localstorage读取并在标头中提供的csrf_token匹配，则检查服务器端。

这需要攻击者通过XSS获取csrf_token（例如，您在网站中使用受到破坏的第三方js库或不应用卫生设施）然后他需要使用csrf_token触发csrf请求（例如，嵌入的img src标记或网页/电子邮件中的表单）

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

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

Answer 2

您可以使用 HTML5网络存储空间或 Cookie 来存储您的JWT令牌，并在您将请求发送到网络API时随时阅读。

此link可帮助您确定应用的最佳匹配。

希望它有所帮助!!

Answer 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 ... etc

Answer 4

基于克里斯的答案：

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

Checkout this for motivation

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

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

如何在浏览器中存储JWT？

4 个答案: