web-dev-qa-db-ja.com

iframeと外部ウェブサイト

だから私はこのコードを持っています：

<iframe id="theFrame" src="http://localhost" style="width:100%;" frameborder="0">
</iframe>

そしてiframeにロードされたlocalhostサイトはうまくいきます。

しかし、srcを外部のWebサイトに変更すると

<iframe id="theFrame" src="http://www.youtube.com" style="width:100%;" frameborder="0">
</iframe>

ウェブサイトが読み込まれませんでした。

何を間違えたのですか？ Google画像検索ではiframeで外部のWebサイトを使用できることを知っています...

外部サイトをiframeで機能させるにはどうすればよいですか？

htmliframeweb
18
kamikaze_pilot

次のような外部のウェブサイトを使用する理由：

  1. youtube.com
  2. google COM
  3. stackoverflow.com
  4. 等.

フレームにが読み込まれていないのは、ある種のFrame Killerを意図的に利用しているためです。

例（jQueryを使用）：

<style> html{display:none;} </style>
<script type="text/javascript">
    $(document).ready(function () {
        if(window.self == window.top) {
            document.documentElement.style.display = 'block'; }
        else {
       window.top.location = window.self.location; }
    });
</script>

推奨読書：

25
JohnB

おそらく私が抱えているのと同じ問題が発生しています。おそらくiframeがX-frame-optionsによってブロックされているか、Denyプロパティによってブロックされています。たとえば、外部のソースからFacebookにアクセスすると、Google Chromeで拒否の応答が返されます

5
Zackery Painter

以下のコードスニペットを実行すると、

<iframe src="https://www.youtube.com"></iframe>

次に、開発ツールを確認します。エラーがスローされます。

「X-Frame-Options」が「sameorigin」に設定されているため、フレームに「 https://www.youtube.com/ 」を表示することを拒否されました。

これは、アクセスしようとしているサイトが-を使用して同じOriginへの埋め込みを制限しているためです（iframe、frame、embed、object）。 X-Frame-Options ヘッダー。そのため、youtube.comはyoutube.comページを含むiframeを問題なく読み込むことができますが、他のユーザーはできません。埋め込みサイトのサイト管理者のみがその設定を変更できます。

埋め込むサイトの管理者がいる場合は、ホストサイトをホワイトリストに登録できます。

X-Frame-Options: allow-from https://my-Host-site.com/

これは、埋め込もうとしているページのサーバーによってHTTPヘッダーとして送信される必要があります。 HTML meta内のheadタグとしては機能しません。これにより、ブラウザは、埋め込まれているサイトを認識し、iframeにページを表示するためにホストしているサイトに適合します。

0
OXiGEN