クリックジャッキングとは？

クリックジャッキングとは、ユーザーの「クリック操作」を騙して悪意のある操作を実行させる攻撃手法です。たとえば、見た目は無害な「再生ボタン」に見えても、実際にはSNSの「いいね」ボタンが背後に配置されており、ユーザーが意図しないアクションを実行してしまうといった例が挙げられます。

このような攻撃は、ユーザーの視覚と操作の乖離を巧みに利用して行われます。攻撃者は、自分の用意したWebページ内に別サイトをiframeで読み込み、CSSなどを使って透明にしたり、他の要素で覆い隠したりすることで、見た目を偽装します。

なぜクリックジャッキングが可能になるのか

クリックジャッキングは、技術的な「バグ」ではなく、Webの基本仕様や設計上の自由度の高さに起因する問題です。具体的には、以下のような点が攻撃の成立を可能にしています。

  • iframeの自由な埋め込み
    Webブラウザは、原則として任意のページをiframeで読み込むことを許可しています。これにより、攻撃者が他サイトのUIを自分のページ内に表示できてしまいます。

  • ユーザー操作の誤誘導が可能
    CSSによる透明化やレイアウト調整により、ユーザーの見ているものと実際にクリックしているものを分離することができます。

  • ブラウザによる自動防御がない場合も多い
    特定の防御設定を施していない限り、ブラウザはiframeの読み込みをブロックしません。

クリックジャッキングを防ぐ方法

対策1：X-Frame-Optionsヘッダー

X-Frame-Optionsは、ブラウザに対して「このページを他のサイトでiframeとして読み込ませるかどうか」を制御するHTTPレスポンスヘッダーです。以下の3つの値が指定可能です：

  • DENY：すべてのiframe埋め込みを拒否
  • SAMEORIGIN：同一オリジン内からの埋め込みのみ許可
  • ALLOW-FROM <URL>：特定のURLからの埋め込みのみ許可（対応ブラウザは限定的）

実装例（Apache）

1

Header set X-Frame-Options "SAMEORIGIN"

実装例（Nginx）

1

add_header X-Frame-Options "SAMEORIGIN";

実装例（Express）

1
2
3
4

app.use((req, res, next) => {
  res.setHeader("X-Frame-Options", "SAMEORIGIN");
  next();
});

対策2：Content-Security-Policy（CSP）のframe-ancestors

X-Frame-Optionsの後継的な仕組みとして、CSPのディレクティブであるframe-ancestorsがあります。こちらはより柔軟で、複数の許可ドメインを設定できます。

設定例

1

Content-Security-Policy: frame-ancestors 'self' https://trusted.example.com;

この設定により、同一オリジンとtrusted.example.comからの埋め込みのみが許可されます。

補足的な対策

JavaScriptによるframe検出

JavaScriptを用いて、ページがiframe内で表示されているかを検出し、強制的にトップレベルへ遷移させる方法があります。

1
2
3

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

ただし、これはクライアントサイドのみの対策であり、HTTPヘッダーによる防御と併用するのが望ましいです。

UIの工夫

透過なボタンや重ね合わせが成立しづらいUI設計を心がけることも、クリックジャッキングの抑止につながります。たとえば、重要なボタンを特定の位置から動かせないようにする、透明な要素を検出するなどの工夫があります。

まとめ

クリックジャッキングは、ユーザーの視覚と操作のギャップを利用した攻撃であり、重大な操作ミスや被害を引き起こす可能性があります。幸い、X-Frame-OptionsやContent-Security-Policyなどの対策を適切に実装することで、防止することが可能です。Web開発者としては、こうした仕様を理解し、自分のアプリケーションに応じた対策を講じることが重要です。