[自動レビュー 2026-06-15] セキュリティ修正・メモリリーク・バリデーション・CI追加

[stewroux]

日次自動コードレビュー（2026-06-15）による修正

このPRは stewroux/Toy-Styler-AI の日次セキュリティスキャン＆コードレビューで発見された問題の自動修正です。

---

修正内容

1. .gitignore に .env* パターンを追加（Issue #7）

変更ファイル: .gitignore

*.local のみが除外されており、.env や .env.production が git 追跡対象になっていた問題を修正。GEMINI_API_KEY を含む env ファイルが誤ってコミットされるリスクを排除。

+ # Environment variable files
+ .env
+ .env.*
+ !.env.example

合わせて .env.example テンプレートを追加。

---

2. Object URL のメモリリーク修正（Issue #9）

変更ファイル: App.tsx

URL.createObjectURL() で生成したブロブ URL が revoke されずにメモリに蓄積する問題を修正。useEffect のクリーンアップで URL.revokeObjectURL() を呼ぶよう変更。

+ useEffect(() => {
+   return () => {
+     if (originalImageUrl) URL.revokeObjectURL(originalImageUrl);
+   };
+ }, [originalImageUrl]);

---

3. ImageUploader にファイルサイズ・タイプ検証を追加（Issue #10）

変更ファイル: components/ImageUploader.tsx

ドラッグ&ドロップで非対応ファイルやサイズ超過ファイルが送信されるリスクを修正。

• MIME タイプ検証: image/png / image/jpeg / image/webp のみ受け入れ
• 最大ファイルサイズ: 10MB
• エラーメッセージを onImageUpload コールバック経由で App.tsx のエラー表示に伝達

UI のヒントも「最大 10MB」と明記。

---

4. tsconfig.json に "vite/client" 型を追加

変更ファイル: tsconfig.json

Vite プロジェクトで import.meta 等の型解決に必要な "vite/client" を types 配列に追加。

---

5. GitHub Actions CI ワークフローを追加

追加ファイル: .github/workflows/ci.yml

• トリガー: main ブランチへの push / PR、claude/** ブランチへの push
• ステップ: npm install → tsc --noEmit（型チェック）→ npm run build
• GEMINI_API_KEY は GitHub Secrets から注入（キーをコードに含めない）

---

6. Claude Code SessionStart フックを追加

追加ファイル: .claude/hooks/session-start.sh, .claude/settings.json

セッション開始時に自動で:

• node_modules が無ければ npm install を実行
• .env ファイルの存在を確認して警告

---

未修正の問題（別途対応が必要）

Issue	深刻度	理由
#6 API Key がクライアントバンドルに埋め込まれる	CRITICAL	バックエンドプロキシへの構造変更が必要
#8 外部CDNにSRIハッシュがない	HIGH	Vite バンドルへの全面移行が必要

---

テスト計画

• npm install が正常に完了する
• npx tsc --noEmit でエラーが出ない
• npm run build が成功する
• 画像アップロード → 10MB 超のファイルでエラーメッセージが表示される
• 非対応 MIME タイプ（例: PDF ドロップ）でエラーが表示される
• 複数画像を切り替えてもメモリ使用量が増え続けない

関連 Issue: #6 #7 #8 #9 #10

---

Generated by Claude Code