Content Security Policy（CSP）とは何ですか？

Webページが読み込めるリソースの出所を制限するセキュリティ機構。XSS攻撃の被害を軽減する。

Content Security Policy（CSP）のポイントは？

HTTPレスポンスヘッダーで設定するセキュリティポリシー。スクリプト、画像、スタイルシート等の読み込み元を制限。XSS攻撃で注入されたスクリプトの実行を防止。report-uriでポリシー違反をサーバーに報告できる

【こんてんつせきゅりてぃぽりしー】

Content Security Policy（CSP）とは？

💡 「このページが読み込んでいいもの」を制限する

📌 このページのポイント

HTTPレスポンスヘッダーで設定するセキュリティポリシー
スクリプト、画像、スタイルシート等の読み込み元を制限
XSS攻撃で注入されたスクリプトの実行を防止
report-uriでポリシー違反をサーバーに報告できる

CSP（Content Security Policy）のイメージ

ひよこ

CSPって具体的に何をするの？

ペンギン先生

HTTPヘッダーに Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com と設定すると、スクリプトは自サイトとcdn.example.comからしか読み込めなくなる。攻撃者がXSSで<script src="https://evil.com/steal.js">を注入しても、evil.comは許可リストにないから実行がブロックされるんだ

ひよこ

設定が難しそう…

ペンギン先生

いきなり厳しいポリシーを設定するとサイトが壊れることがある。まずはContent-Security-Policy-Report-Only（報告のみモード）で試して、ブロックされるリソースを確認→ポリシーを調整→本番適用、というステップがおすすめ。CSP Evaluatorツールでポリシーの強度を事前チェックもできるよ

ひよこ

inline scriptはどう扱う？

ペンギン先生

CSPのデフォルトではインラインスクリプト（<script>タグ内に直書き）はブロックされる。対策は①'unsafe-inline'を許可（セキュリティ低下するので非推奨）、②nonce属性（サーバーが毎回ランダムな値を生成して埋め込む）、③hash値でスクリプトの内容を指定。nonceが最も実用的だよ

ひよこ

CSP以外のセキュリティヘッダーは？

ペンギン先生

X-Frame-Options（iframe埋め込み防止、クリックジャッキング対策）、X-Content-Type-Options（MIMEスニッフィング防止）、Strict-Transport-Security（HSTS、HTTPS強制）、Referrer-Policy（リファラ情報の制御）。SecurityHeaders.comで自サイトのヘッダー設定をスキャンできるから試してみてね

まとめ：ざっくりこれだけ覚えればOK！

「CSP」って出てきたら「Webページのリソース読み込み元を制限するセキュリティ設定」と思えればだいたいOK！

📖 おまけ：英語の意味

「Content Security Policy」＝コンテンツセキュリティポリシー

💬 Content（コンテンツ）のSecurity（安全性）をPolicy（方針）で守る仕組みだよ

← 用語集にもどる

Content Security Policy（CSP） とは？

Content Security Policy（CSP）とは？