Skip to content
IframeViewer

Iframe Viewer: URL が iframe で表示できるかテスト

URL を貼り付けると実際の iframe で表示し、X-Frame-Options / CSP frame-ancestors によるブロックを検出、端末サイズでプレビューします。サーバーには何も送信しません。

about:blank
上に URL を入力するとここに表示されます
  • サーバーには何も送信しません
  • sandbox と権限のテスト
  • 10 種の端末プリセット+比較モード

仕組み

検出の仕組み

ブラウザは別オリジンのフレームが失敗した理由を隠すため、決定的なチェックとブラウザ自身のシグナルを組み合わせ、どれが適用されたかを常に表示します。

  1. 01

    URL か <iframe> コードを貼り付け

    正規化(https:// の補完)、検証を行い、ネットワークに触れる前に混在コンテンツと既知ポリシー DB を確認します。

  2. 02

    ブラウザが端末サイズで描画

    プリセットの正確な解像度で実際の iframe を生成し、CSS で縮小。sandbox、allow、referrer の設定はそのまま適用されます。

  3. 03

    判定・根拠・コードを取得

    load イベントの時間、結果を決めたシグナル、ヘッダー確認用の curl コマンド、現在の設定を反映したコード。

機能

このツールでできること

根拠付きの即時判定

load イベントの発生、所要時間、結果を決めたルールが分かります。「まだ読み込み中?」と悩む必要はありません。

実機のビューポート

iPhone 15、Pixel 8、iPad Pro、1440p デスクトップ。ネイティブピクセルで描画して縮小表示 — 回転切り替えも。

比較モード

1 つの URL からスマホ・タブレット・ノート PC を並べて表示。埋め込み内のレスポンシブ崩れをユーザーより先に発見。

sandbox と権限のラボ

sandbox フラグ、allow= 機能、リファラーポリシーをリアルタイムで切り替え。リファラー次第で表示可否が変わるサイトも検証できます。

HTML・React・Vue・Svelte 出力

1 つの設定から 4 つの慣用的なコード。React には camelCase の props、必要ならアスペクト比のレスポンシブラッパーも。

既知ポリシーのデータベース

iframe をブロックする主要サイトを即座に表示 — 送信ヘッダーと公式の埋め込み代替手段つき。

設計段階からプライベート

バックエンドはありません。URL、履歴、ジェネレーター設定はブラウザの localStorage にのみ保存されます。

共有できる結果

すべてのテストに URL があります。チケットや Slack に貼れば、同僚も同じ結果を確認できます。

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 は本当に無料ですか?

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