👓

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

2023/03/12に公開・約1,000字

背景

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

開発環境

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

エラー内容

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

CSRF(Cross-Site Request Forgery)とは?

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

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

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

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

https://railsguides.jp/security.html#クロスサイトリクエストフォージェリ(csrf)

解決方法

headerにCSRFTokenを付与する

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

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

https://midorimici.com/posts/rails-api-csrf#rails-側

https://zenn.dev/leaner_dev/articles/20210930-rails-api-spa-csrf

Discussion

ログインするとコメントできます