在 redux 商店中添加 CSRF 令牌是一种好习惯吗？答案

【问题标题】：Is it a good practice adding the CSRF token in redux store?在 redux 商店中添加 CSRF 令牌是一种好习惯吗？
【发布时间】：2021-06-02 09:24:54
【问题描述】：

在 redux 中存储 CSRF 令牌是一种好习惯吗？我之前用道具传递它（将它添加到 Axios 标头中）。我有一个 Rails 后端，我正在使用 gem react-rails，我的组件是服务器渲染的，所以我没有想出任何其他方法，而是将 CSRF 令牌传递给组件。

【问题讨论】：

不，这不是一个好主意，redux 的主要目的是存储长寿命的特定领域的值。 csrf-token 是一个实现细节。你可以尝试使用cookies来保留csrf-token。
@ŁukaszOlszewski 问题是我不能将 cookie 与服务器渲染的组件一起使用，对吧？

标签： ruby-on-rails reactjs redux csrf-token react-rails

【解决方案1】：

将令牌存储在您的 Redux 存储中很好。

令牌的目的是防止其他站点/来源向您的 API 发出非 GET（POST、PUT、DELETE）请求。如果没有它，恶意网站可能会发出请求并搭载存储在浏览器中的 cookie 和会话。在纯 HTML 服务器渲染的 Rails 应用程序中，此令牌直接放入 HTML 中，使其可用于该页面上的任何 JavaScript。因此，对于您控制的页面上的任何代码，它都不是私人信息。

尽管如此，鉴于它是全球性的，并且您可能在 Redux 上下文之外需要它，最好将它放在 window 上供任何人使用：

window.CSRF_TOKEN = document.querySelector("meta[name='csrf-token']").getAttribute("content")

任何时候您拨打fetch，您都可以包含这些标头：

headers: {
 'X-CSRF-Token': window.CSRF_TOKEN
}

由于您使用的是react-rails，您也可以将其作为道具传递给您的组件：

react_component 'MyForm', authenticity_token: form_authenticity_token

如果您不依赖 Rails 会话进行身份验证（例如，使用 Bearer 令牌），您还可以使用 ApplicationController 中的这一行完全禁用 CSRF 令牌：

protect_from_forgery with: :null_session

【讨论】：