👓

[備忘録📝] InvalidAuthenticityTokenが起きた際にフロント側でやったこと

2023/03/12に公開

背景

フロント側からPOST処理をしたところ、エラーが起こったのでその原因調査と、解決までの備忘録

フロントエンド: Next.js
バックエンド: Ruby on Rails

ActionController::InvalidAuthenticityToken
エラー文を検索してみると、CSRFトークンについての記事が多くでてきた。

悪意のあるユーザーがサーバーへのリクエストを捏造し、認証済みのユーザーを装う攻撃の手段。

protect_from_forgeryメソッドを使用することで、authenticity_tokenがセットされているかどうかをチェックしてくれているのでCSRFを防げる。

widthオプションを付与することで、セキュリティトークンが一致しなかった場合の挙動を指定できる。
:execptionを指定すると例外が起こり、ActionController::InvalidAuthenticityTokenエラーが起こる

これが今回発生したエラー

headerにCSRFTokenを付与する

今回は、Axiosを使用していたので下記のようにしました

axios.defaults.headers.common['X-CSRF-Token'] = res.headers['x-csrf-token'];