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

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

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

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

例

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 サイトを保護するのに役立ちますが、他のセキュリティ対策と組み合わせて使用することが重要です。

例 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 からの埋め込みのみが許可されます。

例 3: 同じオリジンからの埋め込みのみを許可する

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

この例では、X-Frame-Options: SAMEORIGIN ヘッダーが設定されています。この設定により、同じオリジンのWeb サイトからの埋め込みのみが許可されます。

サーバー側での設定

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

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

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

Web サーバーの設定
これが最も一般的で推奨される方法です。Web サーバーの設定ファイルを変更することで、すべてのWeb ページにヘッダーを適用できます。
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 マネージャーを使用して、以下の設定を追加します。

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

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

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

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