Javascript 为什么csrf令牌'；它通常存储在隐藏的表单字段中？

我正在开发React应用程序，正在考虑实施CSRF缓解技术。我决定使用同一个站点cookie，但在此之前，我正在研究使用CSRF令牌，并阅读了许多帖子，说它们应该存储在一个隐藏的表单字段中。我想知道的是，将其存储在隐藏字段和存储在类变量中是否有区别？如果它的目的是为了在您准备好向服务器发送请求时保留某个位置，那么它在客户端的存储方式是否重要？

如果您将其放在表单字段中，则通常一切正常，但是，如果将该值放在其他任何位置，则必须编写逻辑来提取该值，并将其插入发送到服务器的表单数据中

---

使用表单字段也适用于ajax和标准表单提交，因此大多数教程都会将其推广到只适用于其中一种或另一种的方法。

将CSRF令牌存储在隐藏输入中的原因是，当表单提交时，它会自动发送到服务器。如果您手动向服务器发送请求并自己获取数据，则可以将CSRF存储在任何位置。最好保持一致，并将其存储在隐藏的输入中。

其他答案是正确的，因为对于您在某个地方找到的教程（或csrf上的通用教程），使用在表单字段中编写的令牌更容易演示，而且传统的web应用程序也可以这样工作

其他人没有提到的是，像React这样的现代单页应用程序不是这样工作的，通常您甚至没有表单，并且将令牌写入表单字段没有任何意义。因此，这些应用程序通常不会这样做

这也有一个实际方面。您提到将其存储在类变量中。那很好，但它如何到达那里呢？令牌通常由服务器端web应用程序生成（不一定，但目前这只是一个旁道）。javascript SPA将如何获得它？你需要把它写在页面的某个地方，花一个单独的请求来获取它会浪费资源。通常会发生的一件事是将其写入页面顶部的元标题（例如，

），这样您的SPA就可以从那里读取它，并将其存储在任何需要的地方

---

另一件经常发生的事情是，甚至不需要csrf保护，因为api身份验证基于请求头之类的东西（而不是cookie中的东西），浏览器不会自动发送这些东西，所以经典的csrf是不可行的。

这是有道理的。这样做更方便。但是如果你没有表格呢？假设您只有一个按钮，当您单击它时，它对数据库进行了某种更改，但不一定对表单进行任何输入。那么将CSRF存储在其他地方是否更合适呢？我仍然会使用隐藏的输入，并通过编程从输入中获取值，即使没有完整的表单。如果您不想这样做，我会将其存储为数据属性。我只是不想把它存储为类，所以你建议在页面的某个地方有一个隐藏的输入元素，不管它是否是表单的一部分？我不认为有一个输入存在于一个窗体之外，但是没有理由不知道如果你发送给服务器的数据不是从一个表单中得到的。这里我使用的表单数据意味着它是从表单元素获取的数据。但是，如果您只是有一个按钮，当单击它时，它会对数据库进行一些更改，那该怎么办呢？因此，不一定存在接受任何输入的表单。对于html，http请求的响应主体是页面本身。我们正在讨论页面中的位置。：）对于JSON响应，通常不需要显式的csrf保护，因为只有在浏览器自动发送身份验证信息（例如cookie中的sessionid）的情况下，才能利用csrf。如果您的应用程序将JWT作为请求头发送（例如授权），则无法利用CSRF。Http Basic auth除外。Http Basic auth在用户输入时会自动保存和发送，因此需要CSRF的保护。不知何故，您需要对请求进行身份验证，以便发送某种令牌。如果标题中有jwt，则不需要单独的csrf保护。如果是会话id或cookie中的jwt（或自动发送的任何内容），则需要不自动发送的csrf保护。所以为了防止csrf，你需要一些非自动的东西。要对请求进行身份验证，您需要一些适合于此的东西，这些东西可能（例如授权头中的jwt）也可能（例如会话cookie）本身可以防止csrf。另外，请注意，使用httponly cookie存储身份验证信息（会话id或jwt）比其他任何东西都更安全，因为它可以防止xss。如果您有一个基于cookie的解决方案，那么您应该实现单独的csrf保护，而不是将身份验证更改为基于令牌/报头的身份验证。我非常感谢您的解释。出于这个原因，我通常只将jwt存储在httponly cookie中。这就是为什么我没有考虑在头中发送它，因为我知道javascript无法访问它。在这种情况下，现在实现csrf令牌是有意义的，对吗？在这种情况下，您需要保护您的应用程序不受csrf的影响，是的。