先生と生徒の会話形式で理解しよう

生徒

「先生、Laravelでフォームを作るときによく@csrfって書きますけど、これは何ですか？」

先生

「これはCSRFトークンと呼ばれるもので、フォームを安全に送信するための仕組みです。」

生徒

「CSRFってなんですか？」

先生

「CSRFはクロスサイトリクエストフォージェリの略で、悪意のある第三者があなたのサイトに不正なリクエストを送る攻撃のことです。例えば、ログインした状態のサイトで勝手に操作されてしまうリスクがあります。」

生徒

「なるほど、安全にフォームを送るための仕組みなんですね。」

1. CSRFトークンの基本

Laravelでは、フォームに@csrfを追加すると、自動的にランダムなトークンが生成され、フォームと一緒に送信されます。サーバー側でこのトークンを確認することで、正しいユーザーからのリクエストかどうかを判断します。これにより、CSRF攻撃を防ぐことができます。

2. Bladeでのフォーム作成とCSRFトークン

フォームを作る際には、resources/viewsにBladeテンプレートを作ります。例えばお問い合わせフォームの場合:


<form action="/contact" method="POST">
    @csrf
    <div>
        <label for="name">名前:</label>
        <input type="text" id="name" name="name">
    </div>
    <div>
        <label for="email">メールアドレス:</label>
        <input type="email" id="email" name="email">
    </div>
    <button type="submit">送信</button>
</form>

ここで@csrfを入れることで、フォームに隠しフィールドとしてCSRFトークンが含まれ、送信時にサーバー側で自動チェックされます。

3. CSRFトークンの仕組み

CSRFトークンはランダムな文字列で、ユーザーのセッションと紐付けられています。フォーム送信時にサーバーがこのトークンとセッション内の値を照合し、一致すれば正しいリクエストとして処理します。これにより、第三者が不正にフォームを送信しても弾かれる仕組みです。

4. CSRFトークンを手動で確認する方法

通常は@csrfで自動的にチェックされますが、APIやAjaxリクエストでトークンを手動で扱うこともあります。metaタグにトークンを埋め込み、JavaScriptで取得してリクエストヘッダーに追加する方法です。


<meta name="csrf-token" content="{{ csrf_token() }}">

<script>
    const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    fetch('/contact', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': token,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ name: '太郎', email: 'taro@example.com' })
    });
</script>