LaravelとVue.jsでCSRF対策を実装する方法

2024-02-16 18:39 Laravel Vue.js CSRF対策

以下に、LaravelとVue.jsでCSRF対策を実装するためのシンプルで簡単な方法とコード例を示します。

【手順1: Laravel側の設定】

  1. Laravelのプロジェクトにおいて、CSRFトークンを生成するためのミドルウェアが有効になっていることを確認します。デフォルトでは、App\Http\Middleware\VerifyCsrfTokenが使用されます。

【手順2: Vue.js側の設定】

  1. Vue.jsでAjaxリクエストを行う場合、CSRFトークンをリクエストヘッダーに含める必要があります。これにより、LaravelのCSRFトークンの検証が可能になります。

例えば、axiosを使用してAjaxリクエストを送信する場合、以下のようにCSRFトークンをリクエストヘッダーに追加します。

import axios from 'axios';
axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
// 以降、axiosを使用したAjaxリクエストを行う

上記のコードでは、X-CSRF-TOKENヘッダーにCSRFトークンを設定しています。また、CSRFトークンはLaravelのCSRFトークン設定に基づいて、metaタグから取得しています。

【注意事項】

  • metaタグからCSRFトークンを取得するために、LaravelのBladeテンプレートを使用している場合は、適切なmetaタグが生成されていることを確認してください。
  • CSRFトークンの取得方法やリクエストヘッダーの設定方法は、使用しているフレームワークやライブラリによって異なる場合があります。公式ドキュメントやリファレンスを参照してください。

以上が、LaravelとVue.jsでCSRF対策を実装するための基本的な手順とコード例です。セキュリティを向上させるために、CSRF対策は重要な要素となりますので、プロジェクトに適用してください。