在 iframe 中加载另一个域网站

Question

我想使用 iframe 在我的网站上加载另一个网站。

在其他一些网站中使用 iframe 加载时，我还看到了其他一些问题。 那么我们不能实现iframe来加载其他域网站页面吗？ 如果是这样，我们是否有另一种加载网站的方法？

以下是我测试的方式：

我在http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe 中尝试过使用以下代码。

<!DOCTYPE html>
<html>
<body>
    <iframe src="https://github.com/mattlewis92/angular-bootstrap-calendar/issues" width="800" height="800">
      <p>Your browser does not support iframes.</p>
    </iframe>
</body>
</html>

我收到以下错误。 拒绝在框架中显示“ https://github.com/mattlewis92/angular-bootstrap-calendar/issues ”，因为祖先违反了以下内容安全策略指令：“frame-ancestors 'none'”。

Answer 1

简短的回答是否定的，您不能使用 iFrame 嵌入此站点。

如果站点允许，则您的代码没问题 - 但是在这种情况下，您没有嵌入此站点的有效方法。

frame-ancestors 指令指定可以使用<frame>和<iframe>元素嵌入页面的有效父级

显然，他们不希望您嵌入他们的网站：

服务的外观和感觉版权所有 © GitHub, Inc. 保留所有权利。 未经 GitHub 明确书面许可，您不得复制、复制或重复使用 HTML/CSS、Javascript 或视觉设计元素或概念的任何部分。

然而

您可以使用 javascript 来获取内容，因为他们的 API允许您这样做。

尝试对https://api.github.com/repos/mattlewis92/angular-bootstrap-calendar/issues 进行ajaxing - 我看到Access-Control-Allow-Origin:*因此您可以在 Ajax 响应中将其返回到您的页面

 $(function() { $.get("https://api.github.com/repos/mattlewis92/angular-bootstrap-calendar/issues",function(data) { console.log(data) $("#result").html(data[0].title); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="result"></div>

或使用在您自己的服务器上编写代理

curl -i "https://api.github.com/repos/mattlewis92/angular-bootstrap-calendar/issues"

Answer 2

如果该页面允许，您可以将来自另一个源的页面放入 iframe。 那个没有，它使用内容安全策略通过frame-ancestors策略告诉浏览器它不好：

frame-ancestors指令指示用户代理是否应该允许使用frame 、 iframe 、 object 、 embed或applet元素embed资源，或者非 HTML 资源中的等效功能。 资源可以使用此指令通过避免嵌入到潜在的敌对上下文中来避免许多 UI Redressing [UIREDRESS] 攻击。

在 iframe 中加载另一个域网站

问题描述

2 个解决方案

解决方案1
3 2016-06-28 05:54:48

解决方案2
0 2016-06-28 05:55:45

在 iframe 中加载另一个域网站

问题描述

2 个解决方案

解决方案1 3 2016-06-28 05:54:48

解决方案2 0 2016-06-28 05:55:45

解决方案1
3 2016-06-28 05:54:48

解决方案2
0 2016-06-28 05:55:45