Webサイトの「防犯カメラ」を設置しよう！CSPで守るサイトの安全
こんにちは！セキュリティの世界へようこそ。
Webサイトを作っていると、「SQLインジェクション」や「XSS（クロスサイトスクリプティング）」といった怖い言葉を耳にすることがありますよね。「自分のサイトは大丈夫かな？」と不安になることもあるかもしれません。
今日は、そんなWebサイトを「泥棒」から守るための強力な盾、CSP（Content-Security-Policy）について、身近な例えを交えながら一緒に学んでいきましょう。
—
「勝手に入り込む泥棒」を防ぐ仕組み
WebサイトにおけるXSS攻撃を、「あなたの家に、勝手に知らない誰かが侵入して、勝手に壁に落書きをしていく」という状況に例えてみます。
普通なら、玄関（サーバー）の鍵を閉めていれば大丈夫そうですよね。でも、もし「信頼できる業者」を装って、実は悪い奴らが紛れ込んでいたらどうでしょう？ その業者が勝手に家の中の家具を動かしたり、大事な金庫を開けようとしたりする……これが、XSS攻撃の正体です。
CSPは、そんな事態を防ぐための「家の中の行動制限ルール」です。
「この部屋には入っていいけど、この部屋はダメ」「この業者は呼んでいいけど、あっちの業者はダメ」という細かいルールを、あらかじめ玄関の掲示板（HTTPレスポンスヘッダー）に貼っておくようなイメージですね。
—
CSPの基本ディレクティブを覗いてみよう
CSPは、ブラウザに対して「このサイトで何を実行していいか」を指示します。主要な設定を見ていきましょう。
1. default-src 'self'：家の基本ルール
これは「基本的には、自分の家（サーバー）にあるものしか信じない」という設定です。
外部の怪しいサイトから何かを読み込もうとしても、ブラウザが「ルール違反です！」と止めてくれます。
2. script-src 'self' https://trusted.example.com：スクリプトの入場制限
ここが一番重要です。家の中を勝手に歩き回れる「スクリプト（プログラム）」の入場許可証です。
'self' は「自分のサイト内のファイルならOK」という意味。さらに信頼できる外部のドメインがあれば、ここに追記して許可を出します。
3. object-src 'none'：不要な道具は持たせない
昔のWebサイトで使われていたプラグイン（Flashなど）の実行を制限します。現代のWeb開発ではほとんど不要なので、'none' にして「一切許可しない」のが鉄則です。
—
実践！CSPを設定してみよう
では、実際にWebサーバーから送るヘッダー設定の例を見てみましょう。
HTTPレスポンスヘッダーの例
Content-Security-Policy: default-src ‘self’; script-src ‘self’ https://apis.google.com; object-src ‘none’; style-src ‘self’ https://fonts.googleapis.com;
設定のポイント：
default-src 'self': 基本は自分のサイト内のみ許可。script-src 'self' https://apis.google.com: 自分のサイトと、GoogleのAPIだけスクリプトの実行を許可する。object-src 'none': プラグインは動かさない（セキュリティの盲点を潰す！）。style-src 'self' ...: CSS（見た目の設定）も信頼できる場所からのみ読み込む。
—
最初の一歩は「報告モード」から
いきなり厳格なルールを作ると、今まで動いていた機能が突然止まってしまい、慌てることになります。まずは「違反があったら報告だけする」モードでテストしましょう。
実際にブロックはせず、違反内容をサーバーに報告させる設定
Content-Security-Policy-Report-Only: default-src ‘self’; report-uri /csp-violation-report-endpoint;
このように Content-Security-Policy-Report-Only を使うと、サイトの表示を崩さずに、「どこでどんなルール違反が起きそうか」をログとして記録できます。これを使って、自分のサイトの「何がどこから読み込まれているか」を把握するのが、プロのエンジニアの第一歩です。
—
まとめ：セキュリティは「少しずつの積み重ね」
CSPは、魔法の杖ではありません。でも、もしどこかで開発者がミスをして悪いコードが混入してしまっても、CSPが「おっと、そのスクリプトは許可リストにないよ！」と弾き飛ばしてくれます。
セキュリティ対策は、完璧を目指すよりも、「泥棒が嫌がる家にする（多層防御）」ことが大切です。今日学んだCSPという防犯カメラを、ぜひあなたのサイトにも設置してみてください。
一歩ずつ、確実に。あなたの書くコードが、世界を少しだけ安全にしていきます。
また次のトピックでお会いしましょう！
コメント