iframe 埋め込みチェッカー

ページの埋め込み可否を決定する要素は？

クイックガイド：レスポンスヘッダーの設定

サイトを所有している場合は、レスポンスヘッダーで直接フレーム制御を行うことができます。

備考：X-Frame-Options は CSP の frame-ancestors で置き換えるのが推奨されます。両方設定された場合は CSP が優先適用されます。基本的には frame-ancestors の使用をお勧めします。

サーバーはiframeからのリクエストをどう検知するか

• Sec-Fetch-Dest: document — トップレベルのナビゲーションであり、iframeなどのフレーム内ではありません。
• Sec-Fetch-Dest: iframe — リクエストは <iframe> 要素内で読み込まれています。
• Sec-Fetch-Dest: frame — 従来の <frame>（frameset）タグ内で読み込まれています。
• Sec-Fetch-Dest: embed / object — <embed> または <object> 要素内で読み込まれています。

サーバー設定例：IFrame埋め込みのブロック

以下に示すコードスニペットは、各サーバーまたはフレームワークでiframe埋め込みを完全ブロック（X-Frame-Options: DENY + CSP frame-ancestors 'none'）する設定方法を紹介しています。これは前述のクイックガイドにおける最も厳格な対策パターンです。

server {
    location / {
        add_header X-Frame-Options "DENY" always;
        add_header Content-Security-Policy "frame-ancestors 'none'" always;
    }
}

<IfModule mod_headers.c>
    Header always set X-Frame-Options "DENY"
    Header always set Content-Security-Policy "frame-ancestors 'none'"
</IfModule>

app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('Content-Security-Policy', "frame-ancestors 'none'");
  next();
});

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'Content-Security-Policy', value: "frame-ancestors 'none'" },
        ],
      },
    ];
  },
};

class SetFrameOptions
{
    public function handle(Request $request, Closure $next): Response
    {
        $response = $next($request);
        $response->headers->set('X-Frame-Options', 'DENY');
        $response->headers->set('Content-Security-Policy', "frame-ancestors 'none'");

        return $response;
    }
}

export default {
  async fetch(request) {
    const response = await fetch(request);
    const headers = new Headers(response.headers);
    headers.set('X-Frame-Options', 'DENY');
    headers.set('Content-Security-Policy', "frame-ancestors 'none'");
    return new Response(response.body, { status: response.status, headers });
  },
};

全ブロックではなく、自サイトや限られた許認可リストのみを対象に埋め込みを許可したい場合は、DENY を SAMEORIGIN に、『none』を 'self' または許可するオリジンのリストに置き換えてください。その他の設定手順は同一のままです。

主なプラットフォームの注意点

ヘッダーの基本ルールとは別に、主要プラットフォームには独自の仕様や挙動が存在します。「ブロック対象」か「埋め込み可能」かをヘッダー情報だけで断定する前に、これらの特徴を知っておくと安心です。

主な利用事例

• 連携コードの開発に入る前に、外部ウィジェット、ダッシュボード、または文書を自プロダクトに安全に埋め込み可能かを確認できます。
• 自サイトが意図通り `X-Frame-Options` もしくは `CSP frame-ancestors` のポリシーを正しく返却しているかを検証できます。
• クリックジャッキング防止策のデバッグ：iframe内に表示される `about:blank` や拒否メッセージが表示される理由を確認します。
• コンテンツ収集やポータル統合時に候補URLを一括チェックし、セッション履歴を活用して過去の結果へ再アクセスできます。
• サードパーティ製サービスのiframe設置（フレーミング）ポリシーを記録・整理し、セキュリティレビューやペンテストに備えます。

よくある質問（FAQ）