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