在 redux 商店中添加 CSRF 令牌是一種好習慣嗎？

Question

將 CSRF 令牌存儲在 redux 中是一種好習慣嗎？ 我之前通過道具傳遞它（將其添加到 Axios 標頭）。 我有一個 rails 后端，我正在使用 gem react-rails ，我的組件是服務器渲染的，所以我沒有想出任何其他方法，而是將 CSRF 令牌傳遞給組件。

Answer 1

可以將令牌存儲在您的 Redux 存儲中。

令牌的目的是防止其他站點/來源向您的 API 發出非 GET（POST、PUT、DELETE）請求。 如果沒有它，惡意站點可能會發出請求並搭載存儲在瀏覽器中的 cookies 和 session。 在一個普通的 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