如何使用 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 应用程序？