# セキュリティ設計書

## 概要

本ドキュメントは、Vue.js 3コアフレームワーク（vuejs/core v3.5.27）のセキュリティ設計を記述する。本プロジェクトはクライアントサイドUIフレームワークであり、セキュリティ対策はフレームワーク層の責務（XSS防止、入出力検証、CSP準拠など）に特化している。認証・認可・暗号化・セッション管理などはアプリケーション層またはサーバー層の責務として設計されており、フレームワーク層には含まれない。

## 認証設計

### 認証方式

本プロジェクトはクライアントサイドUIフレームワークであり、認証機能はフレームワーク層の責務外である。認証ロジックはアプリケーション層で実装すべき機能として設計されている。

フレームワークとしては以下を提供する：
- ルーターガード（vue-router連携）による認証チェックポイントの仕組み
- リアクティブな状態管理による認証状態の伝播
- コンポーネントライフサイクルフックによる認証制御の統合

### セッション管理

| 項目 | 設定値 | 備考 |
| --- | --- | --- |
| セッション有効期限 | フレームワーク層では管理なし | アプリケーション層で設定 |
| セッション固定化対策 | フレームワーク層では管理なし | サーバー層で実装 |
| DevToolsバッファ自動クリア | 3,000ms後 | `packages/runtime-core/src/devtools.ts` にてメモリリーク防止 |

## 認可設計

### 権限体系

| ロール | 権限 | 説明 |
| --- | --- | --- |
| N/A（フレームワーク層に権限体系なし） | N/A | 認可はアプリケーション層の責務 |

フレームワークとして権限管理の直接実装は持たないが、以下の拡張ポイントを提供する：
- カスタムディレクティブ（`v-permission` 等）によるUI要素の表示/非表示制御
- `app.config.globalProperties` による権限チェック関数のグローバル注入
- Composition API（`provide`/`inject`）による権限コンテキストの伝播

### アクセス制御

フレームワーク層でのアクセス制御は実装されていない。アプリケーション層での実装パターンとして、ナビゲーションガード（vue-router）やミドルウェアパターンを推奨する設計となっている。

## 通信セキュリティ

| 項目 | 対策 |
| --- | --- |
| HTTPS | フレームワーク層では管理なし。サーバー・インフラ層で強制を推奨 |
| HSTS | フレームワーク層では管理なし。HTTPレスポンスヘッダーで設定 |
| CORS | フレームワーク層では管理なし。サーバー層で設定 |
| CSP（Trusted Types） | 対応あり。`packages/runtime-dom/src/nodeOps.ts` にてTrusted Typesポリシー `vue` を作成し、`innerHTML` 設定時に `TrustedHTML` への型変換を実施 |

### Trusted Types 実装詳細

`packages/runtime-dom/src/nodeOps.ts` にて以下の実装が行われている：

- **ポリシー名**: `vue`
- **ポリシー作成**: `trustedTypes.createPolicy('vue', { createHTML: val => val })` により、CSPのTrusted Typesディレクティブに準拠
- **エラーハンドリング**: ポリシー名の重複時（CSPで `allow-duplicates` がない場合）に `TypeError` をキャッチし、開発環境で警告を出力
- **適用箇所**: `unsafeToTrustedHTML()` 関数を通じて、`innerHTML` 設定が必要な全箇所で利用
  - `patchDOMProp`（`packages/runtime-dom/src/modules/props.ts`）
  - `insertStaticContent`（`packages/runtime-dom/src/nodeOps.ts`）

## データセキュリティ

### 暗号化

| 対象 | 暗号化方式 |
| --- | --- |
| 通信 | フレームワーク層では管理なし。TLS/HTTPSをインフラ層で適用 |
| 保存データ | フレームワーク層では管理なし。アプリケーション層で実装 |

### 機密情報管理

本プロジェクトはオープンソースのクライアントサイドフレームワークであり、フレームワーク層に機密情報を保持する設計にはなっていない。

- **セキュリティ脆弱性報告**: `SECURITY.md` にて報告先を `security@vuejs.org` と明記
- **セキュリティ方針**: テンプレート式経由のXSSは、ユーザーが意図的に信頼されないコンテンツをテンプレートコンパイル元として使用した場合にのみ発生するため、フレームワークの脆弱性としては扱わない方針
- **ビルド時シークレット**: `__DEV__` フラグにより、開発環境専用コード（警告メッセージ、DevTools連携等）が本番ビルドからツリーシェイクされる

## 入出力対策

| 脅威 | 対策 |
| --- | --- |
| XSS | **デフォルト有効**。テンプレート補間（`{{ }}`）はすべて `escapeHtml()` により自動エスケープ。エスケープ対象文字: `"` → `&quot;`、`&` → `&amp;`、`'` → `&#39;`、`<` → `&lt;`、`>` → `&gt;`。HTMLコメント危険パターン（`-->`, `<!--`, `--!>`, `<!-`）は `escapeHtmlComment()` で除去。`v-html` は明示的使用が必要で、コンパイル時に検証される。実装: `packages/shared/src/escapeHtml.ts` |
| SQLインジェクション | フレームワーク層では該当なし。クライアントサイドフレームワークのため、DBアクセスは行わない |
| CSRF | フレームワーク層ではトークン生成・検証の実装なし。サーバー層での実装が必要。フレームワークはHTTPクライアントとの連携により、CSRFトークンのヘッダー付与パターンをサポート |

### XSS対策の詳細

#### テンプレート補間のエスケープ

- **クライアントサイドレンダリング**: `packages/shared/src/escapeHtml.ts` の `escapeHtml()` 関数により、5つの危険文字（`"&'<>`）をHTMLエンティティに変換
- **サーバーサイドレンダリング**: `packages/server-renderer/src/helpers/ssrInterpolate.ts` にて `ssrInterpolate()` 関数が `escapeHtml(toDisplayString(value))` を呼び出し、SSR時も同等のエスケープを保証

#### 属性値の検証とエスケープ

- **安全な属性名判定**: `packages/shared/src/domAttrConfig.ts` の `isSSRSafeAttrName()` 関数により、危険文字（`>`, `/`, `=`, `"`, `'`, タブ、改行等）を含む属性名を拒否
- **SSR属性レンダリング**: `packages/server-renderer/src/helpers/ssrRenderAttrs.ts` にて、動的属性の値を `escapeHtml()` でエスケープ。安全でない属性名はスキップし警告を出力

#### CSS変数名のエスケープ

- `packages/shared/src/escapeHtml.ts` の `getEscapedCssVarName()` 関数により、CSS変数名に含まれる特殊文字をバックスラッシュエスケープ

#### イベントハンドラの検証

- `packages/runtime-dom/src/modules/events.ts` の `sanitizeEventValue()` 関数により、イベントハンドラとして関数または関数配列以外の値が渡された場合に警告を出力し、`NOOP`（空関数）に置換

#### v-htmlディレクティブの制御

- `packages/compiler-dom/src/transforms/vHtml.ts` にて、コンパイル時に以下を検証：
  - 式が指定されていない場合はエラー
  - 子要素が存在する場合はエラー（子要素はクリアされる）
- `v-html` は `innerHTML` プロパティへの直接設定となり、Trusted Types対応の `unsafeToTrustedHTML()` を経由

#### 静的コンテンツの文字列化

- `packages/compiler-dom/src/transforms/stringifyStatic.ts` にて、テキスト内容と属性値を `escapeHtml()` でエスケープしてから文字列化

### iframe sandbox属性の保護

`packages/runtime-dom/src/patchProp.ts` にて、iframeの `sandbox` 属性はDOM属性（attribute）として設定される。プロパティとして設定した場合、`null` が文字列 `'null'` に変換されたり、空文字列が最も制限の厳しいサンドボックスモードを有効にしてしまう問題を防止している。

## 監査ログ

| ログ種別 | 記録内容 | 保持期間 |
| --- | --- | --- |
| 開発警告（warn） | コンポーネントトレース付き警告メッセージ。`console.warn` で出力。再帰呼び出し防止機構あり。`app.config.warnHandler` でカスタマイズ可能 | 開発環境のみ（`__DEV__` ガード）。本番ビルドではツリーシェイクにより除去 |
| エラーログ（logError） | エラー情報とコンポーネントコンテキスト。開発環境では `throw` + `console.error`、本番環境では `console.error`。`app.config.errorHandler` でカスタマイズ可能 | ランタイム。`throwUnhandledErrorInProduction: true` 設定で本番環境でもthrow可能 |
| パフォーマンス計測 | `window.performance.mark` / `measure` を使用。init（初期化）、render（レンダリング）、patch（パッチ）の各タイミングを計測 | `app.config.performance = true` で有効化。開発環境のみ |
| DevToolsイベント | `app:init`、`component:added`、`component:updated`、`component:emit`、`perf:start`、`perf:end` 等のイベントを発火 | DevTools接続時のみ。バッファは3,000ms後に自動クリア |

## 備考

### セキュリティ設計の基本方針

本プロジェクト（Vue.js 3コアフレームワーク）のセキュリティ設計は、以下の基本方針に基づく：

1. **デフォルト安全性**: テンプレート内のすべてのテキスト補間は自動的にHTMLエスケープされる。開発者が明示的に `v-html` を使用しない限り、XSS攻撃は防止される
2. **明示的な危険操作**: `v-html` はユーザーが明示的に使用する必要があり、コンパイル時に検証される。信頼されないコンテンツを `v-html` に渡す責任はアプリケーション開発者にある
3. **信頼境界の分離**: コンパイル済みテンプレート（信頼）とユーザー入力（信頼されない）を明確に分離する設計
4. **CSP準拠**: Trusted Typesポリシーにより、`innerHTML` 設定を安全に行う
5. **多層防御**: HTML属性名、属性値、イベントハンドラ型、CSSプロパティ名を多層的に検証
6. **開発体験**: 開発環境では詳細な警告・エラー情報を提供し、本番環境ではツリーシェイクにより除去

### 責務の分離

| 責務 | 担当層 | Vue.js 3コアの関与 |
| --- | --- | --- |
| XSS防止 | フレームワーク層 | テンプレート補間の自動エスケープ、属性検証 |
| CSP準拠 | フレームワーク層 | Trusted Typesポリシー |
| 入出力検証 | フレームワーク層 | 属性名・値・イベントハンドラの検証 |
| 認証 | アプリケーション層 | 直接実装なし |
| 認可 | アプリケーション層 | 直接実装なし |
| 暗号化 | アプリケーション/インフラ層 | 直接実装なし |
| セッション管理 | サーバー層 | 直接実装なし |
| CSRF対策 | サーバー層 | 直接実装なし |
| CORS/HSTS | サーバー/インフラ層 | 直接実装なし |
