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

よっしー

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

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

背景
KitConfig
1. csp
おわりに

背景

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 アプリケーションの動作を特定の要件に合わせてカスタマイズできます。

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

csp

Content Security Policy（コンテンツセキュリティポリシー）の設定です。CSPは、リソースがロードされる場所を制限することにより、ユーザーをクロスサイトスクリプティング（XSS）攻撃から保護するのに役立ちます。例えば、このような設定…

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		csp: {
			directives: {
				'script-src': ['self']
			},
			// 'report-uri'ディレクティブまたは'report-to'ディレクティブ、あるいはその両方を指定する必要があります
			reportOnly: {
				'script-src': ['self'],
				'report-uri': ['/']
			}
		}
	}
};

export default config;

…これは外部サイトからのスクリプトのロードを防止します。SvelteKitは、生成するインラインスタイルやスクリプトに対して、（modeに応じて）ナンスまたはハッシュで指定されたディレクティブを補強します。

src/app.htmlに手動で含めるスクリプトやリンクにナンスを追加するには、プレースホルダー %sveltekit.nonce% を使用できます（例：<script nonce="%sveltekit.nonce%">）。

ページがプリレンダリングされる場合、CSPヘッダーは <meta http-equiv> タグを介して追加されます（この場合、frame-ancestors、report-uri、sandbox ディレクティブは無視されることに注意してください）。

mode が 'auto' の場合、SvelteKitは動的にレンダリングされるページにはナンスを使用し、プリレンダリングされるページにはハッシュを使用します。プリレンダリングされたページでナンスを使用することは安全ではないため禁止されています。

ほとんどのSvelteトランジションは、インラインの <style> 要素を作成することで機能することに注意してください。アプリでこれらを使用する場合は、style-src ディレクティブを指定しないか、unsafe-inline を追加する必要があります。

この設定レベルでは不十分で、より動的な要件がある場合は、handle フックを使用して独自のCSPを実装できます。

プロパティ

mode?: 'hash' | 'nonce' | 'auto'; <script> と <style> 要素を制限するためにハッシュとナンスのどちらを使用するかを指定します。'auto' はプリレンダリングされたページにはハッシュを、動的にレンダリングされたページにはナンスを使用します。

directives?: CspDirectives; Content-Security-Policy ヘッダーに追加されるディレクティブです。

reportOnly?: CspDirectives; Content-Security-Policy-Report-Only ヘッダーに追加されるディレクティブです。

解説

CSPとは

Content Security Policy（CSP）は、Webアプリケーションのセキュリティを強化するための仕組みで、主にXSS攻撃（悪意のあるスクリプトが実行されるリスク）からの保護を目的としています。

SvelteKitのCSP機能の主なポイント

セキュリティ強化:
- どのソースからコンテンツを読み込むことができるかを制限することで、XSS攻撃のリスクを減らします。
ディレクティブの設定:
- script-src: スクリプトの読み込み元を制限（例: 'self'は同一オリジンのみ）
- その他多くのディレクティブ: style-src, img-src, connect-srcなど
2つの実施モード:
- directives: 実際に強制適用されるポリシー
- reportOnly: 違反を報告するだけで強制はしないポリシー（テスト用）
セキュリティメカニズム:
- hash: コンテンツのハッシュ値に基づく検証
- nonce: ページごとに生成される一意のランダム値を使用
- auto: 状況に応じて最適な方法を選択
プリレンダリングとの統合:
- プリレンダリングされたページでは <meta> タグを通じてCSPが適用
- プリレンダリングページでは安全上の理由からナンスの使用は禁止
Svelteトランジションとの互換性:
- Svelteのアニメーションはインラインスタイルを使用するため、style-src に unsafe-inline を追加するか、制約を緩める必要があることに注意
カスタムナンスの使用:
- %sveltekit.nonce% プレースホルダーを使用して、手動で追加したスクリプトやスタイルにもCSPを適用可能