Webサイト埋め込み制限でクリックジャッキング対策!X-Frame-Optionsヘッダーの全貌

2024-05-27

HTTP ヘッダーにおける X-Frame-Options の概要

クリックジャッキング攻撃 では、攻撃者は、別のWeb サイト上に透明なiframeを重ねることで、ユーザーが意図しない操作を実行するように仕向けます。例えば、攻撃者は、ログイン画面を模倣したiframeを作成し、ユーザーが気付かないうちにログイン情報を盗み取ることができます。

X-Frame-Options ヘッダーには、以下の3つの値を設定できます。

  • DENY: デフォルト値であり、すべてのサイトからの埋め込みを禁止します。
  • ALLOW-FROM uri: 指定されたURIからの埋め込みのみを許可します。
  • SAMEORIGIN: 同じオリジンのWeb サイトからの埋め込みのみを許可します。

例:

X-Frame-Options: DENY

この設定は、すべてのサイトからの埋め込みを禁止します。

X-Frame-Options: ALLOW-FROM https://example.com

この設定は、https://example.com からの埋め込みのみを許可します。

X-Frame-Options: SAMEORIGIN

この設定は、同じオリジンのWeb サイトからの埋め込みのみを許可します。

X-Frame-Options ヘッダーは、Web サーバーの設定ファイルで設定できます。Apache の場合は、.htaccess ファイルを使用できます。

Header always set X-Frame-Options "DENY"

X-Frame-Options ヘッダーは、クリックジャッキング攻撃からWeb サイトを保護するのに役立ちますが、他のセキュリティ対策と組み合わせて使用することが重要です。

X-Frame-Options ヘッダーに関する詳細は、以下のリソースを参照してください。



例 1: すべての埋め込みを禁止する

<!DOCTYPE html>
<html>
<head>
  <title>X-Frame-Options DENY Example</title>
</head>
<body>
  <h1>X-Frame-Options: DENY</h1>
  <p>このページはiframe内に埋め込むことはできません。</p>
</body>
</html>

この例では、X-Frame-Options: DENY ヘッダーが設定されています。この設定により、すべてのサイトからの埋め込みが禁止されます。

例 2: 特定のオリジンからの埋め込みのみを許可する

<!DOCTYPE html>
<html>
<head>
  <title>X-Frame-Options ALLOW-FROM Example</title>
</head>
<body>
  <h1>X-Frame-Options: ALLOW-FROM https://example.com</h1>
  <p>このページは https://example.com からの埋め込みのみ許可されています。</p>
</body>
</html>

この例では、X-Frame-Options: ALLOW-FROM https://example.com ヘッダーが設定されています。この設定により、https://example.com からの埋め込みのみが許可されます。

<!DOCTYPE html>
<html>
<head>
  <title>X-Frame-Options SAMEORIGIN Example</title>
</head>
<body>
  <h1>X-Frame-Options: SAMEORIGIN</h1>
  <p>このページは同じオリジンからの埋め込みのみ許可されています。</p>
</body>
</html>

サーバー側での設定

上記の例は、HTML レベルでの設定例です。実際には、Web サーバーの設定を使用して X-Frame-Options ヘッダーを設定する方が一般的です。Web サーバーの設定方法については、サーバーのドキュメントを参照してください。

補足情報:

  • 上記の例はあくまで基本的な例であり、より複雑な設定も可能です。
  • X-Frame-Options ヘッダーは、すべてのブラウザでサポートされているわけではありません。古いブラウザでは、このヘッダーを認識しない場合があります。
  • X-Frame-Options ヘッダーは、他のセキュリティ対策と組み合わせて使用することが重要です。


X-Frame-Options ヘッダーを設定するには、主に以下の 2つの方法があります。

  1. Web サーバーの設定: これが最も一般的で推奨される方法です。Web サーバーの設定ファイルを変更することで、すべてのWeb ページにヘッダーを適用できます。
  2. HTML ページの設定: 個々のHTML ページにヘッダーを直接設定することもできます。ただし、この方法は個々のページにのみ適用されるため、より広い範囲に影響を与えるWeb サーバーの設定の方が一般的に使用されます。

Web サーバーの設定

Apacheの場合:

  • .htaccess ファイルに以下の行を追加します。
Header always set X-Frame-Options "DENY"
  • または、Apache の設定ファイル (httpd.conf など) に以下の行を追加します。
Header always set X-Frame-Options "DENY"

Nginxの場合:

  • Nginx の設定ファイル (nginx.conf など) に以下の行を追加します。
add_header X-Frame-Options "DENY";

IISの場合:

  • IIS マネージャーを使用して、以下の設定を追加します。
  1. IIS マネージャーを開きます。
  2. 設定するWeb サイトまたはWeb サーバーを選択します。
  3. 右側のパネルで、「HTTP ヘッダー」 をダブルクリックします。
  4. 「アクション」 ペインで、「追加」 をクリックします。
  5. 「名前」 フィールドに 「X-Frame-Options」 と入力します。
  6. 「値」 フィールドに 「DENY」 と入力します。
  7. 「OK」 をクリックします。

HTML ページの設定

HTML ページにヘッダーを直接設定するには、<head> セクションに以下の行を追加します。

<meta http-equiv="X-Frame-Options" content="DENY">

この方法は、個々のページにのみ適用されることに注意してください。

補足情報

  • X-Frame-Options ヘッダーは、すべてのブラウザでサポートされているわけではありません。古いブラウザでは、このヘッダーを認識しない場合があります。
  • X-Frame-Options ヘッダーは、他のセキュリティ対策と組み合わせて使用することが重要です。