【Edge】iframe内ページがEdgeでブロックされる時のX-Frame-Options確認と対処法

iframe埋め込みがEdgeでブロックされる原因

Webサイトが他のサイトのiframe内で表示されることを制御するため、HTTPレスポンスヘッダーに「X-Frame-Options」や「Content-Security-Policy (CSP)」の「frame-ancestors」ディレクティブが設定されています。

これらのヘッダーは、Webサイトの所有者が意図しないサイトからの埋め込みを防ぎ、クリックジャッキングなどの攻撃から保護する役割があります。

Edgeブラウザは、これらのヘッダー設定に従ってiframe内でのページ表示を制御するため、設定によってはブロックされます。

Edgeの開発者ツールでX-Frame-Optionsを確認する手順

iframeでブロックされているページを確認するには、Edgeの開発者ツールを使用します。

1. 対象のWebページを開く
   iframeで埋め込もうとしている、または埋め込んでいるWebページをEdgeで開きます。
2. 開発者ツールを開く
   ページ上で右クリックし、「検証」を選択するか、キーボードでF12キーを押します。
3. ネットワークタブを選択する
   開発者ツールが開いたら、上部メニューから「ネットワーク」タブをクリックします。
4. ページを再読み込みする
   ネットワークタブが開いた状態で、ページを再読み込みします(F5キーまたはCtrl+R)。
5. 対象のHTTPリクエストを選択する
   ネットワークタブに、ページ読み込み時の通信履歴が表示されます。iframeで表示したいページ(またはそのページにリクエストを送っている要素)に対応する通信履歴をクリックします。
6. ヘッダー情報を確認する
   右側のペインに、選択した通信のリクエストヘッダーとレスポンスヘッダーが表示されます。
7. X-Frame-Optionsを探す
   「レスポンスヘッダー」セクションで、「X-Frame-Options」という項目を探します。

X-Frame-Optionsには、主に以下の3つの値があります。

• DENY: どのページからもiframeでの埋め込みを一切許可しません。
• SAMEORIGIN: 同じオリジン(ドメイン、プロトコル、ポートが一致)からのiframe埋め込みのみ許可します。
• ALLOW-FROM uri: 指定されたURIからのiframe埋め込みのみ許可します(※現在は非推奨で、CSPのframe-ancestorsが推奨されています)。

Content-Security-Policy (CSP) のframe-ancestorsを確認する

X-Frame-Optionsだけでなく、より新しい「Content-Security-Policy (CSP)」ヘッダーもiframeの埋め込みを制御します。特に「frame-ancestors」ディレクティブが重要です。

開発者ツールのレスポンスヘッダーで、「Content-Security-Policy」を探し、その値に「frame-ancestors」が含まれているか確認してください。

例えば、「Content-Security-Policy: frame-ancestors ‘self’;」と設定されている場合、同じオリジンからの埋め込みのみ許可されます。

「’none’」が指定されている場合は、いかなるiframe埋め込みも拒否されます。

iframe埋め込みブロックの対処法

iframeでのページ表示がブロックされる場合の対処法は、主に以下の3つです。

サイト管理者への連絡と許可依頼

最も一般的で推奨される対処法は、埋め込みたいWebサイトの管理者(サイト運営者)に連絡し、iframeでの埋め込みを許可してもらうことです。

連絡する際は、以下の情報を伝えるとスムーズです。

• 埋め込みたいWebサイトのURL
• 埋め込み先のWebサイトのURL(あなたのサイト)
• ブロックされている旨(Edgeブラウザで確認できていること)

サイト管理者は、X-Frame-OptionsやCSPヘッダーの設定を変更することで、あなたのサイトからの埋め込みを許可できます。

例えば、X-Frame-Optionsを「SAMEORIGIN」から「ALLOW-FROM https://your-website.com」のように変更したり、CSPのframe-ancestorsディレクティブにあなたのサイトのURLを追加したりします。

代替手段の検討

サイト管理者が埋め込みを許可しない場合や、連絡が取れない場合は、代替手段を検討する必要があります。

• APIの利用: 埋め込みたい情報を提供しているWebサイトがAPIを提供している場合、APIを利用して情報を取得し、あなたのサイトで表示する方法があります。
• 直接リンク: iframeでの埋め込みではなく、該当ページへのリンクを設置する方法も考えられます。
• スクリーンショットや情報の転載: 著作権に注意しつつ、必要な情報をスクリーンショットで貼り付けたり、内容を要約して転載したりする方法もあります。

ブラウザ拡張機能の利用(非推奨・限定的)

一部のブラウザ拡張機能には、HTTPヘッダーを書き換える機能を持つものがあります。しかし、これらはサイトのセキュリティ設定を意図的に回避するものであり、推奨されません。

また、X-Frame-OptionsやCSPはブラウザ側で強制されるため、拡張機能で完全に回避できるとは限りません。セキュリティリスクや予期せぬ動作を引き起こす可能性があるため、特別な理由がない限り使用は避けるべきです。

EdgeとChromeでのX-Frame-Optionsの挙動の違い

項目	Edge	Chrome
X-Frame-Options	サポート(DENY, SAMEORIGIN, ALLOW-FROM)	サポート(DENY, SAMEORIGIN, ALLOW-FROM)
Content-Security-Policy (frame-ancestors)	サポート(X-Frame-Optionsより優先される場合あり)	サポート(X-Frame-Optionsより優先される場合あり)
iframe埋め込みブロック	ヘッダー設定に従い、ブロックされる場合がある	ヘッダー設定に従い、ブロックされる場合がある
開発者ツールでの確認	ネットワークタブでレスポンスヘッダーを確認可能	ネットワークタブでレスポンスヘッダーを確認可能

EdgeとChromeは、どちらもChromiumベースのブラウザであるため、X-Frame-OptionsおよびContent-Security-Policy (CSP) のframe-ancestorsディレクティブに対する基本的な挙動はほぼ同じです。

いずれのブラウザでも、Webサイト側でiframe埋め込みが許可されていない場合、ページはブロックされます。開発者ツールでの確認方法も共通しています。

ただし、ブラウザのバージョンや特定の拡張機能の影響により、ごく稀に挙動に差異が生じる可能性もゼロではありません。

まとめ

Edgeでiframe内ページがブロックされる問題は、主にWebサイト側のX-Frame-OptionsやCSPヘッダー設定が原因です。

開発者ツールでこれらのヘッダーを確認し、サイト管理者へ埋め込み許可を依頼するのが最も確実な解決策です。

代替手段としてAPIの利用や直接リンク設置も検討し、サイトのセキュリティポリシーを尊重した上で、iframe埋め込みを実現しましょう。

🧭

Microsoft Edgeトラブル完全解決データベース ページが開かない・パスワードが消えた・動作が重いなど、Edgeの困りごとを設定・仕組みから即解消。逆引きリファレンスとして活用してください。