Content Security Policy(CSP)とは？不正スクリプトを防ぐ仕組み

CSPとは何か

CSP(Content Security Policy)は、ブラウザに対して「このページではどこから読み込んだスクリプトや画像、スタイルを許可するか」を宣言する仕組みです。HTTPレスポンスヘッダー、またはメタタグで指定します。

本来読み込まれるはずのない外部スクリプトをブラウザ側でブロックできるため、悪意あるコードが混入してもページ上で実行されにくくなります。攻撃の入口を狭める、いわば門番のような役割です。

なぜCSPが必要なのか

代表的な脅威がXSS(クロスサイトスクリプティング)です。入力フォームやコメント欄に攻撃者がスクリプトを仕込むと、他の利用者のブラウザでそれが実行され、Cookieやセッションが盗まれる恐れがあります。

CSPで許可するスクリプトの出どころを限定しておけば、たとえコードが紛れ込んでも実行段階で止められます。コードを完全に防げなくても、被害の発生を最後の砦で食い止められるのが価値です。

実務ではどこで関係する？

CSPは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

Content Security Policy(CSP)について迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
• 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
• 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
• 運用の話: 期限、差し替え、削除、共有メッセージまで決める

主なディレクティブの意味

CSPは「ディレクティブ」と呼ばれる項目の集まりで構成されます。default-srcは全体の既定値、script-srcはスクリプトの読み込み元、style-srcはスタイル、img-srcは画像の読み込み元を指定します。

値には自分自身を表すself、特定のドメイン、すべてを禁止するnoneなどを書きます。none寄りで始めて、必要なものだけを足していくのが安全な進め方です。

CSPを設定する手順

いきなり厳しくすると正常な表示まで壊れるため、段階的に進めます。次の流れが基本です。

1. まず現状のページが読み込んでいるスクリプトや画像の出どころを洗い出す
2. 違反を記録するだけのレポート専用モードで様子を見る
3. レポート内容を確認し、正当な読み込み元を許可リストに加える
4. 問題がなくなったら実際にブロックする本番モードに切り替える
5. 外部サービスを追加するたびにポリシーを見直す

運用で気をつけたいこと

インラインスクリプト(HTML内に直接書いたコード)は便利ですが、CSPでは原則ブロック対象になります。どうしても使う場合はnonceやハッシュで個別に許可します。

CSPは強力ですが万能ではありません。サーバー側の入力チェックや認証など、他の対策と組み合わせて初めて意味を持ちます。設定後はブラウザの開発者ツールで違反が出ていないか確認する習慣をつけましょう。

一時共有ページとセキュリティ

社内レビューや関係者への一時共有では、誰でもアクセスできるページにスクリプトを差し込まれるリスクは小さくしたいものです。CSPの考え方と同じく、見せる範囲を絞ることが守りの基本になります。

ギガサイト便はHTMLやZIPサイトをドロップするだけで共有URLを発行でき、URLのみ・パスワード・メール認証・会社ドメイン認証から閲覧方法を選べます。一時的なページに認証を組み合わせれば、関係者以外の目に触れにくい状態でレビューを回せます。