在 redux 存储中添加 CSRF 令牌是一种好习惯吗?

Is it a good practice adding the CSRF token in redux store?

在 redux 中存储 CSRF 令牌是一种好习惯吗?我之前用道具传递它(将它添加到 Axios headers)。我有一个 rails 后端,我正在使用 gem react-rails,我的组件是服务器呈现的,所以除了传递 CSRF 令牌外,我没有想出任何其他方法到组件。

可以将令牌存储在您的 Redux 存储中。

令牌的目的是防止其他 sites/origins 向您的 API 发出 non-GET(POST、PUT、DELETE)请求。没有它,恶意网站可以发出请求并利用存储在您浏览器中的 cookie 和 session。在普通 HTML server-rendered Rails 应用程序中,此令牌直接放入 HTML,使其可供该页面上的任何 JavaScript 使用。因此,对于您控制的页面上的任何代码,它都不是私人信息。

尽管如此,考虑到它的全局性质并且您可能需要在 Redux 上下文之外使用它,最好将它放在 window 上供任何人使用:

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

任何时候调用 fetch,您都可以包含这些 headers:

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

因为你正在使用 react-rails,你也可以将它作为 props 传递给你的组件:

react_component 'MyForm', authenticity_token: form_authenticity_token

如果您不依赖 Rails session 进行身份验证(例如,使用 Bearer 令牌),您也可以使用 [=] 中的这一行完全禁用 CSRF 令牌17=]:

protect_from_forgery with: :null_session