如何将CSRF令牌存储在React中？

Question

我在我的React页面中将CSRF令牌存储在哪里？我读到它应该存储在隐藏的输入字段中，但是我该如何访问？访问它的唯一方法似乎是与DOM进行互动，我被告知使用React时要避免使用。我还读到，将CSRF令牌存储在React状态下是安全的。这不会使它容易受到XSS攻击的影响吗？

我认为，CSRF代币应存储在您的React应用程序的主要内存中，作为

Answer 1

中的变量，最好是在全球范围内。请记住，CSRF令牌将在页面刷新或打开新标签时丢失。要处理此操作，请在服务器上创建一个API端点（例如

react context

），该端点使用上下文数据（例如用户的电子邮件，会话或用户ID）生成并返回令牌。

在您的React应用程序的初始设置期间，应调用该端点。虽然您可能会考虑使用

GET /api/csrf-token

钩，但这可能会导致比赛条件。相反，建议使用

useEffect

是因为它在浏览器涂料之前同步执行，以确保您的身份验证流保持无缝。

对于其他上下文，请查看this文章

概述了类似方法。