見えるセキュリティ

クリックジャッキング

CLICKJACKING

この概念とは？

クリックジャッキングは、利用者が見ている表示と、実際に操作する対象をずらし、意図しない操作をさせる攻撃です。この教材では、誘導用のボタンの上に、本物の設定ページを透明なiframeで重ねる例を見ます。埋め込みを制限すると、この攻撃の流れがどこで止まるかを比較します。[S01][S02]

本物のページが伝えた埋め込み制限を、ブラウザがクリック前に適用します。

THEME
web-vuln
KIND
attack
REVIEW
self-reviewed ·

説明用の例：ログイン済みでiframe内でも操作可能。メール通知はONから始まり、1クリックでOFFにできる設定です。

本物の設定ページの応答

https://settings.example/notifications

埋め込み条件（HTTP応答）

この例では埋め込みを止める制限なし

HTML応答

同じ画面位置を見比べる

利用者に見える表示

https://bait.example/offer

あなたへの特典

利用者の意図：特典を受け取る

特典を受け取る

利用者には、背面の「特典を受け取る」が見えます。

説明用の透視図

https://bait.example/offer

あなたへの特典

利用者の意図：特典を受け取る

特典を受け取る

iframeへ埋め込もうとしている

ブラウザの判断前。本物の操作UIはまだ表示しません。

ブラウザの判断：判断前

応答の条件を確認します。

クリック：未操作

本物のサービスの状態（説明用）メール通知：変更前ON／結果はSTEP4で確認

図の前提・注意点

iframeは、ページの中に別のページを表示する枠です。この例では、利用者が本物のサービスにログインしており、iframe内でも設定を操作できる条件にします。メール通知は最初ONで、OFFにする操作は1回のクリックで完了します。

要求は両モードで試みられます。HTMLの内容・ボタン位置は同じで、応答の埋め込み制限だけが異なります。制限がないことは、安全性を判断したという意味ではありません。

架空の画面を使った図解です。透視図では、実際の利用者には見えない前面の透明なiframeを可視化しています。別画面でも、攻撃者が別オリジンのDOMを読み取った情報でもありません。

埋め込みを許可した例では、透明でも前面の本物ボタンが直接クリックを受けます。背面からの転送ではありません。重なる動きは前後関係と配置を説明する演出です。ブラウザが自動で画面を移動する動作ではありません。

拒否時のエラー画面と誘導ページ側のクリック挙動は、ブラウザ差があるため再現しません。

結果はiframeの外に示した説明用の状態です。STEP3と4は説明の区切りであり、実ブラウザが結果を保留する意味ではありません。

STEP 01 / 4

本物のページから応答が届く

STEP 1 / 4: 本物のページから応答が届く

現在のSTEP 1STEP 2STEP 3STEP 4

誘導ページは、本物の設定ページをiframeへ表示しようとします。この例では、本物のページの応答に埋め込みを止める制限がありません。

技術的な詳細を見る

両モードで要求が試みられ、HTML応答の情報を受け取ります。制限は埋め込まれる本物のHTMLのHTTP応答ヘッダーで伝えます。Report-Onlyやmetaではありません。[S03][S05 §6.4.2.1]

パネルの開閉ではSTEPは変わりません。

この概念の要点

  • 要点

    見える表示と、クリック対象はずらせる

    透明なiframeを前面に重ねると、背面の誘いボタンを見ながら、同じ位置にある本物の操作ボタンを押してしまう場合があります。[S01][S02]

  • 要点

    本物のページが制限を送り、ブラウザが適用する

    この例では、本物のページの応答にあるframe-ancestors 'none'をブラウザが確認し、iframe内への表示を拒否します。[S03][S05]

  • 要点

    読み取りの制限と、意図しない操作の防止は別

    別オリジンのDOMを読めないことだけでは、この例の操作を防げません。本物の画面を操作するため、CSRFトークンだけでも防げるとは限りません。[S04][S06]

理解確認

埋め込み制限なしの例で、利用者は「特典を受け取る」を押すつもりでした。実際にクリックを受けるのはどれですか？

理解確認

管理ページを、同一オリジンを含めどのページからもiframeへ埋め込ませたくありません。今回学んだ方法として適切なのはどれですか？

理解確認

誘導ページのJavaScriptが、別オリジンの設定ページのDOMを直接読めない場合、この教材の攻撃はどうなりますか？

クリックジャッキングの補足

埋め込み元を制限するCSP

frame-ancestorsは、どのページから自分を埋め込んでよいかを制限します。埋め込まれるHTMLのHTTP応答ヘッダーで伝えます。<meta>に書いても、このディレクティブは適用されません。[S03][S05]

方針と埋め込みの扱い
方針埋め込みの扱い
frame-ancestors 'none'どのページからも許可しない。同一オリジンも含む
frame-ancestors 'self'同一オリジンからの埋め込みを許可する

必要な埋め込みがある場合は、用途に合う許可先を限定します。多段のiframeでは、直接の親だけでなく祖先のページも確認対象です。本物のページを単独で開くことと、iframeへ埋め込むことは別です。Content-Security-Policy-Report-Onlyの方針は、表示拒否に使うContent-Security-Policyの代わりにはなりません。

既存のCSP教材で使うnonceはscript実行の許可条件です。frame-srcは「このページが枠の中へ読み込む先」、frame-ancestorsは「このページを埋め込む側」の制限で、向きが異なります。default-srcを指定するだけでもframe-ancestorsの代わりにはなりません。[S05]

X-Frame-Optionsとの関係

X-Frame-Optionsも、埋め込まれるページのHTTP応答に付けるヘッダーです。DENYは埋め込みを拒否し、SAMEORIGINは同一オリジンからの埋め込みを許可します。複数の許可先を指定したい場合は、CSPのframe-ancestorsを使う方法があります。[S01][S03]

ALLOW-FROMは現行ブラウザで使う対策として採用しません。X-Frame-Optionsを<meta>へ書く方法も有効な設定ではありません。両ヘッダーを使う場合は整合する方針にします。現行仕様では、適用されるframe-ancestorsがある応答ではX-Frame-Optionsが無視されるため、X-Frame-Optionsでその方針を上書きする説明にはしません。[S03][S05 §6.4.2.2]

SOP・CSRF対策で防げる？

SOPによる別オリジンのDOMの直接読み取り制限は、利用者がiframe内の本物の画面を操作することを一律に止める仕組みではありません。この例では、誘導ページが本物のページの内容を読み取る必要はありません。[S02][S06]

また、本物のページのボタンが操作されるため、そのページが持つ正しいCSRFトークンを使って処理が行われる場合があります。「正しいトークンがある」と「利用者がその操作を意図した」は別です。CSRF対策が不要になるという意味ではなく、画面の埋め込み制限も役割に応じて使います。[S04]

この例が成立する条件と、対策の範囲

この例は、本物のページがiframe内で表示・操作でき、利用者の認証がそこで使え、ボタンの位置が合っている条件にしています。CookieのSameSite属性等により、iframe内ではログイン状態が使えない場合があります。すべてのログイン済み利用者で成立するとは限りません。SameSiteの「site」とSOPの「origin」は判定の単位が異なるため、別オリジンというだけでは、Cookieが送られるかは決まりません。[S03][S06]

frame-ancestorsとX-Frame-Optionsは、iframe等への埋め込みを利用する攻撃への対策です。別のウィンドウを使う手法を含め、あらゆる画面のだまし方を防ぐものではありません。重要な操作では、内容の確認や再認証等も検討します。この教材で防げたと説明する範囲は、主図のiframeを使う例です。[S03]

参考資料

RELATED CONCEPTS

関連Concept