使用 Express API 和 React 前端防止 CSRF

Question

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

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

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

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

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

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

显然 localStorage 也是个坏主意……

我真的很难使用我正在实施的工具（即 Express/React）找到解决此问题的方法

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

Answer 1

我了解服务器生成 CSRF 令牌很常见

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

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

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

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

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

原计划是使用 Redux 来存储 token

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

显然 localStorage 也是个坏主意……

是的

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

链接
与 Express 一起使用 this 中间件是很常见的。步骤可以在here找到。

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

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

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

我想学习在构建应用时考虑到安全性

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