【入門編】Content-Security-Policy (CSP) によるXSSの多層防御 – アプリケーションセキュリティ & 安全な開発防御ガイド

玄関の鍵をかけたはずが…？「CSP」で守る、あなたのウェブサイトの防犯術

こんにちは！セキュリティの世界へようこそ。今日は、ウェブサイトの「防犯」について、少しだけ掘り下げてお話ししたいと思います。

皆さんは、自分の家を出るときに必ず鍵をかけますよね？ウェブ開発の世界でも、サーバーにファイアウォールを立てたり、SSL（https）を導入したりするのは、いわば「家の外壁を頑丈にする」作業です。でも、もし「泥棒が、信頼していた郵便屋さんになりすまして家の中に入ってきたら」どうなるでしょうか？

ウェブの世界では、これが「クロスサイトスクリプティング（XSS）」という攻撃です。今日は、この侵入者をガッチリ食い止めるための心強い守護神、「Content-Security-Policy（CSP）」について、一緒に紐解いていきましょう。

—

1. XSS攻撃って、そもそも何？

例えば、皆さんのサイトに掲示板があったとします。そこに悪意のある誰かが、スクリプト（命令文）を書き込んだらどうなるでしょう？

「このページを見た人のブラウザで、勝手に怪しいサイトに転送する命令を実行せよ！」

普通の鍵（従来のセキュリティ対策）は「外部からの侵入」には強いのですが、一度サイトの中に紛れ込んだ悪意ある命令には、「あ、これはサイトの一部だね」と勘違いして、そのまま実行を許してしまうことがあるんです。これがXSSの恐ろしいところ。家の中に泥棒を招き入れてしまっているような状態ですね。

—

2. CSP（Content-Security-Policy）は「信頼リスト」

そこで登場するのがCSPです。これは、ブラウザに対して「このサイトでは、どこの誰が書いたプログラムなら実行していいよ」という「信頼リスト（ホワイトリスト）」を事前に渡しておく仕組みです。

もし、泥棒がこっそり怪しいプログラムを紛れ込ませても、ブラウザが「おっと、このプログラムは信頼リストに入っていないぞ！」と気づいて、実行をブロックしてくれるわけです。

基本的な設定の書き方（HTTPヘッダー）

Webサーバーの設定で、以下のようなヘッダーを送信するだけで、防犯レベルが一気に上がります。

すべてのコンテンツを「自分自身のドメイン」からのみ読み込む設定
Content-Security-Policy: default-src ‘self’;

これだけで、「見知らぬ場所から持ってきたプログラム」は即座に動かなくなります。一歩ずつ、安全な環境を作っていきましょう！

—

3. 「インラインスクリプト」という盲点

CSPを導入する際、多くの開発者が頭を抱えるのが「インラインスクリプト」です。HTMLの中に直接と書くような書き方ですね。

実はこれ、泥棒が一番利用しやすい「家の壁に直接メッセージを書き込む」ような手法です。安全な開発のためには、できるだけ「別ファイル（.js）」に切り出すのが鉄則です。

でも、どうしても使いたい場合はどうすればいいでしょうか？そこで登場するのが「Nonce（ナンス）」という仕組みです。

Nonceを使った厳格な守り方

Nonceは、一言でいえば「毎回変わる使い捨ての通行証」です。

1. サーバーがページを生成するたびに、ランダムな文字列（パスワードのようなもの）を発行します。
2. CSPヘッダーにその文字列を含めます。
3. HTML内の


ヘッダーにも同じ通行証を記載

Content-Security-Policy: script-src 'nonce-random123';
こうすれば、泥棒が勝手にスクリプトを書いても、通行証（nonce）を持っていないのでブラウザに無視されるようになります。
---
4. 最後に：まずは「レポート」から始めよう
いきなり厳しい制限をかけると、今まで動いていた機能が突然止まってしまうこともあります。そんな時は、「Content-Security-Policy-Report-Only」というモードを使いましょう。
これを使うと、ポリシーに違反した内容を「実行はするけど、サーバーに報告だけする」ことができます。
練習用：ブロックはせずに、違反があったら教えてね！という設定

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-violation-report-endpoint;
このように、まずは現状のサイトで「誰が、どこから、どんなスクリプトを読み込んでいるか」を把握することから始めるのが、現場で失敗しないコツです。
---
まとめ
セキュリティは「一度設定して終わり」ではありません。しかし、CSPという強力な盾を装備するだけで、皆さんのサイトの安全性は劇的に向上します。
1. まずは default-src 'self' から始める。

2. インラインスクリプトを避け、Nonceを活用する。

3. Report-Onlyモードで、まずは現状を確認する。
一つひとつの積み重ねが、ユーザーの信頼を守る最強の防壁になります。皆さんの開発現場でも、ぜひ今日から「CSP」を取り入れてみてくださいね。応援しています！