こんにちは。セキュリティの世界へようこそ。
日々、見えない脅威と戦うエンジニアの皆さん、本当にお疲れ様です。
今日は、Webアプリの「永遠の課題」とも言えるXSS（クロスサイトスクリプティング）について、そしてそれを根本から封じ込めるCSP（コンテンツセキュリティポリシー）という最強の盾についてお話しします。
「セキュリティ対策って、専門用語ばかりで難しそう…」と感じていませんか？ 大丈夫です。一緒に、身近な「家の防犯」に例えて紐解いていきましょう。
—
1. XSSって、結局どんな「泥棒」なの？
XSSを理解するために、皆さんのWebサイトを「大切なお家」だと想像してください。
- 反射型XSS: 泥棒が「あなたの家の鍵穴」に細工をして、通りがかった訪問者を騙して家の中（ブラウザ）へ怪しい招待状を送りつける手口です。
- 格納型XSS: 泥棒が「あなたの家の掲示板」に、見た目は普通のチラシだけど、読んだ瞬間に家の中に侵入する罠を仕掛ける手口です。一番タチが悪いです。
- DOM型XSS: 家の壁に元々ある「鏡」を悪用して、反射した光（スクリプト）で住人を惑わせる、少し高度な手口です。
共通しているのは、「あなたの家の持ち物（サイトの表示内容）に、泥棒が自分の勝手な命令を書き込んで、訪問者に実行させる」という点です。
—
2. CSPは「家の入り口の厳しい管理人」
これまでXSS対策といえば、「入力された文字をチェックする（サニタイズ）」が主流でした。でも、これだけだと泥棒の進化に追いつけません。
そこで登場するのがCSP (Content-Security-Policy) です。これは、Webサイトのレスポンスヘッダーに仕込む「ブラウザへの命令書」です。
「このサイトでは、許可した場所以外からのスクリプトは絶対に動かすな！」とブラウザに厳しく命じることで、万が一泥棒が罠を仕込んでも、ブラウザが「お前は許可されていないスクリプトだ！」と実行を拒否してくれるのです。
—
3. 「厳格なCSP」を作るための魔法：nonceとstrict-dynamic
昔のCSPは設定が非常に面倒で、結局「何でもあり」な設定にしてしまいがちでした。しかし、現代のCSPは「nonce（ナンス）」と「strict-dynamic」を使うことで、驚くほどスマートかつ強固になります。
nonce（使い捨ての合言葉）
サーバーがページを生成するたびに、毎回違う「合言葉（ランダムな文字列）」を発行します。
「この合言葉を持っているスクリプトだけが動いていいよ」というルールです。泥棒は合言葉を知らないので、罠を仕込んでもブラウザに無視されます。
strict-dynamic（信頼の連鎖）
「このスクリプトが信頼できるなら、そこから読み込まれるスクリプトも信頼していいよ」という、現代的なルールです。これがあると、複雑なライブラリ管理が劇的に楽になります。
—
4. 実装サンプル：こう書けば防げる！
サーバーの設定（ApacheやNginx）や、プログラムのレスポンスヘッダーに以下のように設定してみてください。
セキュリティヘッダーの例
Content-Security-Policy:
default-src ‘self’; # 基本は自分のサイト内からのみ読み込む
script-src ‘nonce-RANDOM_STRING’ # 合言葉を持ったスクリプトだけ許可
‘strict-dynamic’ # 信頼したスクリプト経由の読み込みも許可
‘unsafe-inline’ # (後方互換用：モダンブラウザはnonceで上書き)
https:; # HTTPS通信のみ許可
object-src ‘none’; # 古いプラグイン（Flash等）は完全に禁止
【開発現場でのポイント】
- nonceの生成: 毎回変わる必要があるため、サーバーサイド（PHPやNode.jsなど）でリクエストごとに生成して、HTMLの
コメント