React 中的 CSRF 令牌

我正在尝试使用 CSRF 令牌保护我的 React/Express 应用程序。
我遵循 this article 的第一种方法,但我不明白这是如何安全的。它建议在第一个请求的标头中设置一个 CSRF 令牌(我假设在获取页面的 html、css 和 js 时),然后在每次调用服务器时返回一个新的 CSRF 令牌。

我的问题是:为什么攻击者不能只获取站点并访问 CSRF 令牌?

如果这是重复的,我深表歉意,但无论我尝试什么方法,这个问题对我来说永远不会真正揭开神秘面纱。

stack overflow CSRF tokens in React
原文答案

答案:

作者头像

我认为您链接的文章最后有答案:

CSRF tokens are typically bound to the user's session, so your CSRF tokens won't work for me.

如果攻击者向您的服务器发送请求,他们将获得自己会话的令牌。他们利用另一个用户所要做的就是欺骗该用户发送请求(可能通过电子邮件向他们发送可疑链接),以便他们的浏览器自动将他们的 cookie 发送到服务器,因为这就是浏览器通常处理 cookie 的方式。

CSRF 令牌添加了一个额外的未自动传输的所需数据。您必须在“X-CSRF-TOKEN”标头中将令牌发送到服务器,该标头不会自动传输,这与浏览器自动发送的普通“cookie”请求标头不同。这有助于证明该请求是来自用户的蓄意、合法请求,而不是利用当前会话的意外/恶意请求。

作者头像

您可以在会话开始时在 cookie 中设置 CSRF 令牌。 Cookie 可以通过 javascript 访问。并设置cookies的时间限制,使其在一段时间后自动删除(例如.. 1hr)