【入門編】クリックジャッキング対策としてのフレームバスター（JavaScript）の限界 – アプリケーションセキュリティ & 安全な開発防御ガイド

こんにちは。現場で泥臭いインシデント対応に明け暮れているセキュリティ担当者です。

今日は「クリックジャッキング」という、ちょっと巧妙でタチの悪い攻撃手法についてお話しします。「画面が透明で見えないのに、気づかぬうちにボタンを押させられる」……そんな映画のような話が、実はウェブの世界では日常茶飯事なのです。

初心者の方にもスッと理解してもらえるよう、身近な例えを交えて解説していきますね。

—

まずは、攻撃のメカニズムを「家の鍵」に例えてみましょう。

あなたは自分の家（自社サイト）を守るために、頑丈なドアを設置しました。ところが、泥棒はドアを壊すのではなく、「透明なガラスの箱」をあなたの家の前に置きます。この箱の向こう側には、誰かが美味しそうな料理（プレゼントキャンペーンのボタンなど）を置いています。

あなたは「ラッキー！」と思ってその料理に手を伸ばしたつもりが、実はその手は、透明な箱の裏側に隠されていた「あなたの家のドアの解錠ボタン」を押してしまっていた……。

これがクリックジャッキングです。攻撃者は、自分の罠サイトの中にあなたのサイトを「透明なiframe（窓）」として重ね合わせ、ユーザーを騙して意図しない操作をさせるのです。

かつて、この攻撃を防ぐために「フレームバスター」と呼ばれるJavaScriptを使った手法が流行しました。

/ 昔よく使われたコードの例 /
if (top !== self) {
// もし自分が「親」じゃない（誰かに埋め込まれている）なら、強制的に画面を自分自身に差し替える！
top.location = self.location;
}

このコードは、「誰かが自分を窓の中に閉じ込めていたら、画面を乗っ取って脱出する」という仕組みです。しかし、現代のブラウザではこの方法は「穴だらけ」と言わざるを得ません。

なぜなら、攻撃者が sandbox 属性という強力な命令をブラウザに送ると、このJavaScript自体が実行されないように無効化できてしまうからです。つまり、泥棒が「この家はJavaScriptが動かない設定にしておこう」と細工すれば、家主が脱出する手段は奪われてしまうわけですね。

では、どうすればいいのか。答えは「家の外側（ブラウザとサーバー）」でルールを決めてしまうことです。

これは「そもそも自分のサイトを他人のサイトに窓（iframe）として埋め込ませない」という、サーバーからブラウザへの命令です。

X-Frame-Options: DENY

これを設定するだけで、「このサイトは絶対に他人のサイトには表示させない！」という強い意志をブラウザに伝えられます。泥棒がどんなに工夫しても、ブラウザが「ご主人が拒否してるから表示しません」と門前払いしてくれるようになります。

こちらは、さらに進化した現代の防犯システムです。単に「埋め込み禁止」にするだけでなく、「誰からのアクセスなら許可する」「どのソースからなら読み込んでいい」といった細かい制御が可能です。

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

frame-ancestors 'none'; は「どのサイトからも埋め込みを許可しない」という設定です。これを入れておけば、現代のブラウザは非常に堅牢にあなたのサイトを守ってくれます。

「じゃあ、新しいCSPだけでいいんじゃないの？」と思うかもしれません。しかし、世界にはまだ古いブラウザを使っているユーザーもいます。

セキュリティの鉄則は「多層防御」です。

1. CSPに対応しているブラウザには「CSP」で完璧に守る。
2. CSPが分からない古いブラウザには「X-Frame-Options」で守る。

この二段構えにしておくことで、どんな環境のユーザーが来ても「安全な家」を提供できるというわけです。

—

「ヘッダーの設定なんて難しそう……」と感じるかもしれませんが、Webサーバー（ApacheやNginxなど）の設定ファイルを数行書き換えるだけで実装できます。

インフラの担当者と相談して、まずは今のサイトにこれらのヘッダーが含まれているか確認してみてください。もし入っていなければ、今日が改善のチャンスです。

セキュリティは一度やって終わりではありません。攻撃者の手法も日々進化していますが、私たちエンジニアもこうして知識をアップデートしていくことで、強固な盾を作ることができます。

また次回の記事で、より実践的なセキュリティの深淵を覗いていきましょう！それでは、安全な開発ライフを！