Svelte入門：リファレンス Configuration -Vol.6-

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitのリファレンスについて解説しています。

背景
KitConfig
1. CSRF
  1. CSRFとは
  2. SvelteKit の CSRF 保護機能
おわりに

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

KitConfig

kit プロパティは SvelteKit を設定するために使用され、以下のようなプロパティを持つことができます：

svelte.config.js ファイル内の kit オブジェクトは、SvelteKit アプリケーションの核となる設定を定義します。このプロパティによって、アプリケーションのルーティング、ビルド、デプロイなどの多くの側面をカスタマイズできます。

例えば：

const config = {
  kit: {
    // KitConfig プロパティがここに入ります
    adapter: adapter(),
    paths: {
      base: '/my-app',
      assets: 'https://cdn.example.com'
    },
    // その他の設定...
  }
};

KitConfig には多くのプロパティが含まれる可能性があり、プロジェクトの要件に応じて以下のような設定が可能です：

adapter: アプリケーションのデプロイ先環境を定義します（Node.js、静的サイト、AWS Lambda など）
paths: ベースパスやアセットパスなどのパス設定
prerender: プリレンダリングの設定
env: 環境変数の扱い方
csp: コンテンツセキュリティポリシー設定
alias: インポートパスのエイリアス
files: さまざまなファイルやディレクトリの場所
outDir: ビルド出力先のディレクトリ
version: アプリケーションのバージョン管理方法

こうした設定を変更することで、SvelteKit アプリケーションの動作を特定の要件に合わせてカスタマイズできます。

（注：具体的な各プロパティの詳細説明がドキュメントにはさらに記載されていると思われますが、入力された文章には含まれていないため、一般的な説明に留めています。）

CSRF

csrf クロスサイトリクエストフォージェリ（CSRF）攻撃に対する保護です。

checkOrigin?: boolean;

デフォルト値: true POST、PUT、PATCH、または DELETE フォーム送信に対して、受信した origin ヘッダーを確認し、サーバーのオリジンと一致することを検証するかどうかを指定します。他のオリジンからアプリに対して Content-Type が application/x-www-form-urlencoded、multipart/form-data、または text/plain の POST、PUT、PATCH、または DELETE リクエストを許可するには、このオプションを無効にする必要があります。十分注意してください！

CSRFとは

CSRF（Cross-Site Request Forgery）は、認証済みユーザーの資格情報を使用して、そのユーザーの同意なしに不正なリクエストを送信する攻撃手法です。例えば、ユーザーがログインしているウェブサイトに対して、悪意のあるウェブサイトや電子メールから自動的にリクエストを送信するように仕組まれています。

SvelteKit の CSRF 保護機能

SvelteKit は、フォーム送信に対する CSRF 保護を自動的に提供します：

checkOrigin オプション:
- デフォルトで有効（true）
- サーバーへのフォーム送信（POST、PUT、PATCH、DELETE）時に、リクエストの Origin ヘッダーがサーバー自身のオリジンと一致するかを確認します
- 一致しない場合は、リクエストを拒否（通常は 403 Forbidden エラー）
クロスオリジンリクエストの許可:
- 他のドメインからのフォーム送信を許可する必要がある場合は、checkOrigin: false を設定します
- これは以下の Content-Type を持つリクエストに対して適用されます：
  - application/x-www-form-urlencoded（通常のフォーム送信）
  - multipart/form-data（ファイルアップロード）
  - text/plain（プレーンテキスト）
設定例:

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    csrf: {
      checkOrigin: false // 警告: これはセキュリティリスクを伴います
    }
  }
};

セキュリティ上の注意:
- checkOrigin: false を設定すると、CSRF 攻撃に対して脆弱になる可能性があります
- この設定は、明確な理由（例：API として機能する必要がある、他のサイトからの正当なフォーム送信を許可する必要がある）がある場合にのみ無効にすべきです
- 無効にする場合は、代替の CSRF 保護機構（カスタムトークンなど）を実装することを強く推奨します

この CSRF 保護機能は、SvelteKit アプリケーションのセキュリティの重要な部分であり、デフォルトでユーザーをこの種の攻撃から保護するのに役立ちます。