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

あなたのWebサイトが「泥棒の温床」にならないために。CSPでXSS攻撃を封じ込める方法

こんにちは！セキュリティの現場で日々、防御の最前線に立っているエンジニアです。

皆さんは「XSS（クロスサイトスクリプティング）」という言葉を聞いたことはありますか？名前は難しそうですが、仕組みはとてもシンプルです。あなたのサイトに「悪意ある偽物のスクリプト（泥棒の仕掛け）」を紛れ込ませ、ユーザーの個人情報を盗み出す攻撃のことです。

今日は、この泥棒を物理的に締め出すための最強の防犯ツール「CSP (Content-Security-Policy)」について、一緒に学んでいきましょう。

—

そもそも「XSS」ってどんな攻撃？

Webサイトを「あなたの家」だと想像してください。家の入り口には「玄関（入力フォームなど）」がありますよね。

XSS攻撃とは、泥棒が「この家は誰でも自由に入っていいですよ！」という偽の看板を掲げて、訪問者に変な仕掛け（悪意あるスクリプト）を踏ませる攻撃です。一度中に入り込まれると、泥棒はあなたの家の金庫（ブラウザのクッキーやセッション情報）を勝手に開けて、大切なデータを持ち去ってしまいます。

これまで私たちは、「入力された文字をチェックして、変なコードが含まれていたら消す」という対策をしてきました。しかし、これだけでは「すり抜けてくる泥棒」を完全に防ぐのは難しいのです。

そこで登場するのが、CSP（コンテンツセキュリティポリシー）という「最強の警備員」です。

—

CSP（警備員）がやっていること

CSPは、Webサイトのヘッダーに設定する「ルールブック」です。ブラウザに対してこう命令します。

> 「このサイトでは、俺が許可したスクリプトしか動かしちゃダメだぞ！勝手に変なコードを動かそうとする奴は、即座にブロックしろ！」

この警備員を雇うために、一番重要なのが `script-src` というディレクティブです。

1. 基本の防犯設定（泥棒を締め出す）

まずは、最も強力でシンプルな設定を見てみましょう。

HTTPヘッダーの例
Content-Security-Policy: default-src ‘self’; script-src ‘self’;

`default-src ‘self’`：基本的に、自分のサイト内にあるもの以外は読み込まない。
`script-src ‘self’`：JavaScriptも、自分のサイト内にあるファイルだけ実行していいよ。

これだけで、外部の怪しいサーバーから読み込もうとするスクリプトは、ブラウザが「許可がない！」と判断して実行を拒否してくれます。

—

インラインスクリプトという「魔物」

開発をしていると、HTMLの中に直接 `` と書くこと（インラインスクリプト）がありますよね。実は、これが泥棒にとって一番の侵入口なんです。

CSPで `script-src ‘self’` を設定すると、この「HTML内に直書きされたコード」も一律で禁止されます。これは非常に安全ですが、動的に何かを表示したいときには少し不便ですよね。

そこで登場するのが、「nonce（ナンス）」と「hash（ハッシュ）」という仕組みです。

nonce：通行証を持った人だけが通れる

nonceは、その場限りの「使い捨て通行証」です。

1. サーバー側で毎回ランダムな文字列（例：`EDNnf03nceIOfn39fn3e`）を生成する。
2. スクリプトタグにその文字列を書き込む。
3. CSPヘッダーにも同じ文字列を渡す。

ヘッダー側の設定
Content-Security-Policy: script-src ‘nonce-EDNnf03nceIOfn39fn3e’;

こうすれば、「正しい通行証を持ったコード」だけが動くようになります。泥棒が勝手にスクリプトを書いても、通行証なんて持っていないので即座にブロックされます！

—

さあ、今日から一歩ずつ対策を！

いきなりガチガチに設定すると、動いていたはずの機能が止まってしまい、ユーザーに迷惑をかけてしまうかもしれません。まずは以下のステップで進めてみてください。

1. まずは「レポート専用」モードでテストする
`Content-Security-Policy-Report-Only` というヘッダーを使えば、実際にブロックはせず、「もしこの設定にしたら、どこでエラーが出るか」をログとして記録してくれます。
2. 信頼できるドメインを絞る
Google AnalyticsやCDNなど、どうしても外部のスクリプトが必要な場合は、`script-src ‘self’ https://trusted.example.com;` のように許可リストを少しずつ広げていきましょう。
3. 古い設定を見直す
`’unsafe-inline’` や `’unsafe-eval’` は、泥棒を招き入れる設定です。これらを使わずに運用できるよう、コードの書き方を少しずつモダンに変えていきましょう。

セキュリティは一度やって終わりではありません。ですが、CSPを導入するだけで、あなたのWebサイトの安全性は劇的に向上します。

「自分のサイトは大丈夫だろう」と油断せず、今日から警備員を雇ってみませんか？一歩ずつ、安全なWebの世界を作っていきましょう！