Angular 对 JWT 使用展位 cookie 或拦截器有用吗？

Posted 2023-03-10

【中文标题】Angular 对 JWT 使用展位 cookie 或拦截器有用吗？

【英文标题】：Angular is it useful to use booth cookie or interceptor for JWT?

【发布时间】：2020-08-09 12:23:13

【问题描述】：

我有一个只能通过身份验证访问的后端 api。这是通过JSON web Token (JWT) 提供的，一旦提供了正确的凭据对。

现在我正在使用 Angular 9 为我的应用开发前端。登录由 auth.service 管理，如果提供了正确的凭据，它将返回 JWT。

在对服务器的第一个请求（登录请求）之后，我设置了一个interceptor，用于将 JWT 的值插入到对 api 的后续请求中。现在，我的一位同事说我们必须将令牌值存储在浏览器的 cookie 中。

对我来说，我找不到任何理由这样做：如果我们已经有了拦截器来验证请求，为什么还要在浏览器中存储凭据？

【问题讨论】：

因为如果你刷新页面，你的令牌就会消失..？

【参考方案1】：

编辑

我刚刚再次阅读了您的问题，您根本没有提到 localStorage。因此，如果您的 JWT 只存储在内存中，那么当您刷新页面时它就会丢失，就像 MikeOne 在他的评论中所说的那样

结束编辑

如果您已经在使用 localStorage，一个正当的理由是您打算使用 Angular Universal 进行服务器端渲染。

如果您渲染图像服务器端，则本地存储不存在，因此您的 api 调用将不包含 JWT 令牌。

这意味着即使您已经登录，服务器响应也可能会将您重定向到登录页面，或者您可能会在连接用户仅内容显示客户端之前短暂看到页面的公共版本

关于安全方面的事情，看看this SO answer

【参考方案2】：

JWT 令牌用于允许 Angular 应用程序执行仅允许经过身份验证的用户的 http 请求。

因此，在用户通过身份验证后，您将需要 JWT。

然后，拦截器可用于查看 HTTP 请求在执行之前是否具有 JWT，以及是否将其添加到 HTTP 请求中。

现在，问题是：我将 JWT 存储在应用程序的什么位置，以便在每次需要向后端服务器发出 HTTP 请求时不向用户请求身份验证？

您有两种选择：本地/会话存储（出于安全考虑不推荐）和 Cookie。

大多数 Angular/Web 课程或博客都展示了使用本地/会话存储的示例，但由于安全问题不推荐使用。这是一个很好的解释： https://dev.to/rdegges/please-stop-using-local-storage-1i04

因此，存储 JWT 的最佳位置是 cookie。

【参考方案3】：

所以有几种方法可以回答这个问题：

这一切都归结为安全性。因此，如果您将 JWT 令牌（应该始终不是长期存在的数据）存储在 LocalStorage/SessionStorage 或 Cookie 中。

不同之处在于可以从您域中的每个 javascript 文件访问 LocalStorage/SessionStorage，如果处理不当，可能会产生跨站点脚本 (XSS) 安全问题。为了防止自己受到 XSS 攻击，我建议对所有不受信任的数据进行转义和编码。

所以实际上所有从前端到后端的通信。在 SPA 世界中，永远不要插入来自前端的数据并始终在后端检查它是一个标准。

对于使用 HttpOnly 时的 Cookie，这些 Cookie 无法通过 JavaScript 访问。还要确保设置 Secure 标志，所以这个 cookie 只能通过 HTTPS 发送（不用动脑筋）。当然 Cookies 也有其安全问题，你需要防止跨站请求伪造 (CSRF)。 如果您想了解更多信息，请阅读在您的 JWT 声明中添加 XSRF-TOKEN。

简而言之，我还建议使用 cookie 而不是 LocalStorage/SessionStorage。

一些有趣的读物：

https://blog.angular-university.io/angular-jwt-authentication/ https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage