CSRF対策をした認証の実装エラー（react/laravel breeze api）

Question

実現したいこと

ここに実現したいことを箇条書きで書いてください。

• フロントをReact、バックエンドapiをlaravelのlaravel breezeでuserとadminのマルチログイン認証を実装したい。
  目的：apiでのアプリ作成の理解のため、簡易的に作成中。

前提

csrfトークンによるcsrf対策をした認証システム作っています。
バックエンドのlaravelの方はapiテストツールのpostmanでlogin,logoutリクエストの動作確認は成功しています。しかしフロントのReactで作ったformからloginリクエストなどを飛ばすと419エラーがとなって下記のエラーが返ってきます。

発生している問題・エラーメッセージ

chromeブラウザの検証のnetworkタブで下記を確認

message: "CSRF token mismatch.", exception: "Symfony\Component\HttpKernel\Exception\HttpException"

該当のソースコード

create-react-appで作成

import { useState, useContext } from "react";
import axios from "axios"
import { AuthContext } from "../../context/AuthContext";

const LoginUser = () => {
  //inputのstate
  const [inputEmailVal, setInputEmailVal] = useState('');

  const [inputPasswordVal, setInputPasswordVal] = useState('');

  //ログイン状態をtrue,falseで管理（Contextを使用）
  const { auth, setAuth } = useContext(AuthContext);
　
  //inputタグのhandler
  const chengeInput = (e) => {
    if (e.target.name === 'email') {
      setInputEmailVal(e.target.value);
    } else if (e.target.name === 'password') {
      setInputPasswordVal(e.target.value);
    }
  }

  //ログイン処理
  const login = async (e) => {
    e.preventDefault();

    const data = {
      email: inputEmailVal,
      password: inputPasswordVal
    }

    try {
      //csrfトークンの初期化
      await axios.get('http://127.0.0.1:8000/sanctum/csrf-cookie', { withCredentials: true });

      //ログインリクエスト
      await axios.post('http://127.0.0.1:8000/admins/login', data, { withCredentials: true })
        .then(res => {
          setAuth(true);
          console.log('ログインしました');
        })

      //ログインしたユーザーの情報取得・表示
      const result = await axios.get('http://127.0.0.1:8000/api/admin')
      console.log(result.data);
    } catch (e) {
      console.log('ログインできませんでした');
    }
  }

  //ログアウト処理
  const logout = async (e) => {
    e.preventDefault();

    try {
      //csrfトークンの初期化
      await axios.get('http://127.0.0.1:8000/sanctum/csrf-cookie');
      
      //ログアウトリクエスト
      const result = await axios.post('http://127.0.0.1:8000/admins/logout');
      setAuth(false);
      console.log('ログアウトしました');
    } catch (e) {
      console.log('ログアウトリクエストに問題がありました')
    }
  }

  return (
    <>
      <h3>login画面</h3>
      //ログイン前の表示内容
      {
        !auth && (
          <>
            <form action="" onSubmit={login}>
              <div>
                <label htmlFor="email">メースアドレス</label>
                <input type="email" id="email" onChange={chengeInput} name="email" />
              </div>

              <div>
                <label htmlFor="password">パスワード</label>
                <input type="text" id="password" onChange={chengeInput} name="password" />
              </div>

              <button>ログイン</button>
            </form>
          </>
        )
      }

      //ログイン後の表示内容
      {
        auth && (
          <>
            <h4>ログイン中</h4>
            <form action="" onSubmit={logout}>
              <button>ログアウト</button>
            </form>
          </>
        )
      }
    </>
  );
}

export default LoginUser;

バックエンド（laravel）
routing関連ファイル

//routes/web.php
<?php

use Illuminate\Support\Facades\Route;


Route::get('/', function () {
    return ['Laravel' => app()->version()];
});

require __DIR__.'/auth.php';

//routes/auth.php
<?php

use App\Http\Controllers\User\Auth\AuthenticatedSessionController;
use App\Http\Controllers\User\Auth\EmailVerificationNotificationController;
use App\Http\Controllers\User\Auth\NewPasswordController;
use App\Http\Controllers\User\Auth\PasswordResetLinkController;
use App\Http\Controllers\User\Auth\RegisteredUserController;
use App\Http\Controllers\User\Auth\VerifyEmailController;
use Illuminate\Support\Facades\Route;

Route::post('/register', [RegisteredUserController::class, 'store'])
                ->middleware('guest')
                ->name('register');

Route::post('/login', [AuthenticatedSessionController::class, 'store'])
                ->middleware('guest')
                ->name('login');
〜〜〜
Route::post('/logout', [AuthenticatedSessionController::class, 'destroy'])
                ->middleware('auth:users')
                ->name('logout');

//routes/admin.php
<?php

use App\Http\Controllers\Admin\Auth\AuthenticatedSessionController;
〜〜〜

Route::post('/register', [RegisteredUserController::class, 'store'])
                ->middleware('guest')
                ->name('register');

Route::post('/login', [AuthenticatedSessionController::class, 'store'])
                ->middleware('guest')
                ->name('login');
〜〜〜

Route::post('/logout', [AuthenticatedSessionController::class, 'destroy'])
                ->middleware('auth:admins')
                ->name('logout');

config関連コード

//config/cors.php
<?php

return [
    'paths' => ['api/*', 'users/*', 'admins/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => [env('FRONTEND_URL', 'http://localhost:3000')],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

//config/sanctum.php
<?php

return [

    'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
        '%s%s%s',
        'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',
        env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : '',
        env('FRONTEND_URL') ? ','.parse_url(env('FRONTEND_URL'), PHP_URL_HOST) : ''
    ))),

    'expiration' => null,

    'middleware' => [
        'verify_csrf_token' => App\Http\Middleware\VerifyCsrfToken::class,
        'encrypt_cookies' => App\Http\Middleware\EncryptCookies::class,
    ],

];

config/session.php
<?php
use Illuminate\Support\Str;
return [
    'driver' => env('SESSION_DRIVER', 'file'),
    'lifetime' => env('SESSION_LIFETIME', 120),
    'expire_on_close' => false,
    'encrypt' => false,
    'files' => storage_path('framework/sessions'),
    'connection' => env('SESSION_CONNECTION'),
    'table' => 'sessions',
    'store' => env('SESSION_STORE'),
    'lottery' => [2, 100],
    'cookie' => env(
        'SESSION_COOKIE',
        Str::slug(env('APP_NAME', 'laravel'), '_').'_session'
    ),
    'path' => '/',
    'domain' => env('SESSION_DOMAIN'),
    'secure' => env('SESSION_SECURE_COOKIE'),
    'http_only' => true,
    'same_site' => 'none',

];

middleware関連のコード

app/Http/Middleware/VerifyCsrfToken.php
<?php

namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;

class VerifyCsrfToken extends Middleware
{
    //exceptで/*を指定してcsrf対策を無くすとリクエストが動作する。
    protected $except = [
        // '/*'
    ];
}

画像

エラーリクエスト部分のヘッダー情報
General
Request URL:
http://127.0.0.1:8000/admins/login
Request Method:
POST
Status Code:
419 unknown status
Remote Address:
127.0.0.1:8000
Referrer Policy:
strict-origin-when-cross-origin

Response Headers
HTTP/1.1 419 unknown status
Host: 127.0.0.1:8000
Date: Tue, 22 Aug 2023 16:53:53 GMT
Connection: close
X-Powered-By: PHP/8.2.0
Cache-Control: no-cache, private
Date: Tue, 22 Aug 2023 16:53:53 GMT
Content-Type: application/json
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Credentials: true
Set-Cookie: laravel_session=ey〜〜〜; expires=Tue, 22 Aug 2023 18:53:53 GMT; Max-Age=7200; path=/; domain=localhost; httponly; samesite=none

Request headers
POST /admins/login HTTP/1.1
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Connection: keep-alive
Content-Length: 55
Content-Type: application/json
Host: 127.0.0.1:8000
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
〜〜〜

csrfトークン初期化リクエストのheader情報

General
Request URL:
http://127.0.0.1:8000/sanctum/csrf-cookie
Request Method:
GET
Status Code:
204 No Content
Remote Address:
127.0.0.1:8000
Referrer Policy:
strict-origin-when-cross-origin

Response Headers
HTTP/1.1 204 No Content
Host: 127.0.0.1:8000
Date: Tue, 22 Aug 2023 16:53:52 GMT
Connection: close
X-Powered-By: PHP/8.2.0
Cache-Control: no-cache, private
Date: Tue, 22 Aug 2023 16:53:52 GMT
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Credentials: true
Set-Cookie: XSRF-TOKEN=ey〜〜〜; expires=Tue, 22 Aug 2023 18:53:52 GMT; Max-Age=7200; path=/; domain=localhost; samesite=none
Set-Cookie: laravel_session=ey〜〜〜; expires=Tue, 22 Aug 2023 18:53:52 GMT; Max-Age=7200; path=/; domain=localhost; httponly; samesite=none


Request headers
GET /sanctum/csrf-cookie HTTP/1.1
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Connection: keep-alive
Host: 127.0.0.1:8000
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
〜〜〜

試したこと

・postmanによるlogin,logout処理はX-XSRF-TOKENをリクエストヘッダーに付与してcsrf対策のされたlogin,logoutリクエストが成功。
・laravel側でmiddlewareのVerifyCsrfToken.phpでcsrf対策をしない設定でフロントからlogin,logoutリクエストを送ると成功。
・axiosによってcookieに保存されているXSRF-TOKENの値がリクエストheaderのX-XSRF-TOKENに設定されてcsrf対策の取れたリクエストとなるはずなのに設定されず419エラーとなる。

自分で考えついた原因
csrf対策で何かおかしいところがある。
csrfトークンの初期化リクエストでSet-Cookieでトークンがちゃんと渡ってきていることを確認したけど、ブラウザのcookieに保存されていない。なのでaxiosが自動でheaderのX-XSRF-TOKENを設定できない。それによってlaravelのcsrf対策に引っ掛かって419エラーとなる。

やったこと：
・axiosでリクエストする際にwithCredentials：trueを設定
・chromeのcookieの設定で「Cookie をすべて受け入れる」に設定

結果：
withCredentials：trueに設定しているがSet-CookieでブラウザにXSRF-TOKENが保存されない。

わかる方いましたらよろしくお願いします。

補足情報（FW/ツールのバージョンなど）

laravel 9
"axios": "^1.4.0"
"react": "^18.2.0"
node 16.14.0
os: macOS Monterey 12.5
MAMP

Answer 1

自己解決できました。
原因ですがクロスオリジンでのブラウザのcookieの扱いをしっかり理解できていなかったようで、クロスオリジンではcookieのsame-site属性をnoneにしなければクロスオリジンでのpost通信でSet-Cookieがが無視されてしまいブラウザに保存されず、加えてsame-siteをnoneにした場合はcookieのsecure属性も付けなくてはいけなくなり、secure属性がつくとhttpではなくhttpsのリクエストを要求されるので、それがが原因でhttps通信を設定していないMAMPの環境ではSet-CookieでブラウザにXSRF-TOKENが保存されずにエラーとなっていました。

やったこと
・MAMP環境下でのhttps化
参考：https://parashuto.com/rriver/tools/mkcert-for-local-ssl-dev-env
・axiosを使うときにaxiosインスタンスを生成し設定に下記を追加
xsrfHeaderName: 'X-XSRF-TOKEN',
xsrfCookieName: 'XSRF-TOKEN',
withCredentials: true,

これでうまくいきました。
同じようなエラーに遭遇した方の参考になれば幸いです。