authentication - 如何使用 HttpOnly 身份验证会话 cookie 保护 SPA 中的路由？

Question

我正在开发一个 SPA (React) 应用程序，我想使用 cookie 实现身份验证以跟踪活动会话，并且仅在用户通过身份验证时才允许访问某些路由。

我想知道如何以遵循最佳实践的方式开发 SPA，以确保除非设置了会话 cookie，否则无法查看受保护的路由（需要用户身份验证的路由）。

我正在研究不同的身份验证解决方案，其中大多数似乎在成功身份验证后设置了一个具有以下属性的 HTTP cookie：SameSite、Secure 和 HttpOnly。身份验证解决方案将与 SPA 位于同一域中，因此 SameSite 对我来说很有意义。该域具有 SSL 证书，因此通信将通过 HTTPS 进行，因此安全对我来说很有意义。

但是，由于 SPA 是 javascript，它无法访问 HttpOnly cookie，因此也无法访问会话 cookie。

我可以看到这个问题的一些可能的解决方案：

1. 从需要设置会话 cookie (/app) 的 NodeJS 应用程序路由提供 SPA：

在认证服务成功认证后，将用户重定向到 NodeJS 应用程序的 /app 端点，然后验证浏览器发送的 cookie。如果 cookie 有效，则提供 SPA。如果没有，请重定向到身份验证服务登录屏幕。

这种方法是我认为大多数 SSR Web 应用程序用于其每个路由的方法。但是，由于这是一个 SPA，它只需要在为应用程序服务的顶级路由上完成。

2. 从身份验证服务禁用会话 cookie 上的 HttpOnly 标志

我还没有对此进行深入研究，但如果可以这样做，它会将 SPA 开放给 XSS 攻击，这是我想避免的。

这些方法中的任何一种都是正确的方法吗？我意识到有多种方法可以解决这个问题，但我怀疑存在解决这个问题的最佳实践，因为它在当今许多作为 SPA 开发的 Web 应用程序中很常见。

最后一个问题——关于 HttpOnly、Secure 和 SameSite cookie，我意识到 Chrome、Firefox、Safari 和 Edge 等浏览器会阻止人们创建具有这些属性的 cookie。但是，是否有人可以在流行的浏览器之外以某种方式创建具有这些属性的 cookie，从而访问需要用户通过身份验证过程的 Web 应用程序？

标签： authenticationcookiessingle-page-application