iframe 和外部网站

Posted 2023-03-05

【中文标题】iframe 和外部网站

【英文标题】：iframe and external website

【发布时间】：2012-01-07 05:25:15

【问题描述】：

所以我有这个代码：

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

在 iframe 中加载的 localhost 站点就好了..

但是当我将 src 更改为外部网站时

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

网站未加载。

我做错了什么？我知道您可以在 iframe 中使用外部网站，因为 Google 图片搜索可以这样做...

如何让外部网站在我的 iframe 中运行？

【问题讨论】：

您的 html 编码正确，但我认为您尝试访问 Youtube 的网络已阻止 youtube.com 域。您可以通过尝试不同的域来验证这一点吗？

【参考方案1】：

外部网站的原因如：

youtube.com google.com ***.com 等

没有加载在你的框架中，是因为他们故意利用某种Frame Killer。

示例（使用 jQuery）：

<style> htmldisplay: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>

推荐阅读：

Framekiller (Wikipedia) Busting a tough FRAME killer

【讨论】：

有时 Framekiller 会将引用的网站弹出框架，但在上面的示例中，那些 Framekiller 设置为离开框架空白的内容。

【参考方案2】：

如果你运行下面的代码sn-p：

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

然后看开发工具，会报错：

拒绝在框架中显示“https://www.youtube.com/”，因为它将“X-Frame-Options”设置为“sameorigin”。

这是因为您尝试访问的站点使用X-Frame-Options 标头将嵌入（通过iframe、frame、embed、object）限制在同一来源。所以 youtube.com 可以很好地加载带有 youtube.com 页面的 iframe，但没有其他人可以。只有嵌入式站点的站点管理员可以更改该设置。

如果您有嵌入网站的管理员，您可以将托管网站列入白名单：

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

这必须由您尝试嵌入的页面的服务器作为 HTTP 标头发送。它不能作为 HTML head 内的 meta 标记。这就是浏览器知道您正在嵌入的网站的方式，可以让托管的网站在iframe 中显示页面。

【讨论】：

Allow-from 已弃用，并且在现代浏览器中无法使用。

【参考方案3】：

您可能遇到了与我相同的问题，很可能 iframe 被 X-frame-options 阻止或被 Deny 属性阻止。例如，如果您从外部来源访问 facebook，它将在 google chrome 中返回 DENY 响应

【参考方案4】：

这似乎是 youtube 独有的问题； src="http://www.mozilla.org" 在您的代码中为我工作。如果您想在 iframe 中显示 youtube 视频，他们可能希望您在视频页面上使用“嵌入”选项？

【讨论】：

这不是“仅限 YouTube 的问题”。