القائمة
Web アプリケーションのセキュリティ設計・実装ガイド（フレームワーク非依存）。入力バリデーション、インジェクション対策、オリジン制御、セキュリティヘッダ、依存関係管理、シークレット管理、セキュリティログをカバー。脆弱性レビュー、セキュリティ設計、コードレビューのセキュリティ観点確認時に使用。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | web-security |
| description | Web アプリケーションのセキュリティ設計・実装ガイド（フレームワーク非依存）。入力バリデーション、インジェクション対策、オリジン制御、セキュリティヘッダ、依存関係管理、シークレット管理、セキュリティログをカバー。脆弱性レビュー、セキュリティ設計、コードレビューのセキュリティ観点確認時に使用。 |
Web アプリのセキュリティ設計・実装のフレームワーク非依存ガイド。認証/認可の設計は auth-design を参照。
1. 多層防御（Defense in Depth）: 単一の対策に依存しない
2. 最小権限の原則: 必要最小限のアクセス権のみ付与
3. デフォルト拒否: 明示的に許可されたもの以外は拒否
4. フェイルセキュア: エラー時は安全側に倒す
5. 入力は信頼しない: すべての外部入力を検証
- サーバーサイドで必ず検証（クライアントのみは不十分）
- 許可リスト方式（拒否リスト方式は漏れが生じやすい）
- 型チェック + 長さ制限 + 範囲チェック + 形式検証
- 文字エンコーディングの正規化
- 拡張子の許可リスト
- Content-Type の検証（拡張子だけでなくマジックバイトも確認）
- ファイルサイズ制限
- 保存先パスのサニタイズ（パストラバーサル防止）
- アップロード先はWebルート外に配置
| 脅威 | 対策 |
|---|---|
| SQL インジェクション | パラメータ化クエリ、ORM の適切な使用、動的クエリ構築の回避 |
| XSS | 出力エスケープ、CSP ヘッダー、innerHTML 回避、HTTPOnly Cookie |
| コマンドインジェクション | シェル実行の回避、やむを得ない場合はエスケープ + 許可リスト |
| パストラバーサル | パス正規化、ベースディレクトリ外アクセス防止 |
| CSRF | トークンベースの検証、SameSite Cookie、Origin ヘッダー検証 |
原則:
- Access-Control-Allow-Origin に * は本番で使わない
- 許可するオリジンを明示的に列挙
- credentials 使用時は具体的なオリジンが必須
- preflight キャッシュ（Access-Control-Max-Age）を適切に設定
設定項目:
- Allow-Origin: 許可するオリジン
- Allow-Methods: 許可する HTTP メソッド
- Allow-Headers: 許可するリクエストヘッダー
- Expose-Headers: クライアントがアクセス可能なレスポンスヘッダー
対策の組み合わせ:
1. SameSite Cookie 属性（Lax or Strict）
2. CSRF トークン（フォーム送信）
3. Origin / Referer ヘッダーの検証
4. カスタムヘッダーの要求（API リクエスト）
| ヘッダー | 目的 | 推奨値 |
|---|---|---|
| Content-Security-Policy | XSS 防止 | リソースの読み込み元を制限 |
| Strict-Transport-Security | HTTPS 強制 | max-age=31536000; includeSubDomains |
| X-Content-Type-Options | MIME スニッフィング防止 | nosniff |
| X-Frame-Options | クリックジャッキング防止 | DENY or SAMEORIGIN |
| Referrer-Policy | リファラー情報制御 | strict-origin-when-cross-origin |
| Permissions-Policy | ブラウザ機能制御 | 必要な機能のみ許可 |
詳細: references/security-headers.md
方針:
- ロックファイルを必ずバージョン管理に含める
- 定期的な脆弱性スキャン（CI に組み込む）
- 依存パッケージは最小限に
- メジャーバージョンアップはテスト付きで行う
- セキュリティアドバイザリの監視
自動化:
- GitHub Dependabot / Renovate で自動更新
- npm audit / pip audit / govulncheck を CI に組み込み
原則:
- ソースコードにシークレットを含めない
- .env ファイルはバージョン管理に含めない（.env.example のみ）
- 環境変数 or シークレットマネージャーで管理
- ログにシークレットを出力しない
- 定期的なキーローテーション
- アクセスログの記録
検出:
- pre-commit フックでシークレットパターンを検出
- CI でのシークレットスキャン
記録すべきイベント:
- 認証の成功/失敗
- 認可の失敗（アクセス拒否）
- 入力バリデーション失敗
- 予期しないエラー
- 管理操作の実行
記録してはいけないもの:
- パスワード（平文/ハッシュ含む）
- トークン・セッションID
- 個人情報（マスキングする）
- クレジットカード番号
ログの設計:
- 構造化ログ（JSON 形式）
- タイムスタンプ（UTC）
- リクエスト ID での追跡
- ログレベルの適切な使い分け
原則:
- 内部エラーの詳細をクライアントに露出しない
- スタックトレースは本番で非表示
- 一般的なエラーメッセージを返す
- 詳細はサーバーログに記録
- fail-secure: エラー時は安全側に倒す
アンチパターン:
- ❌ "ユーザー名が見つかりません" → 攻撃者にユーザー存在を教える
- ✅ "認証情報が正しくありません" → 情報を限定
詳細: references/security-review-checklist.md
Generate draw.io diagrams as .drawio files, optionally export to PNG/SVG/PDF with embedded XML
Figma MCP を使ってデザインを FE コードに変換するスキル。 Trigger when: Figma URL が共有された時、デザインからコンポーネント実装時、 UI 実装でデザイン参照が必要な時、"Figma", "デザイン", "UI実装" への言及時、 「このデザインを実装して」「Figma から」「デザイン通りに」と言われた時。 Always use with: /web-design-principles
プロジェクト全体の統括エージェント向けスキル。要件整理から技術選定・アーキテクチャ設計・タスク分解・委譲までをカバー。git worktreeを活用した並列開発オーケストレーション（featureブランチ管理、BE/FE統括への委譲、横断レビュー）も担う。プロジェクト全体を俯瞰し、適切なエージェント/スキルに委譲する。新規プロジェクト立ち上げ、技術選定、全体設計、タスク分解・委譲、並列開発時に使用。
Webデザイン実装の鉄則ガイド。CSS/レイアウト設計の原則を提供。 Trigger when: UI/UX実装時、CSS設計時、レイアウト実装時、レスポンシブ対応時、 アクセシビリティ確認時、"レイアウト", "CSS", "スタイル" への言及時。 /figma-to-code スキルと併用する場合に自動で参照される。
Codex CLIワーカーエージェントを起動してタスクを実行する。 Claude CodeがオーケストレーターとしてCodexを呼び出すハイブリッド構成。 トリガー: 「Codexで実行」「Codexに任せて」「並列でCodex」「高速に処理」
CSS の包括的なベストプラクティスガイド（フレームワーク非依存）。パフォーマンス最適化、保守性、シンプルなコード、親子要素の相対値設計、モダン CSS 機能（Container Queries、:has()、ネイティブネスティング、Cascade Layers）をカバー。CSS 設計・実装・レビュー時に使用。Tailwind CSS 等のユーティリティフレームワーク使用時は tailwind-css スキルを参照。