我正在开发一个 React 应用程序，正在考虑实现 CSRF 缓解技术。我决定使用同站点cookie，但在此之前，我正在研究使用CSRF令牌，并阅读了许多帖子，说它们应该存储在隐藏的表单字段中。我想知道的是，将其存储在隐藏字段中和将其存储在类变量之类的东西中是否有区别？如果它的重点是在准备向服务器发送请求时保留某个位置，那么它在客户端的存储方式是否重要？
CSRF 令牌存储在隐藏输入中的原因是，在提交表单时它会自动发送到服务器。如果您手动向服务器发送请求并自己获取数据，则可以将 CSRF 存储在任何地方。最好保持一致，并将其存储在隐藏的输入中。
其他答案是正确的，因为对于您在某处找到的教程(或 csrf 上的通用教程(，使用在表单字段中编写的令牌更容易演示它，传统的 Web 应用程序也将以这种方式工作。
其他人没有提到的是现代单页应用程序(如带有 React 的应用程序(不能那样工作，通常您甚至没有表单，将令牌写入表单字段是没有意义的。因此，这些应用程序通常不会这样做。
这还有一个实际方面。您提到将其存储在类变量中。这很好，但它将如何到达那里？令牌通常(不一定，但目前是旁白(由服务器端 Web 应用生成。javascript SPA将如何获得它？您需要将其写入页面中的某个位置，花费单独的请求来获取它将浪费资源。通常发生的一件事是将其写入元标头中(例如。<meta name="csrf" content="...">(，以便您的SPA可以从那里读取它并将其存储在任何想要的地方。
经常发生的另一件事是甚至不需要 csrf 保护，因为 api 身份验证基于请求标头之类的东西(而不是 cookie 中的内容(，浏览器不会自动发送，因此经典的 csrf 是不可行的。
如果您将其放在表单字段中，那么一切通常都可以正常工作，但是如果您将值放在其他任何地方，则必须编写逻辑来提取该值并将其插入回正在发送到服务器的表单数据中。
使用表单字段也适用于 ajax 和标准表单提交，因此大多数教程都会将其推广到仅适用于其中一种的方法上。