セキュリティ研究者のLyra Rebane氏は、JavaScriptを一切介さず、Scalable Vector Graphics（SVG）とCascading Style Sheets（CSS）のみで完結する新たなクリックジャッキング手法、「SVG clickjacking」を公開した。
SVGフィルターが本来のsame-origin policy（同一オリジンポリシー）をまたいでピクセル情報を扱える挙動を利用し、クロスオリジンの画面内容を読み取れることが特徴である。Rebane氏はSVGフィルタープリミティブであるfeBlendやfeCompositeを組み合わせて論理ゲートを構成。ピクセル単位での任意計算を可能にし、Google Docs上の機密テキストを抽出するProof-of-Concept（PoC）を実証した。
この報告に対してGoogleは3,133.70ドルのバグバウンティを支払ったが、攻撃はまだ完全には修正されておらず、ChromeだけでなくFirefoxなど複数ブラウザに影響が及ぶとされている。
From: 
Novel clickjacking attack relies on CSS and SVG
【編集部解説】
クリックジャッキングは古くから知られる攻撃ですが、多くは「透明なiframeを重ねて誤クリックを誘う」といった、UIレベルのトリックとして語られてきました。SVG clickjackingは一歩進んで、SVGフィルターがクロスオリジンiframeのピクセルを扱える性質を利用し、feBlendやfeCompositeで論理ゲートを構成することで、画面状態を読み取りながらインタラクティブに誘導できるところまで踏み込んでいます。
ここで重要なのは「状態を読んでから誘導する」という点です。Rebane氏のPoCでは、Google Docs内のUIを外側からピクセル単位で把握しつつ、ユーザーには「Generate Document」やCAPTCHA入力のように見える画面を提示し、実際には攻撃者が用意したDocsに対して操作させています。ユーザーの視点では自然な操作の延長に見えても、その背後ではピクセルレベルの画像処理が論理回路として働き、クリックや入力がすべてiframe内へとリダイレクトされているイメージです。
防御の観点では、「iframeを禁止すればよい」という従来の答えが、そのままでは通用しない場面が浮き彫りになります。Google Docsのようにサードパーティサイトへの埋め込みを前提としたサービスは、X-Frame-OptionsやCSPのframe-ancestorsを強く締めづらく、YouTube、地図、決済ウィジェット、コメント、広告など多くのSaaSも同じ事情を抱えています。さらにRebane氏は、HTMLインジェクション環境でもSVG clickjackingを応用できると指摘しており、「CSPでJavaScriptを止めたから安全」という前提が崩れつつある現状を示しています。
ブラウザエンジン側の対応も簡単ではありません。Chromiumではピクセル窃取系の古いバグの一部が「won’t fix」とされており、今回のような挙動を仕様として許容するのか、実装の欠陥として潰すのかの線引きが難しい状態です。Rebane氏自身も、この攻撃はまだ修正されておらず、ChromeだけでなくFirefoxなど他ブラウザにも影響すると述べており、個別製品のバグというよりレンダリングパイプライン全体の設計レベルの課題として議論する必要が出てきています。
鍵となるのは、「ピクセル＝見た目」から「ピクセル＝プログラム可能な情報チャネル」への発想転換だと感じます。ピクセルがそのまま計算資源であり、同時にサイドチャネルにもなり得るという事実は、Webブラウザにとどまらず、ARデバイスや空間コンピューティング、さらにはAIエージェントがブラウザを操作する未来のUX設計にも波及します。JavaScriptを減らし、ノーコードやノーJSを志向する流れの中で、「コードを減らしたから安全」ではなく、「残されたレンダリング言語（CSS / SVG）をどう安全に使い切るか」が、これからのフロントエンドとSaaSに共通するテーマになっていきそうです。
【用語解説】
Clickjacking（クリックジャッキング）
ウェブページ上のボタンやリンクなどのUIを偽装し、ユーザーに意図しないクリックや入力をさせる攻撃手法の総称。透明なiframeの重ね合わせなどが代表例である。
Same-origin policy（同一オリジンポリシー）
スキーム・ホスト名・ポートが一致するオリジン間でのみスクリプトからのアクセスやデータ共有を許可する、ウェブの基本的なセキュリティモデルである。
Scalable Vector Graphics（SVG）
XMLベースで記述される2Dベクター画像フォーマットであり、フィルターやアニメーションなど高度な表現が可能なウェブ標準仕様である。
Cascading Style Sheets（CSS）
HTMLやSVGの見た目を指定するスタイルシート言語であり、レイアウトや色だけでなく、アニメーションやインタラクションにも広く利用されている。
X-Frame-Options / frame-ancestors
ページがiframeなどのフレーム内で表示されることを許可・拒否するHTTPレスポンスヘッダー設定であり、クリックジャッキング対策として利用される。
Intersection Observer v2 API
ブラウザ上で要素の可視領域や、他要素による覆いを検出できるAPIであり、オーバーレイ検出など視認性に関するロジックに利用できる。
【参考リンク】
Lyra Rebane Blog – SVG clickjacking（外部）
SVG clickjackingの背景や実装方法、ロジックゲート構成までを著者本人が詳しく解説している技術ブログ記事である。
OWASP Clickjacking Defense Cheat Sheet（外部）
クリックジャッキング攻撃の概要と防御策をまとめたベストプラクティス集であり、X-Frame-OptionsやCSPの設定指針を提供している。
MDN Web Docs – Same-origin policy（外部）
同一オリジンポリシーの概念や例外、実装上の挙動を、ウェブ開発者向けに整理した技術ドキュメントである。
Intersection Observer v2 – web.dev（外部）
Intersection Observer v2 APIの概要とユースケース、オクルージョン検出の実装例を解説するGoogle提供の技術記事である。
Perfect Pixel Timing Attacks with HTML5（外部）
HTML5を用いたピクセルタイミング攻撃に関する論文であり、クロスオリジン情報漏洩の先行研究としてSVG clickjackingからも参照されている。
The Human Side Channel（外部）
ブラウザ挙動を利用したサイドチャネル攻撃を解説し、ユーザー操作や状態を外部から推測する手法を紹介している技術記事である。
【参考記事】
New SVG Clickjacking Attack Let Attackers Create Interactive Clickjacking Attacks（外部）
SVGフィルターを用いたクロスオリジンピクセル処理により、高度にインタラクティブなクリックジャッキングが可能になる仕組みと、防御策を解説している。
A new attack method “SVG clickjacking” has appeared（外部）
Google Docsを例に、ユーザーがCAPTCHAと思って入力した内容が攻撃者側ドキュメントに保存されるPoCを画面比較つきで紹介し、攻撃像を直感的に説明している。
Modern SVG Clickjacking attacks – Hacker News（外部）
Lyra Rebane氏の投稿を受け、開発者がSVGフィルターの設計意図やブラウザ実装、実運用でのリスクについて議論しているスレッドである。
SVG trickery exposes deeper clickjacking threat（外部）
SVGを用いた新手法をきっかけに、レンダリングパイプライン全体のセキュリティ設計や将来的な規制・標準化への影響について論じている。
What is Clickjacking? Exploitations and Security Tips（外部）
従来型クリックジャッキングの手法と多層防御の考え方を整理し、新しいバリエーション登場にも備えるための実務的なポイントを紹介している。
【編集部後記】
ブラウザ上で起きていることを、「見た目」ではなく「プログラムされた振る舞い」として意識する機会は、日々の開発や利用の中では多くないかもしれません。けれどSVG clickjackingのように、CSSやSVGだけでインタラクティブな攻撃が組み上がると聞くと、フロントエンドやUIの世界の見え方が少し変わってくるのではないでしょうか。
もしご自身のプロダクトでiframeや埋め込みウィジェットを使っている場合、「どこまでを信頼し、どこからを慎重に扱うか」を一度立ち止まって考えてみるきっかけになればうれしいです。
