Trick users and bypass warnings – Modern SVG Clickjacking attacks

クリックジャッキングは、別サイトの iframe を覆い隠してユーザーに意図せず操作させる古典的な攻撃手法です。
単純なアクション（例：ボタンを押す）にはうまく機能しますが、より複雑なインタラクションになると現実離れします。

そこで私は「SVG クリックジャッキング」という新しい技術に出会いました。この手法は従来のクリックジャッキングを逆転させ、複雑で対話的な攻撃や複数形態のデータ外部化を可能にします。

Liquid SVG

Apple が新しい Liquid Glass デザインを発表したとき、Web ではその効果について多数の記事が流れました。
私は Canvas やシェーダーを使わずに同じエフェクトを Web 上で再現できないか試してみました。1 時間で CSS/SVG だけの再現版を作り、十分に正確に見えるようになりました。

デモでは右下の円形コントロール（Chrome/Firefox デスクトップと Chrome モバイル）でエフェクトをドラッグできます。Safari では動きません。

このデモは注目され、あるニュース記事にも「サムスンや他社は彼女に追いつけない」という驚くべき引用付きで掲載されました。

そこで私は SVG エフェクトが iframe 上に適用できるか尋ねてみました。意外と可能でした。
Liquid Glass 効果は

feColorMatrix

feDisplacementMap

これをきっかけに、iframe 上で機能する他のフィルタも探求し、多彩な可能性を発見しました。

基本構成要素

各

<fe*>

便利な基本要素は以下です：

• <feImage>

  – 外部画像ファイルを読み込む

• <feFlood>

  – 単色矩形を描画

• <feOffset>

  – ピクセルをシフト

• <feDisplacementMap>

  – マップに従ってピクセルを移動

• <feGaussianBlur>

  – ぼかし

• <feTile>

  – タイルまたはクロップ

• <feMorphology>

  – 消失／膨張

• <feBlend>

  – モードで二入力をブレンド

• <feComposite>

  – 合成、算術演算

• <feColorMatrix>

  – 色行列（チャンネル操作、アルファ/ルミナンス変換）

これらは多くのグラフィックタスクの基礎ブロックであり、強力なプリミティブへ組み合わせることができます。

攻撃例

1. フェイク CAPTCHA

feDisplacementMap

<iframe src="..." style="filter:url(#captchaFilter)"></iframe>

<svg width="768" height="768" viewBox="0 0 768 768">
  <filter id="captchaFilter">
    <feTurbulence type="turbulence"
                  baseFrequency="0.03"
                  numOctaves="4"
                  result="turbulence"/>
    <feDisplacementMap in="SourceGraphic"
                       in2="turbulence"
                       scale="6"
                       xChannelSelector="R"
                       yChannelSelector="G"/>
  </filter>
</svg>

2. グレー文字の隠蔽

ユーザーが入力を確認できるようにしつつ、プレースホルダーやエラーテキストを隠すには

feComposite

feTile

feMorphology

feFlood

feBlend

feColorMatrix

簡易例（省略）：

<filter>
  <feComposite operator="arithmetic" k1="0" k2="4"/>
  <feTile x="20" y="56" width="184" height="22"/>
  <feMorphology operator="erode" radius="3" result="thick"/>
  <feFlood flood-color="#FFF" result="white"/>
  <feBlend mode="difference" in="thick" in2="white"/>
  <feComposite operator="arithmetic" k2="100"/>
  <feColorMatrix type="matrix"
                 values="0 0 0 0 0
                         0 0 0 0 0
                         0 0 0 0 0
                         0 0 1 0 0"/>
  <feComposite in="SourceGraphic" operator="in"/>
  <feBlend in2="white"/>
</filter>

3. ピクセルの読み取り

JavaScript にピクセルデータを渡すことはできませんが、フィルタチェーン内でピクセルを読んでマスクやトリガーに利用できます。

単純な黒ピクセル検出例：

<feTile x="50" y="50" width="4" height="4"/>
<feTile x="0"  y="0"  width="100%" height="100%"/>

<feComposite operator="arithmetic" k2="100"/>

<feColorMatrix type="matrix"
               values="0 0 0 0 0
                       0 0 0 0 0
                       0 0 0 0 0
                       0 0 1 0 0"/>

4. 論理ゲート

feBlend

feComposite

<feBlend mode="difference" in2="white"/>

<feComposite operator="arithmetic" k1="1"/>

<feComposite operator="arithmetic" k2="1" k3="1"/>

<feBlend mode="difference" in="a" in2="b"/>

これらを組み合わせれば、SVG フィルタだけで任意の論理回路（例：フルアダー）を構築できます。

実用攻撃：「Securify」

対象は「ユーザーがハッキングされたとマークするまで複数ステップ」を必要とするページです。

1. ダイアログ表示検出 (

   D

   ) – ピクセルを切り取り比較
2. ダイアログ読み込み確認 (

   L

   ) – ボタンの有無
3. チェックボックス状態確認 (

   C

   ) – 色比較
4. 赤文字検出 (

   R

   ) – 形態学＋ピクセルチェック

論理ツリー：

¬D ∧ ¬R → show button1
 D ∧ ¬L → show loading
 D ∧ L ∧ ¬C → show checkbox
 D ∧ L ∧  C → show button2
¬D ∧ R  → show end screen

これらの条件を SVG フィルタでエンコードし、ターゲット iframe 上に適切な攻撃画像を重ねることで、説得力あるマルチステップクリックジャッキング体験を実現します。

高度な応用

• QR コード生成 –

  feDisplacementMap

  でビット列を配置し、事前計算した誤り訂正データを加えることで SVG フィルタだけでスキャン可能な QR コードを描画できます。
• ブラウザ内リアルタイムロジック – ピクセル読み取り・条件判定・ビジュアル更新を JavaScript や CSP を回避して実行。

結論

SVG フィルタは単なる視覚効果だけではありません。レンダリングエンジン内で動作する、実質的にチューリング完全な言語です。この機能を悪用すれば：

• マルチステップクリックジャッキング
• UI 要素の隠蔽
• クロスオリジン iframe からピクセル読み取り
• QR コードの即時生成

などが可能になり、Web ページの攻撃面を大幅に拡張します。見た目は無害な SVG フィルタですが、その裏側で行われる操作は非常に強力かつ危険です。