Laravel+Vue+AxiosのCSRF対策

Laravelのbladeファイルでは@csrfと書けばCSRF対策できるが、VueのvueファイルでAxiosを使う場合、どのようにCSRF対策すれば良いのか疑問に思ったので調べてみました。

結論

VueでAxiosを使う場合、CSRF対策は不要。
CSRF対策のコードを書かなくても、CSRF対策されている。

根拠

X-XSRF-TOKEN

Laravelの公式サイトを確認すると、Axiosの場合のCSRF対策に関しての記述あり。
Axiosがサーバーと通信する際、Cookieから取得したX-XSRF-TOKENも送っている。
よって、サーバー側は、所有しているトークンと比較することにより、CSRF対策を行っている。

This cookie is primarily sent as a developer convenience since some JavaScript frameworks and libraries, like Angular and Axios, automatically place its value in the X-XSRF-TOKEN header on same-origin requests.

By default, the resources/js/bootstrap.js file includes the Axios HTTP library which will automatically send the X-XSRF-TOKEN header for you.

https://laravel.com/docs/10.x/csrf

resources/js/bootstrap.js のファイルを見ると、以下の記述もあった。

We'll load the axios HTTP library which allows us to easily issue requests
to our Laravel back-end. This library automatically handles sending the
CSRF token as a header based on the value of the "XSRF" token cookie.

resources/js/bootstrap.js

試しにGETリクエストのヘッダーを、サーバー側でログ出力してみたが、確かに「X-Xsrf-Token」は送られており、Webサイトの記述と一致していた。

logger($request->headers);

VueでAxiosを使う場合、CSRF対策のコードを書く必要はない。
複雑な処理を書く必要がないので、開発者にとって、とても便利なつくりになっていますね！