如何将 Token 保存到本地存储？答案

【问题标题】：How to save Token to Local Storage?如何将 Token 保存到本地存储？
【发布时间】：2015-02-11 05:01:03
【问题描述】：

我正在为学校的一个应用开发登录系统。我可以注册一个保存到我的 azure documentDB 的用户。然后，我可以用用户登录。但它（令牌）永远不会被保存，因此我可以访问令牌......

登录脚本如下所示：

      var signin = function() {

            var tokenUrl = "http://localhost:15746/Token";
            var loginData = $("#userSignup").serialize();
            loginData = loginData + "&grant_type=password";
            $.post(tokenUrl, loginData).then(navigateToEvent);
                                                      
            return false;
        }

        $("#signup").click(signin);

我如何存储令牌？在本地存储中？怎么样？

【问题讨论】：

标签： javascript ajax access-token

【解决方案1】：

要将字符串保存在您使用的本地存储中

window.localStorage.setItem(key, value);

您可以稍后通过以下方式获取该值：

window.localStorage.getItem(key);

【讨论】：

我尝试过类似的方法。我真的不知道（或理解），将什么作为价值..！我确实知道 access_token 应该在那里..
如果您需要存储访问令牌，您可以使用window.localStorage.setItem('access_token', token)，然后当您要检索它时：window.localStorage.getItem('access_token')。
所以：$.post(tokenUrl, loginData).then(navigateToEvent);然后：window.localStorage.setItem('access_token', token);?
当我将 setItem 代码放在 post 方法下并运行“show”时。我以调试模式进入控制台窗口并编写您提供的 getItem 代码。控制台只返回“未定义”。我需要解析和填充吗？不应该是这样的：window.localStorage.setItem('access_token', tokenUrl.token)？所以它知道在哪里可以找到令牌？
将令牌放在本地存储中是否安全？无论如何，我们可以将令牌传递给定向页面吗？

【解决方案2】：

不要在本地存储中保存令牌。这不是一个好的风格，因为你对攻击者开放。我在搜索中找到了这个链接：https://medium.com/@benjamin.botto/secure-access-token-storage-with-single-page-applications-part-1-9536b0021321。

这是页面内部的一部分：

“建议不要在本地存储中存储任何敏感信息。” -OWASP 备忘单

“不要将令牌存储在本地存储中。” -Auth0：存储令牌的位置

“你在 CSRF 中是安全的，但你已经向更大的攻击向量敞开了大门……XSS。” Okta：JWT 很烂

“不要将 [JWT] 存储在本地存储（或会话存储）中。” LogRocket：JWT 认证最佳实践

“最好避免让 JavaScript 代码看到访问令牌。”基于浏览器的应用程序的 OAuth 2.0：当前最佳实践

【讨论】：

为什么像这样在 JS 中使用令牌很糟糕？黑客会做什么，登录到他自己的帐户？诸如 Google 之类的服务倾向于将帐户锁定到某些域，并且在受 HTTPS 保护时很难进行欺骗，对吧？