# コンテンツセキュリティポリシー（CSP） (content-security-policy)

> 厳格なCSPヘッダーを確認・導入し、HTMLのサニタイズや Trusted Types と組み合わせてXSSや注入を防ぎます。

- カテゴリ: [ハードニング](https://www.myskills.tools/ja/categories/hardening/)
- 提供元: コミュニティ · David Dias
- リポジトリ: https://github.com/thedaviddias/Front-End-Checklist/tree/main/skills/content-security-policy (commit 4b0ddb9)
- SKILL.md: https://github.com/thedaviddias/Front-End-Checklist/blob/main/skills/content-security-policy/SKILL.md
- インストールコマンド: `npx skills add thedaviddias/Front-End-Checklist --skill content-security-policy`
- ライセンス: MIT
- 対応ツール: Any SKILL.md agent
- 権限: read-repo ✓, write-files ✓, shell ✗, network ✓
- 状態: スキャン済み
- ルールスキャンですべてのリスクを検出できるわけではありません。インストール前にこのスキルの SKILL.md を読み、権限を確認してください。

## 基本ルール

CSPは被害範囲を狭めるもので、出力エンコードやHTMLのサニタイズの代わりにはなりません。

## 実行フェーズ

1. **現状を確認** — CSPヘッダーの有無とディレクティブを確認し、innerHTML や dangerouslySetInnerHTML などの注入箇所を見ます。
2. **まずレポート専用** — まず Content-Security-Policy-Report-Only で試し、違反レポートを集めてサイトを壊さないようにします。
3. **ポリシーを厳格化** — 厳しい default-src から個別に許可し、インラインスクリプトは nonce か hash を使い、unsafe-inline と unsafe-eval を避けます。
4. **本番相当で検証** — 本番に近い環境で実際のレスポンスを確認し、大きなアプリでは Trusted Types を多層防御として加えます。

## 権限の説明（SKILL.md より）

| 機能 | 必要か | 説明 |
|---|---|---|
| ファイル書き込み | 必要 | CSPヘッダーを設定するためにサーバーやフレームワークの設定を変更し、注入箇所にサニタイズを加えます。 |
| コマンド実行 | 不要 | 特定のコマンド実行は求められません。 |
| 外部通信 | 一部で必要 | 対象サイトの実際のレスポンスヘッダーを確認するためだけにアクセスします。 |

## SKILL.md のフロントマター（YAML）

```yaml
---
name: content-security-policy
description: "Use when reviewing headers, forms, cookies, or third-party integrations related to Implement a content security policy. Validate the effective browser and HTTP behavior in a production-like environment."
metadata:
  category: security
  priority: high
  difficulty: advanced
  estimatedTime: "45"
  source: frontendchecklist.io
  url: https://frontendchecklist.io/rules/security/content-security-policy
---
```

ホーム: https://www.myskills.tools/ja/ · URL: https://www.myskills.tools/ja/skills/content-security-policy/