React2Shell (CVE-2025-55182) ビジュアライゼーション

React2Shellの脆弱性（React Server Componentsにおける重大なCVSS 10.0のリモートコード実行欠陥）を解説する、インタラクティブな教育用ビジュアライゼーションです。

これは何か

5ステップで構成されたナレーション付きのウォークスルーです。以下の内容を解説します。

1. 従来のSSR - サーバーサイドレンダリングの仕組みと「JSONボトルネック」問題
2. RSCストリーミング - React Server Componentsがストリーミングでこれを解決する方法
3. エクスプロイト - プロトタイプ汚染とガジェットチェーンがどのようにRCEを可能にするか
4. 修正 - 攻撃を防ぐ1行の hasOwnProperty チェック
5. 重要なポイント - 安全なアーキテクチャのために学んだ教訓

各ステップの特徴:

• 単語ごとのキャプションを備えた同期音声ナレーション
• ナレーションに合わせたキーフレーム駆動のアニメーション
• ビデオプレーヤーコントロール（再生/一時停止、シーク、速度、キャプション）
• 重要な概念の視覚的なハイライト

モバイル対応

このビジュアライゼーションは完全にレスポンシブで、モバイルに最適化されたエクスペリエンスを提供します。

• 自動スクロール: モバイルビューポート（1000px以下）では、ページが自動的にスクロールしてアニメーションに追随します。スクロールターゲットはWhisperタイムスタンプデータに基づき、ナレーションの進行に合わせて焦点（ブラウザ→ネットワーク→サーバー→説明）を視界に保ちます。
• 固定ビデオコントロール: 再生/一時停止とタイムラインコントロールは下部に固定表示され、スクロール中も簡単にアクセスできます。
• モバイルキャプション: モバイルでは、ビデオコントロールエリアに単語ごとのキャプションが表示されます。
• レスポンシブレイアウト: グリッドは垂直に積み重なり、フォントサイズは適切にスケールし、タッチ操作に適したコントロールとなります。

マルチオーディエンス対応

このビジュアライゼーションは3つのオーディエンスレベルをサポートし、各レベルに合わせたナレーションを提供します。

ユーザーはビデオコントロールの「対象ユーザー」ドロップダウンからリアルタイムでレベルを切り替えることができます。

技術スタック

• SvelteKit（Svelte 5 runes使用）
• ElevenLabs（AI音声生成）
• OpenAI Whisper（音声文字起こしとタイムスタンプ抽出）
• TypeScript（全体）

プロジェクト構成

├── scripts/                    # ナレーションスクリプト（ソースオブトゥルース）
│   ├── expert/
│   │   ├── ssr-narration.txt
│   │   ├── rsc-narration.txt
│   │   ├── exploit-narration.txt
│   │   ├── fix-narration.txt
│   │   └── lessons-narration.txt
│   ├── practitioner/
│   │   └── ... (同じファイル構成)
│   ├── stakeholder/
│   │   └── ... (同じファイル構成)
│   └── transcribe.py           # Whisper文字起こしスクリプト
├── static/audio/               # 生成されたMP3ファイル
│   ├── expert/
│   │   ├── ssr.mp3
│   │   ├── rsc.mp3
│   │   ├── exploit.mp3
│   │   ├── fix.mp3
│   │   └── lessons.mp3
│   ├── practitioner/
│   │   └── ... (同じファイル構成)
│   └── stakeholder/
│       └── ... (同じファイル構成)
├── src/lib/data/               # Whisper JSON出力（単語のタイムスタンプ）
│   ├── expert/
│   │   ├── ssr-whisper.json
│   │   └── ...
│   ├── practitioner/
│   │   └── ...
│   └── stakeholder/
│       └── ...
└── src/lib/utils/triggers/     # レベルごとのアニメーショントリガーフレーズ
    ├── expert/
    ├── practitioner/
    └── stakeholder/

開発

npm install
npm run dev

音声/ナレーションの変更

1. スクリプトを編集する

スクリプトは scripts/{level}/ にあります:

• ssr-narration.txt
• rsc-narration.txt
• exploit-narration.txt
• fix-narration.txt
• lessons-narration.txt

各スクリプトの下部には、アニメーション同期のためのトリガーフレーズコメントが含まれています。

2. ElevenLabsで音声を生成する

スクリプトをElevenLabsにアップロードし、MP3をダウンロードします。

3. 音声ファイルを配置する

MP3を static/audio/{level}/ にステップ名で配置します（例：static/audio/expert/ssr.mp3）。

4. Whisperで文字起こしする

単一ファイル:

python scripts/transcribe.py ssr expert
python scripts/transcribe.py rsc practitioner

バッチモード（レベルの全ファイル）:

python scripts/transcribe.py --batch expert
python scripts/transcribe.py --batch practitioner
python scripts/transcribe.py --batch stakeholder
python scripts/transcribe.py --batch all          # 全15ファイル

オプション:

• --model small - より大きなWhisperモデルを使用して精度を向上させる
• --dry-run - 実行せずに文字起こし対象をプレビューする

スクリプトは単語レベルのタイムスタンプ付きJSONを src/lib/data/{level}/ に出力します。

5. トリガーフレーズを更新する（必要に応じて）

ナレーションの文言が大幅に変更された場合は、 src/lib/utils/triggers/{level}/ 内のトリガーフレーズを新しいスクリプトに合わせて更新してください。

アニメーションシステムの仕組み

1. Whisper JSON には各オーディエンスレベルの単語レベルのタイムスタンプが含まれています
2. トリガー抽出 (src/lib/utils/triggers/) は各レベルのキーフレーズを見つけます
3. キーフレーム はタイムスタンプをアニメーション状態にマッピングします
4. タイムラインコントローラー (src/lib/stores/timeline.svelte.ts) はオーディオとアニメーションを同期します
5. コンポーネント は getAnimationState() を使用して currentTime から視覚状態を導き出します
6. 遅延読み込み はWhisperデータをオンデマンドでフェッチしキャッシュします

本番用ビルド

npm run build
npm run preview

参考資料

• react2shell.com - 元の開示
• Wiz Deep Dive
• Datadog Security Labs

ライセンス

教育目的。セキュリティ意識向上のために作成されました。