iframe がブロックされる理由 – X-Frame-Options と CSP

X-Frame-Options

元祖クリックジャッキング対策ヘッダー。サーバーがレスポンスに付与し、そのドキュメントを <frame>、<iframe>、<embed>、<object> 内で描画してよいかをブラウザに伝えます。

DENY

同一サイトからでも一切フレーム表示不可。

SAMEORIGIN

同一オリジンのページからのみ許可。

ALLOW-FROM uri

廃止。最新ブラウザは無視します — CSP を使ってください。

レスポンスヘッダー

HTTP/2 200
X-Frame-Options: SAMEORIGIN

Content-Security-Policy: frame-ancestors

現代的な後継。許可する親オリジンのリスト、ワイルドカード、スキームを指定できます。両ヘッダーがある場合、frame-ancestors をサポートするブラウザは X-Frame-Options を無視します。

自サイトとパートナーのみ許可

Content-Security-Policy: frame-ancestors 'self' https://*.partner.com

すべてのフレーム表示をブロック

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

鏡像のディレクティブに注意: あなたのページの frame-src は埋め込める URL を制御します。Iframe Viewer では動くのに自サイトで動かない場合、まず自分の CSP を確認してください。

sandbox フラグ

空の sandbox 属性はすべての機能を取り除きます。トークンを 1 つずつ戻してください。

トークン	許可される内容
allow-scripts	フレーム内ページで JavaScript を実行できます。
allow-same-origin	ページのオリジン（Cookie、ストレージ）を保持します。scripts と併用すると同一オリジンでは sandbox が無効化されます。
allow-forms	フォーム送信を許可します。
allow-popups	window.open と target=_blank を許可します。
allow-popups-to-escape-sandbox	開いたウィンドウは sandbox の対象外になります。
allow-modals	alert()、confirm()、prompt()、print()。
allow-top-navigation	フレームが親ページを遷移させることを許可します。
allow-top-navigation-by-user-activation	クリック/タップ後のみ親ページの遷移を許可します。
allow-downloads	フレームから開始するダウンロードを許可します。
allow-presentation	Presentation API（キャスト）。
allow-pointer-lock	Pointer Lock API（ゲーム）。
allow-orientation-lock	画面の向きのロック。

Permissions Policy（allow）

sandbox が機能を取り除くのに対し、allow は強力な機能をフレームに委譲します。各項目は機能名と、任意で許可リストです。

<iframe
  src="https://player.example.com/v/123"
  allow="fullscreen; autoplay; picture-in-picture; clipboard-write"
  allowfullscreen
></iframe>

iframe を許可しているサイト

テスターが使用するデータベース。観測値です — 予告なく変わる可能性があるため、公開前に curl で確認してください。

ドメイン	フレーム表示	ヘッダー / 代替手段
google.com	ブロック	`X-Frame-Options: SAMEORIGIN`Google Maps and YouTube expose dedicated /embed endpoints instead.
youtube.com	ブロック	`X-Frame-Options: SAMEORIGIN`Use https://www.youtube.com/embed/VIDEO_ID for embedding.
facebook.com	ブロック	`X-Frame-Options: DENY`Use the official Facebook Page/Post plugins.
instagram.com	ブロック	`X-Frame-Options: SAMEORIGIN`Use instagram.com/p/ID/embed/ for public posts.
twitter.com	ブロック	`X-Frame-Options: DENY`Use publish.twitter.com to get a widget snippet.
x.com	ブロック	`X-Frame-Options: DENY`Use publish.twitter.com to get a widget snippet.
linkedin.com	ブロック	`X-Frame-Options: SAMEORIGIN`
github.com	ブロック	`X-Frame-Options: DENY`Gists can be embedded via the script snippet on each gist.
amazon.com	ブロック	`X-Frame-Options: SAMEORIGIN`
netflix.com	ブロック	`X-Frame-Options: DENY`
reddit.com	ブロック	`content-security-policy: frame-ancestors 'self'`Use embed.reddit.com for individual posts.
stackoverflow.com	ブロック	`X-Frame-Options: SAMEORIGIN`
paypal.com	ブロック	`X-Frame-Options: SAMEORIGIN`
apple.com	ブロック	`X-Frame-Options: SAMEORIGIN`
microsoft.com	ブロック	`X-Frame-Options: SAMEORIGIN`
openai.com	ブロック	`content-security-policy: frame-ancestors 'none'`
chatgpt.com	ブロック	`content-security-policy: frame-ancestors 'none'`
notion.so	ブロック	`X-Frame-Options: SAMEORIGIN`Public pages can be embedded via notion.site links in some tools.
figma.com	ブロック	`X-Frame-Options: SAMEORIGIN`Use the /embed?embed_host=... URL from Share → Get embed code.
wikipedia.org	許可	`(no framing restriction)`Wikipedia allows framing.
example.com	許可	`(no framing restriction)`
codepen.io	許可	`(embeds allowed via /embed/ URLs)`Use the Embed button on a pen for the canonical snippet.
vimeo.com	ブロック	`X-Frame-Options: SAMEORIGIN`Use https://player.vimeo.com/video/ID.
player.vimeo.com	許可	`(embed endpoint)`
open.spotify.com	ブロック	`X-Frame-Options: SAMEORIGIN`Use https://open.spotify.com/embed/... URLs.
maps.google.com	ブロック	`X-Frame-Options: SAMEORIGIN`Use the Share → Embed a map snippet.

FAQ

iframe が空白、または「接続が拒否されました」と表示されるのはなぜ？

サイトが X-Frame-Options ヘッダー（DENY または SAMEORIGIN）か、あなたのオリジンを含まない frame-ancestors ディレクティブ付きの Content-Security-Policy を送信しています。ブラウザはそれに従い、代わりにエラーページを表示します。正確なヘッダーは DevTools → Console、または Iframe Viewer が提供する curl コマンドで確認できます。

サイトが iframe に埋め込めるかどうかをテストする方法は？

上のテスターに URL を貼り付けて「表示する」を押してください。Iframe Viewer は選択した端末サイズの実際の iframe で読み込み、成功したか、どの根拠で判定したか、所要時間を報告します。

Iframe Viewer は X-Frame-Options ヘッダーを直接読めますか？

ブラウザ単体では読めません。別オリジンのレスポンスヘッダーは設計上 JavaScript から隠されています。Iframe Viewer は決定的なチェック（混在コンテンツ、主要サイトのデータベース）、ブラウザの load イベント、同一オリジンの検査を組み合わせ、常にどの根拠で判定したかを示します。確実な答えには curl コマンドを使ってください。

「load イベントが発生」と出るのにエラーページが見えます。どちらが正しい？

どちらも正しいです。Chrome と Firefox はエラーページに置き換えた場合でも load を発生させるため、イベントだけでは成功とブロックを区別できません。最終判断は目で確認し、curl で裏付けてください。

Iframe Viewer はテストした URL を保存・記録しますか？

いいえ。サーバーは存在しません。履歴はブラウザの localStorage に保存され、ワンクリックで消去できます。同意した場合のアナリティクスもページビューとクリックのみを集計し、テストした URL は決して記録しません。

allow と sandbox の違いは？

sandbox は機能（スクリプト、フォーム、ポップアップ、ナビゲーション）を取り除き、必要なものだけを戻します。allow はカメラ、全画面、決済などの強力な機能に対する Permissions Policy です。制御できない第三者コンテンツには両方を使ってください。

ここでは動くのに自分のサイトでは埋め込めないのはなぜ？

よくある原因: あなたのページが HTTPS で対象が HTTP（混在コンテンツ）、対象が Referer ヘッダーを確認している、あなたのサイトの Content-Security-Policy の frame-src に対象が含まれていない。フレーム設定のリファラーポリシーを試してください。

Iframe Viewer は本当に無料ですか？

はい。完全無料、アカウント不要、制限なし。サーバー費用のかからない静的サイトです。

iframe がブロックされる理由と対処法