对于 Angular 应用程序，我应该在哪里存储从身份验证服务器生成的 JWT 令牌？

Question

我有一个具有登录页面（用户名和密码）的应用程序。成功通过身份验证后，我会收到来自身份验证服务器的 access_token、到期、刷新令牌和其他声明。

我需要将这些令牌存储在浏览器中的什么位置，以便对于其他 API 请求，我可以拉取 access_token 并附加到 API 的标头？

将这些令牌存储在浏览器的 localStorage 中是否是好的做法和安全的？

因为当我们在开发者工具 (chrome) 中查看它们时，这些令牌是公开的。

Answer 1

简而言之，将令牌存储在本地存储中是可以的。

• 为什么？您需要了解XXS（跨站点脚本）攻击。只有在您的域上运行的 JavaScript 代码才能访问本地存储。当恶意 JavaScript 代码进入您的站点并从本地存储中窃取您的令牌时，就会发生 XXS 攻击。这些恶意代码从何而来？来源 1：CDN 和第三方库。不要使用粗略的第三方代码，你会没事的。来源 2：黑客使用<script> 标签在您的网站上发布恶意代码。您不必担心这一点，因为Angular 会忽略所有 <script>tag。
• 您可能听说过XSRF/CSRF（跨站点请求伪造）攻击。只在使用 cookie 存储令牌时担心这一点。当黑客向用户发送您网站的发布请求链接，并且用户点击它时，就会发生这种情况。由于浏览器总是发送同一域中的 cookie，因此黑客发布的请求会得到验证。

您可以自行搜索 XSS 和 XSRF。很有趣的话题。