在 ReactJS PWA 中使用 ExpressJS 代理到 API 后端实现 CSRF

mxs*_*xs2 5 csrf token express reactjs progressive-web-apps

我有以下设置:

  1. ReactJS PWA 前端应用程序,它使用服务工作者将源代码缓存到客户端。
  2. ExpressJS 反向代理,它中继将转到支持 API 的任何请求。这将处理登录过程并将令牌存储在服务器上并向客户端发送会话 cookie。cookie 是 HttpsOnly、SameSite、安全和签名。代理还会检查连接是否安全,引用者是否在白名单中,并且与主机完全匹配。
  3. 后端 API 位于具有 OAuth 登录保护的不同服务器上。

Express 在第一次加载时返回服务器端呈现的页面,然后 ReactJS 将该页面水合并用作 SPA。之后的每个文件都会缓存到浏览器中。

来自客户端应用程序的每个请求都使用相同的令牌处理,因为它们不是用户特定的操作。用户特定操作需要电子邮件和密码才能从 API 获取新的唯一令牌。

我的问题是:攻击者可以创建一个 cookie 并将其与 curl 请求一起发送到代理。这将绕过我的 ReactJS 应用程序,因为引用者和主机都可以伪造。

我想了解如何保护 ExpressJS 代理和 ReactJS PWA 之间的连接。

我正在考虑使用csurf 的CSRF,但这行不通。如果 PWA 作为应用程序安装在手机上,那么它只会在请求发送时访问代理。因此我无法设置 CSRF 标头。

如果我要在客户端访问服务器并使用 SSR 呈现页面时将 CSRF 令牌添加到第一个请求中,我只会设置该令牌一次,攻击者可以根据需要多次重复使用该令牌。

是否有正确的方法以某种方式将代理锁定到应用程序?

我无法在本地存储中存储任何内容,也无法将令牌硬编码到应用程序的源代码中。(它们是不安全的选择)

谢谢!