人気のPHP WEBアプリケーションフレームワークLaravelのTipsを記録していきます

Laravel の /api で csrf を導入する

● フロント側

withCredentials: true を有効にして post します。

  const axiosPost = axios.create({
    withCredentials: true
  });
      axiosPost.put(`http://localhost:8000/api/posts/${params.id}`, data
      ).then(res => {});

● Laravelバックエンド側

app/Http/Kernel.php

        'api' => [
            \App\Http\Middleware\EncryptCookies::class, // 追加
            \Illuminate\Session\Middleware\StartSession::class, // 追加
            \App\Http\Middleware\VerifyCsrfToken::class, // 追加

            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

.env

# ● COR設定
SESSION_DOMAIN=localhost

config/cors.php

    'allowed_origins_patterns' => ['/(localhost):?[0-9]*/'],  // ● localhost:3000 追加
    'supports_credentials' => true,     // ● trueに変更

config/session.php

    'secure' => false,

● 1. まず、CSRFトークンがない状態でデータの削除が失敗することを確認する

ターミナルから以下のコマンドを実行して失敗することを確認する

(URL は適宜書き換えてください。以下の例では postsテーブルの ID =2のデータを削除しに行きます)

curl -X DELETE http://localhost:8000/api/posts/2
 <title>Page Expired</title>

が返ってくる場合 csrf プロテクションが有効です

● 2. 次にフロントエンドから削除なり修正なりを実行してみます

わざと csrf エラーを出したい場合は

  const axiosPost = axios.create({
    withCredentials: true
  });

を使わないようにするとエラーが出ます

No.2146
01/27 16:32

edit