ウェブサイトの見た目を決める「CSS」が悪用されるって本当？
はじめに：CSSって聞いたことある？
インターネットでウェブサイトを見ているとき、文字の色や大きさ、背景の色、写真の配置などがきれいに整っていますよね？✨ あの見た目を決めているのが「CSS（Cascading Style Sheets）」というものです。ウェブサイトのお洋服やメイク💄のようなもの、と考えるとわかりやすいかもしれません。
今日お話しする「CSSインジェクション」は、このCSSを悪用するサイバー攻撃の一種です。「インジェクション」は「注入する」という意味で、悪意のある人が、ウェブサイトに不正なCSSコードを注入してしまうことを指します。
CSSインジェクションってどんな仕組み？ 簡単なたとえ話
ウェブサイトの中には、ユーザーがコメントを書いたり、プロフィール情報を入力したりできる場所がありますよね。例えば、自分の好きな色をプロフィールに設定できる機能があったとします。
もし、この入力欄に「赤色」と入力するところに、特別な記号を含んだCSSの指示（例えば、「red; } body { background-color: black;」のような呪文）を入力できてしまうとどうなるでしょうか？
ウェブサイトがこの特別な指示を「ユーザーが入力した好きな色」ではなく、「ウェブサイトの見た目を変える命令」だと勘違いしてしまうことがあります。その結果、ウェブサイト全体の背景が真っ黒⚫になってしまったり、文字がすごく小さくなってしまったり…なんてことが起こり得るのです。これがCSSインジェクションの基本的な仕組みです。
どんな悪いことが起きるの？ 被害の例
CSSインジェクションが成功してしまうと、具体的にどのような被害が発生する可能性があるのでしょうか？いくつか例を見てみましょう。
| 被害の種類 | 説明 | イメージ |
|---|---|---|
| 見た目の改ざん (コンテンツ・スプーフィング) | ウェブサイトのデザインが勝手に変えられてしまいます。例えば、偽のログイン画面を表示させたり、「ウイルスに感染しました！」のような嘘の警告を出したりして、ユーザーを騙そうとします。 | 😱💦 |
| 情報の抜き取り (データ・リーケージ) | CSSの仕組みを悪用して、ページ内に隠されている情報（例えば、個人情報や、CSRF対策トークンと呼ばれる大事な合言葉など）を少しずつ盗み見ることができてしまう場合があります。これは、特定の文字があるかないかで見た目を微妙に変え、その変化を外部から観察することで情報を推測するような、高度な手口です。 | 🕵️♂️🔑 |
| フィッシング詐欺への誘導 | 見た目を本物そっくりに変えた偽ページに誘導し、IDやパスワード、クレジットカード情報などを入力させようとする可能性があります。 | 🎣💳 |
| クリックジャッキング | ボタンなどを透明にして隠し、ユーザーが気づかないうちに別のボタン（例えば、「送金する」ボタンなど）をクリックさせてしまう手口です。 | 🖱️👻 |
| (限定的) 不正なスクリプトの実行 (XSSのトリガー) | 一部の古いブラウザや特定の状況下では、CSSインジェクションがきっかけで、さらに危険なJavaScriptというプログラムを実行できてしまう（クロスサイトスクリプティング: XSS）可能性も指摘されています。 | 🤖💥 |
このように、CSSインジェクションは単に見た目が変わるだけでなく、より深刻な被害につながる可能性もあるのです。
過去に起きた事例はあるの？
CSSインジェクションは、クロスサイトスクリプティング（XSS）ほど頻繁に大きなニュースになることは少ないかもしれません。しかし、発見されにくいだけで、潜在的なリスクは存在します。
- 特定のウェブサイトやサービスで、ユーザーが入力した内容がCSSとして解釈され、ページの見た目を変更できてしまう脆弱性が発見された事例は報告されています。
- バグバウンティプログラム（脆弱性を見つけた人に報奨金を支払う制度）などで、CSSインジェクションの脆弱性が報告されることもあります。例えば、2024年6月の情報では、セキュリティ対策が進んでいる企業のサイトでも発見されることがあると述べられています。
- 2022年には、Firefoxブラウザにおいて、特定の条件下でCSSインジェクションに関連する問題（CSPバイパスによる情報漏洩）が修正された事例 (CVE-2022-40956) もありました。
大きな事件にはなっていなくても、水面下では脆弱性が存在し、悪用されるリスクがあることを知っておくことが大切です。
どうすれば防げるの？ 開発者向けの簡単な対策
ウェブサイトを作る人（開発者）は、CSSインジェクションを防ぐためにどのような対策をすれば良いのでしょうか？専門的な話は省きますが、基本的な考え方は以下の通りです。
- ユーザーの入力を疑う！🧐: ユーザーが入力した文字やデータ（コメント、プロフィール情報、URLのパラメータなど）は、そのまま信用せず、必ずチェック（検証）し、無害化（サニタイズ、エスケープ）する処理を入れることが最も重要です。特に、CSSで特別な意味を持つ記号（
{ } ; : ( ) ' "など）は注意深く扱う必要があります。 - 直接CSSに入れない🙅♀️: ユーザーが入力した値を、そのまま直接CSSのコードの中に埋め込まないように設計します。
- 防御壁を設置する🧱 (Content Security Policy: CSP): 「このウェブサイトでは、ここから読み込んだCSSしか使いませんよ！」とブラウザに伝える設定（CSP）を行うことで、予期しない場所からのCSSの読み込みや実行を防ぐことができます。
style-srcディレクティブの設定などが有効です。 - 安全なライブラリを使う📚: HTMLやCSSを安全に扱うためのライブラリ（例えばDOMPurifyなど）を利用することも有効ですが、設定によってはCSSインジェクションを許してしまう可能性もあるため、ライブラリの仕様をよく理解して使う必要があります。
- 定期的なチェック🔧 (脆弱性診断): 専門家やツールによる脆弱性診断を定期的に行い、CSSインジェクションのリスクがないかを確認します。
まとめ
CSSインジェクションは、ウェブサイトの見た目を操るCSSに悪意のあるコードを注入する攻撃です。
見た目が変わるだけでなく、情報を盗まれたり、フィッシング詐欺に利用されたりする危険性もあります。😥
私たちユーザーができることは多くありませんが、怪しい表示が出たり、いつもと違う動作をしたりするウェブサイトには注意しましょう。そして、ウェブサイトを作る側は、ユーザーからの入力をしっかりチェックするなど、適切な対策を行うことが非常に重要です。✅