Vue Academy · レッスン

Vue SPAでのCSRF対策

Q: 「Vue SPAでのCSRF対策」で何を学びますか？

SameSite Cookie、AxiosでのCSRFトークン、二重送信Cookieパターン ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

SameSite Cookie、AxiosでのCSRFトークン、二重送信Cookieパターン

「Vue SPAでのCSRF対策」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

CSRFとは

クロスサイトリクエストフォージェリは、ブラウザーが自動的に送信するCookieを利用して、ログイン中のユーザーのブラウザーからサイトへの意図しない状態変更リクエストを送信させる攻撃です。攻撃者はレスポンスを読み取れませんが、送金や削除などの副作用を発生させることができます。

CookieがCSRFを可能にする理由

認証がセッションCookieに依存している場合、ブラウザーは悪意のあるサイトから誘導されたリクエストも含め、ドメインへのすべてのリクエストにCookieを付加します。追加の防御策がなければ、サーバーは偽造されたリクエストと正規のリクエストを区別できません。

SameSite Cookie属性

CookieにSameSiteを設定すると、クロスサイトでいつCookieを送信するかをブラウザーに指示できます。SameSite=Strictでは、クロスサイトリクエストでCookieを一切送信しないため、ほとんどのCSRFを直接ブロックできます。

Set-Cookie: session=...; SameSite=Strict; Secure; HttpOnly

StrictとLaxの違い

Strictは最も安全ですが、外部リンクから訪れたユーザーをログアウトさせることがあります。LaxはトップレベルのGETナビゲーションでのみCookieを送信するため、一般的な妥協点です。

Synchronizer Tokenパターン

多層防御として、攻撃者が知り得ないCSRFトークンを追加します。サーバーがトークンを発行し、クライアントは状態を変更するリクエストにそのトークンを含めて返す必要があります。

Double-Submit Cookie

SPAでよく使われる方法では、サーバーが読み取り可能な（HttpOnlyではない）CookieにCSRFトークンを設定します。クライアントはそれを読み取り、ヘッダーで再送します。サーバーは2つの値が一致することを検証します。

Set-Cookie: XSRF-TOKEN=abc123; SameSite=Strict; Secure

Cookieからトークンを読み取る

Vueアプリ内の小さなヘルパーを使って、CSRF Cookieの値を読み取ります。

function getCookie(name) {
  const match = document.cookie.match(
    new RegExp("(^| )" + name + "=([^;]+)")
  );
  return match ? decodeURIComponent(match[2]) : null;
}
const token = getCookie("XSRF-TOKEN");

リクエストにヘッダーを設定する

状態を変更するすべてのリクエスト（POST、PUT、PATCH、DELETE）で、X-CSRF-Tokenのようなカスタムヘッダーにトークンを入れて送信します。

await fetch("/api/transfer", {
  method: "POST",
  headers: { "X-CSRF-Token": token },
  body: JSON.stringify(payload)
});

Axiosのデフォルトヘッダー

Axiosではヘッダーをデフォルトとして一度設定すれば、すべてのリクエストに自動的に含められます。

import axios from "axios";

axios.defaults.headers.common["X-CSRF-Token"] = getCookie("XSRF-TOKEN");

Axios組み込みのxsrfサポート

Axiosを使うと、この処理を自動化できます。Cookie名とヘッダー名を設定すれば、AxiosがCookieを読み取り、ヘッダーを設定してくれます。

const api = axios.create({
  xsrfCookieName: "XSRF-TOKEN",
  xsrfHeaderName: "X-CSRF-Token",
  withCredentials: true
});

カスタムヘッダーが役立つ理由

ブラウザーは、CORSプリフライトを通過しない限り、クロスオリジンサイトがカスタムヘッダーを設定することをブロックします。X-CSRF-Tokenを必須にすると、クロスサイトから偽造されたリクエストにはそのヘッダーを含められないため、サーバーが拒否できます。

確認テスト

それだけでCSRFを最も直接的に軽減できるCookie属性はどれですか？

まとめ

CSRFは、自動的に送信されるCookieを悪用して、状態を変更するリクエストを偽造します。主な防御策として認証CookieにSameSite=Strictを設定し、さらにCSRFトークンを追加してください。トークンをCookieから読み取り、すべての更新リクエストでX-CSRF-Tokenヘッダーを使って送信します。これはAxiosのデフォルトとして一度設定するか、Axios組み込みのxsrfオプションで設定できます。

よくある質問

「Vue SPAでのCSRF対策」レッスンは無料ですか？

はい。「Vue SPAでのCSRF対策」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「Vue SPAでのCSRF対策」で何を学びますか？

SameSite Cookie、AxiosでのCSRFトークン、二重送信Cookieパターンブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「Vue SPAでのCSRF対策」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る