使用 Express API 和 React 前端防止 CSRF

Question

在过去的几天里，我一直在阅读有关 CSRF 的内容，感觉我已经很好地掌握了它是什么以及如何预防它。我正在构建一个小型 Express/React 应用程序，它将有一个用于更新应用程序内容的安全管理区域，并且我希望它能够免受 CSRF 的影响。

据我所知，服务器生成 CSRF 令牌然后将其与请求的视图（页面）一起发送到客户端（然后可以将令牌隐藏在 HTML 表单输入标记中）是很常见的。但是，我的 Express API 不提供 HTML 服务，它是一个仅返回 JSON 数据的 REST API。UI 是用 React 构建的，运行在与服务器不同的端口上。

我的问题是；在哪里安全地存储服务器上生成的令牌？

例如，如果我通过点击“/api/login”以管理员身份登录，生成令牌，并在 API 响应中将其发送回客户端，那么我现在应该如何处理它？

最初的计划是使用 Redux 来存储 token，但是阅读这篇文章Is Redux secure? ，这听起来并不理想。

我考虑过使用 React 环境变量，但也了解到这些变量在构建中公开。

显然 localStorage 也是一个坏主意......

我真的很难使用我正在实现的工具（即 Express/React）找到这个问题的解决方案

任何帮助、链接、建议、批评将不胜感激，我想学习构建考虑到安全性的应用程序

Answer 1

据我了解，服务器生成 CSRF 令牌是很常见的

服务器需要生成两个CSRF令牌

然后将其与已请求的视图（页面）一起发送到客户端（然后可以将令牌隐藏在 HTML 表单输入标记中）。

一个令牌通常作为 cookie 发送，另一个令牌可以作为 HTTP 标头发送。尽管可以通过这种方式发送，但不需要将其作为 HTML 表单输入标记（或正文的任何​​其他部分）发送到 HTML 正文内。

我的问题是；在哪里安全地存储服务器上生成的令牌？

您不必在服务器上存储令牌。你可以，但你不需要。

原计划是使用Redux来存储token

Redux 存储位于客户端的浏览器内存中。理论上，一个 React 组件（从服务器响应中提取第二个 CSRF 令牌）可以临时将令牌存储在存储中，以便另一个 React 组件可以从那里获取它并在发送到服务器之前将其放入下一个请求中。

显然 localStorage 也是一个坏主意......

是的

任何帮助、链接、建议、批评将不胜感激，我想学习构建考虑到安全性的应用程序

Links
With Express 使用这个中间件是很常见的。可以在此处找到这些步骤。

批评
严格来说，这在 CSRF 相关 Q/A 的背景下是偏离主题的，但是......

UI 是用 React 构建的，运行在与服务器不同的端口上。

react-scripts这暗示了使用which start的可能性webpack-dev-server。它适合开发，但不适合生产中的部署。然而，这是一个单独的主题，向 Web 客户端提供 React 应用程序的构建工件（.html 文件、脚本包）与 CSRF 攻击及其缓解措施无关。

我想学习构建考虑安全性的应用程序

那么您可能会考虑使用一台网络服务器而不是两台（前端为 React 应用程序提供服务，后端为 API 响应提供服务）。使用一台服务器进行生产部署，不仅复杂性和成本更低，而且更安全，因为两台服务器具有更大的攻击面，并且使用一台服务器，您不需要通过使用 CORS 来削弱安全性。