泥棒が「勝手に家の中を改造」するのを防ぐ！CSPで実現する最強の防犯術
こんにちは！セキュリティの世界へようこそ。
日々、コードを書いたりサーバーを触ったりしていると、「XSS（クロスサイトスクリプティング）」という言葉を耳にすることがあると思います。
「なんか怖い名前だけど、自分たちのサイトは大丈夫でしょ？」
そう思っているあなたに、今日はあえて「泥棒」に例えて、この脅威と、それを完全に封じ込めるための魔法の盾「CSP（Content-Security-Policy）」についてお話しします。難しく考える必要はありません。一歩ずつ、防犯の仕組みを学んでいきましょう！
—
そもそも「XSS」って何？：家に勝手に「怪しいポスター」を貼られる恐怖
想像してみてください。あなたは自分の家の玄関に、素敵な掲示板を設置しました。誰でもメモを残せるようになっています。
ある日、一人の泥棒がやってきて、掲示板にこう書きました。
「この家に来た人は、この怪しいリンクを踏んでください」
これを見て、通りがかった人がそのリンクをクリックしてしまったら……。これが「XSS」の仕組みです。
泥棒は、あなたのサイト（掲示板）の隙を突いて、本来は意図していない「悪意あるコード」を動かしてしまいます。
- 反射型: 玄関先で言葉巧みに罠に嵌めるタイプ。
- 格納型: 掲示板に悪意あるメモをずっと残しておく、一番タチの悪いタイプ。
- DOM型: 部屋の鍵の仕組みそのものを、泥棒がこっそり書き換えてしまうタイプ。
どれも共通しているのは、「あなたの家の壁（Webページ）に、知らない誰かが勝手に落書き（スクリプト）をして、それを見た人を騙す」ということです。
—
CSP（Content-Security-Policy）という「最強のガードマン」
この泥棒を防ぐために、最強のガードマンを雇いましょう。それが「CSP」です。
CSPは、サーバーからブラウザに向けて「このページでは、これ以外のスクリプトは絶対に動かしちゃダメだよ！」と指示を出す仕組みです。これを設定しておけば、たとえ掲示板に怪しい落書きをされても、ブラウザが「あ、これは許可されてないスクリプトだ。無視しよう！」と判断して実行を止めてくれます。
「unsafe-inline」は、もはや「鍵なし玄関」
昔のCSPでは、とりあえず動けばいいやと unsafe-inline（インラインスクリプトの実行を許可）という設定をよく使っていました。でも、これは「玄関の鍵を常に開けっ放しにしている」のと同じくらい危険です。
今のセキュリティのスタンダードは、「誰が書いたか分からないスクリプトは絶対に動かさない」ことです。そのために使うのが「nonce（ナンス）」と「hash（ハッシュ）」です。
—
現場で使える！CSP設定の書き方
では、実際にどう書くのか見ていきましょう。HTTPレスポンスヘッダーに以下のように設定します。
サーバーの設定例
Content-Security-Policy: default-src ‘self’; script-src ‘nonce-random123’ ‘strict-dynamic’;
1. 「nonce（ナンス）」で身元確認
nonceは「使い捨ての合言葉」です。サーバーがページを送るたびに、ランダムな文字列を生成してスクリプトに付与します。
泥棒が掲示板に勝手に と書いても、その怪しいスクリプトには正しい「合言葉（nonce）」が書かれていないので、ブラウザは「お前は誰だ！」と実行を拒否します。
2. 「hash（ハッシュ）」で内容確認
「中身が絶対に変わっていないこと」を保証する技術です。スクリプトの内容を計算して指紋のようなもの（ハッシュ値）を作り、それをポリシーに含めます。もし泥棒が1文字でもコードを書き換えたら、ハッシュ値が一致しなくなるため、実行されません。
—
今日からできる！設計のステップ
いきなり全てを厳しくすると、サイトが動かなくなって焦ることになります。まずは以下の手順で進めてみてください。
1. 報告モード（Report-Only）で試す:
Content-Security-Policy-Report-Only というヘッダーを使います。これなら、ポリシーに違反しても実行は止めず、ブラウザが「今、このスクリプトが引っかかりましたよ」と報告だけしてくれます。
2. 自分のサイトのスクリプトを把握する:
どこからスクリプトが読み込まれているか、信頼できる場所（'self' や、信頼するドメイン）だけを許可するように絞り込みます。
3. unsafe-inlineを削除する:
HTMLの中に直接
コメント