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

Question

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

Answer 1

可以将令牌存储在您的 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

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

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

ruby-on-rails

reactjs

redux

csrf-token

react-rails