【入門編】X-Frame-Options によるクリックジャッキング対策 – アプリケーションセキュリティ & 安全な開発防御ガイド

こんにちは。セキュリティの世界へようこそ。
現場で泥臭いインシデント対応をしていると、「なぜもっと早くこれに気づかなかったんだ！」と頭を抱えたくなるような、灯台下暗しな脆弱性に遭遇することが多々あります。

今日は、その中でも特にシンプルかつ強力な「クリックジャッキング」という攻撃と、その対策である「X-Frame-Options」について、一緒に紐解いていきましょう。

—

まずは、想像してみてください。あなたが大切にしている「自宅の玄関」を。

本来、あなたの家（Webサイト）は、あなたや信頼できる家族だけが入れる場所です。しかし、悪意ある泥棒は、「透明なガラスの板」をあなたの家の玄関の上にこっそりと重ねて置きます。

この「透明な板」こそが、攻撃者が用意した罠のページです。
何も知らないユーザーがそのページにアクセスすると、表向きは「懸賞に応募するボタン」に見えるものが表示されます。しかし、実際にはその下に、あなたのサイトの「退会ボタン」や「送金ボタン」が隠れて配置されているのです。

ユーザーが「懸賞に応募！」と思ってクリックした瞬間、実はその下のあなたのサイトの「退会」ボタンが押されてしまう。これが、クリックジャッキング（Clickjacking）の正体です。

Web技術には、他のサイトを自分のページの中に「窓」として埋め込む`iframe`（アイフレーム）という便利な機能があります。

本来はYoutubeの動画を埋め込んだり、地図を表示したりするための便利な道具なのですが、攻撃者はこれを悪用します。「透明度を0にして、ユーザーには見えないようにして、あなたのサイトを重ねて表示する」という手法ですね。

これが、「家の鍵をかけているのに、窓からこっそり泥棒が入ってくる」ような状況を生み出してしまうんです。

—

この泥棒の手口を封じるにはどうすればいいか。答えはシンプルです。「そもそも、うちの家を他人の家の窓（iframe）の中に表示させないこと」です。

そこで登場するのが、`X-Frame-Options` という「セキュリティの合言葉（HTTPレスポンスヘッダー）」です。これをサーバーの設定に書き込むことで、ブラウザに対して「他のサイトからの埋め込みを許可するか？」を指示できます。

設定できる主な値は2つだけ。まずはここから覚えていきましょう。

「どんな理由があっても、うちのサイトは他のサイトに埋め込ませない！」という最強のガードです。もしあなたのサイトが、どのページも他サイトに埋め込まれる必要がないなら、これ一択です。

「同じドメイン（自分のサイト内）からなら埋め込みを許可するけど、よそからの埋め込みは許さないよ」という設定です。サイト内でiframeを多用している場合はこちらを選びます。

—

では、実際にどうやって設定するのか。Webサーバー（NginxやApache）の設定ファイルに一行書き加えるだけです。

サーバーのレスポンスヘッダーにX-Frame-Optionsを追加します
‘SAMEORIGIN’ は自サイト内からのiframe埋め込みのみ許可します
add_header X-Frame-Options SAMEORIGIN;

全てのページに同じセキュリティルールを適用します
Header always set X-Frame-Options “SAMEORIGIN”

※設定後は、ブラウザの「検証ツール（F12）」を開き、「ネットワーク」タブからレスポンスヘッダーにこの項目が正しく含まれているか確認する癖をつけてくださいね。これがプロの確認作業です。

—

「X-Frame-Options」を設定したからといって、これで万全！と油断してはいけません。セキュリティの世界に「完璧」は存在しないからです。

最近では、より柔軟で強力な「Content Security Policy (CSP)」という設定も普及しています。これを使えば、`frame-ancestors`というディレクティブで、さらに細かく「どのサイトからの埋め込みを許可するか」を指定できるようになります。

でも、まずは今日学んだ「X-Frame-Options」から始めてみましょう。
「誰にでも開かれているWebだからこそ、自分たちの家を守る鍵は、自分たちでしっかりかける」。

この意識を持つだけで、あなたの書くコードや構築するシステムは、格段に信頼性の高いものになります。一歩ずつ、着実に。現場で苦労しているエンジニアの皆さんの背中を、これからも応援していますよ。

それでは、また次回のセキュリティ講座でお会いしましょう！