iframeに「接続が拒否されました」と表示される原因は、埋め込み先ページのX-Frame-OptionsかCSPのframe-ancestorsです。レスポンスヘッダーを貼り付けて判定を確認し、サーバー側の修正をコピーできます。
灰色の「接続が拒否されました」という表示は、iframe内のページがブラウザーに対して、フレーム内での表示を禁止したことを意味します。その指示はX-Frame-Optionsレスポンスヘッダー（DENYまたはSAMEORIGIN）か、Content-Security-Policyのframe-ancestorsルールで行われます。解除できるのは埋め込まれる側のサーバーだけです。下にヘッダーを貼り付けると、どのルールでブロックされているかがわかります。
各ヘッダー値がiframeに与える意味
このエラーはネットワーク障害ではなく、iframeタグにも問題はありません。ブラウザーはページを取得し、フレーム表示を禁じるヘッダーを読み取って、中身をエラーに置き換えたのです。理由はクリックジャッキング対策です。誰でもフレームに入れられるページは、透明なボタンを上に重ねられてしまいます。対処法は、どのサーバーがヘッダーを送ったかによって変わります。
できません。このルールは埋め込まれるサイトに代わって訪問者のブラウザーが強制しており、iframeのどの属性でも上書きできません。方法は、埋め込まれるサイトのヘッダーを変える、そのサイトがフレーム用に提供する埋め込みURLを使う、リンクにする、のいずれかだけです。
X-Frame-Options: DENYやframe-ancestors 'none'がないか確認してください。どちらも同じドメインのページを含め、すべての親をブロックします。SAMEORIGINかframe-ancestors 'self'に変更しましょう。サブドメインやポートが違えば別のオリジンになる点にも注意してください。
frame-ancestorsを使いましょう。許可する親を複数指定でき、両方がある場合は常にこちらが優先されます。X-Frame-Optionsも送る場合は、次に設定を読む人が誤解しないよう、CSPのルールと矛盾しないようにしておきます。
通常の視聴ページや場所のページは、たいていフレーム表示を禁じるヘッダーを送っています。一方でサービス側は、iframe用の別の埋め込みアドレスを公開しており、多くは「共有」から「埋め込む」の中にあります。当社の埋め込みコードジェネレーターは、対応するリンクをその埋め込みアドレスに変換します。
はい。iframeが別のiframeの中にある場合、直接の親だけでなく、最上位ページまでのすべての祖先がポリシーに一致する必要があります。
どの例も同じサイトと1つのパートナーを許可します。https://partner.example は、あなたのページをフレーム表示できるべきオリジンに置き換えるか、全員をブロックするなら 'none' を使ってください。
always を付けると、エラーページでもヘッダーが送られます。2つのルールがずれないよう、古いX-Frame-Optionsの行は削除しましょう。
mod_headersが必要です。Header always setは、同じヘッダーの以前の値を置き換えます。
HelmetはデフォルトでX-Frame-OptionsをSAMEORIGINに設定します。それを無効にしてframe-ancestorsを設定すれば、設定元を1つにまとめられます。
headers()は、一致するすべてのルートにレスポンスヘッダーを追加します。ホスティングサービスが独自のヘッダーを加えることがあるため、後で本番のレスポンスを確認しましょう。
iframe内に表示するページのレスポンスヘッダーを貼り付けてください。処理はすべてこのページ内で行われ、何も取得しません。
埋め込まれるページのレスポンスヘッダー
iframeを置くページのオリジン
埋め込まれるページのオリジン
サンプルのヘッダーに戻す
判定
この親ページはこのページをフレーム表示できます。
ブラウザーはこのページをiframe内に表示することを拒否します。
まだはっきりした判定は出ていません。
Content-Security-Policy: frame-ancestors 'none' によりブロックされます。
frame-ancestorsにより許可されます：{v} が親のオリジンに一致します。
frame-ancestorsによりブロックされます：リスト内のどのソースも {v} に一致しません。
X-Frame-Optionsはありますが、frame-ancestorsが判定するため無視されます。
X-Frame-Options: DENY によりブロックされます。
X-Frame-Options: SAMEORIGIN で、オリジンが一致するため許可されます。
X-Frame-Options: SAMEORIGIN で、{v} は別のオリジンのためブロックされます。
ALLOW-FROMは廃止済みで無視されるため、ブロックしません。
X-Frame-Optionsに異なる値が複数あります。値は1つだけ送ってください。
Content-Security-Policy-Report-Onlyは決してブロックしないため、スキップしました。
フレーム表示に関するヘッダーが見つからないため、どのサイトでもこのページをフレーム表示できます。
両方のオリジンを完全なURLで入力してください。例：https://example.com
無料で始める · クレジットカード不要