CSPとは？Content Security Policyの仕組みを解説

CSPとは「Content Security Policy」の略で、WebページがどのJavaScript・CSS・画像・iframeなどを読み込んでよいかをブラウザへ指示するセキュリティ機能です。

特にクロスサイトスクリプティング（XSS）などで悪意あるJavaScriptを埋め込まれた場合に、そのコードが実行される範囲を制限する追加防御として使われます。 ただし、設定を厳しくしすぎると正常なスクリプトや画像まで止まるため、いきなり本番で強制せず、Report-Onlyで確認しながら導入するのが基本です。

CSPとは？

CSPは、ブラウザに「このページでは、どこから読み込んだスクリプト・画像・CSSなどを許可するか」を伝えるセキュリティポリシーです。

W3CのContent Security Policy Level 3では、ページが取得・実行できるリソースや、セキュリティ上重要な動作を開発者が制御する仕組みとして定義されています。

CSPは何を防ぐために使う？

CSPは特に、クロスサイトスクリプティング（XSS）の被害を抑える追加防御として重要です。

ただし、CSPはXSS脆弱性そのものを修正する機能ではありません。 入力値のエスケープや安全な実装を行ったうえで、さらに被害を抑えるための防御層として使います。

CSPはどこに設定する？

一般的には、Webサーバーが返すHTTPレスポンスヘッダーへ設定します。

Content-Security-Policy: default-src 'self'

この例では、多くのリソースについて「原則として自分自身のオリジンから読み込む」という基本ルールを指定します。

CSPはHTMLのmeta要素でも一部設定できますが、HTTPヘッダーでしか使えない機能もあります。 本格的な運用ではレスポンスヘッダーでの設定が分かりやすいです。

CSPの基本的な書き方

CSPは「ディレクティブ」と「許可する値」を組み合わせて記述します。

Content-Security-Policy:
  default-src 'self';
  img-src 'self' https:;
  script-src 'self';

この例では、基本は自サイトのみを許可し、画像だけHTTPSの外部URLも許可しています。

default-srcとは？

default-srcは、多くのリソース種別に対する基本の読み込み元を指定するディレクティブです。

Content-Security-Policy: default-src 'self'

個別のscript-srcやimg-srcなどが指定されていない場合、対応するリソースではdefault-srcがフォールバックとして使われます。

script-srcとは？

script-srcは、JavaScriptの読み込み・実行に関する制御を行う重要なディレクティブです。

Content-Security-Policy:
  script-src 'self';

外部の解析タグや広告、CDNなどを使うサイトでは、そのサービスに必要な読み込み元やnonce・hashなどを設計する必要があります。

‘self’とは？

'self'は、そのページと同じオリジンのリソースを許可するキーワードです。

「自分のサイトなら全部安全」という意味ではありません。 自サイト内へ不正ファイルをアップロードされた場合など、別の対策も必要です。

nonceとは？

nonceは、レスポンスごとにランダムな値を生成し、その値を持つスクリプトだけ実行を許可する方法です。

Content-Security-Policy:
  script-src 'nonce-ランダムな値';

<script nonce="ランダムな値">
  // 許可する処理
</script>

ブラウザはCSP側とHTML側のnonceが一致したスクリプトだけを実行します。

hashとは？

hash方式では、許可したいスクリプト内容のハッシュ値をCSPへ登録します。 ブラウザ側で実際のスクリプトをハッシュ化し、一致した場合だけ実行を許可します。

Content-Security-Policy:
  script-src 'sha256-...';

MDNでは、SHA-256・SHA-384・SHA-512などを利用する方法が案内されています。

‘unsafe-inline’とは？

'unsafe-inline'は、インラインJavaScriptやインラインCSSを広く許可するために使われる値です。

MDNの実装ガイドでも、可能であればnonceやhashを使ったstrict CSPが推奨されています。

object-src ‘none’とは？

object-srcは、objectやembedなどの埋め込みリソースを制御するディレクティブです。

object-src 'none'

現在使っていない埋め込み方式を明示的に禁止することで、攻撃面を減らせます。 MDNのstrict CSP例でもobject-src 'none'が使われています。

base-uri ‘none’とは？

base-uriは、HTMLのbase要素で指定できる基準URLを制御します。

base-uri 'none'

base要素を使わないサイトなら、'none'で禁止する考え方があります。 strict CSPの代表例でも利用されています。

img-src・style-src・font-srcとは？

Google Fonts、YouTube埋め込み、アクセス解析、地図、外部APIなどを使っているサイトでは、該当ディレクティブへ必要な接続先を設定します。

CSPを設定するとサイトが壊れることがある？

あります。

現在のサイトが外部JavaScript、インラインスクリプト、外部フォント、iframeなどを利用している場合、CSPを急に厳しくすると正常なリソースまでブロックされます。

Content-Security-Policy-Report-Onlyとは？

Report-Onlyは、CSP違反を実際にはブロックせず、「この設定なら何が違反になるか」を確認するためのモードです。

Content-Security-Policy-Report-Only:
  default-src 'self';

この状態ならポリシー違反があってもリソースは原則としてそのまま動作し、ブラウザの開発者ツールやレポート先で違反を確認できます。

CSP違反はどう確認する？

CSPによってリソースがブロックされると、ブラウザの開発者ツールのConsoleにエラーや警告が表示されます。

エラーが出たからといって、最初から*や'unsafe-inline'で広く許可しないことが重要です。

CSPレポートを送信する仕組み

CSPでは、違反内容をサーバー側へ送信して収集する仕組みも利用できます。

MDNでは現在、Reporting APIとreport-toを使う方法が推奨されています。 一方、ブラウザ互換性の都合から従来のreport-uriも併用が必要になるケースがあります。

WordPressでCSPを使うときの注意点

WordPressは、テーマ・プラグイン・ブロック・外部サービスによって読み込むリソースが増えやすいため、CSP設計が複雑になりやすい環境です。

共用レンタルサーバーでもCSPは設定できる？

多くの場合、Webサーバー設定、.htaccess、アプリ側のレスポンスヘッダー設定などでCSPを追加できます。 ただし、利用できる方法はサーバー環境によって異なります。

CSPとセキュリティヘッダーの違い

CSPは、Webセキュリティに使われるHTTPレスポンスヘッダーの1つです。

CSPを設定すればXSS対策は完璧？

完璧ではありません。

CSPは非常に有効な追加防御ですが、アプリ側の入力処理や出力エスケープが不要になるわけではありません。 また、許可したドメイン側が侵害された場合や、CSP自体が広すぎる場合は十分な防御にならないこともあります。

初心者向けCSP導入手順

CSPでよくある失敗

• 他サイトの設定をそのままコピーする
• いきなり本番で厳しいCSPを強制する
• 動かないたびに*で許可する
• 'unsafe-inline'を安易に追加する
• nonceを固定値で使い回す
• 解析・広告・決済・フォームなどの外部通信を見落とす
• Report-Onlyのまま本番強制へ移行しない
• CSPだけでXSS対策が完了したと考える

教科書判定

よくある質問

まとめ