在 iframe 中加载另一个域网站答案

【问题标题】：Load another domain website in a iframe在 iframe 中加载另一个域网站
【发布时间】：2016-10-30 07:08:25
【问题描述】：

我想使用 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'”。

【问题讨论】：

阅读此stackoverflow.com/questions/2754282/…
嗨，你刚才问了这个问题。随意accept answer

标签： javascript jquery html angularjs iframe

【解决方案1】：

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

如果网站允许，您的代码就可以了 - 但在这种情况下，您没有有效的方法来嵌入该网站。

The frame-ancestors directive specifies valid parents that may embed a page using the <frame> and <iframe> elements

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

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

但是

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

尝试 ajaxing 到 https://api.github.com/repos/mattlewis92/angular-bootstrap-calendar/issues - 我看到 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"

【讨论】：

我们可以使用jquery获取数据然后在iframe中加载内容吗？有什么诀窍吗？
我不明白你的意思。您能否提供更多细节或参考资料？
frame-ancestors 'self' 的意思也一样吗？
这意味着该网站将允许自己嵌入自己的内容

【解决方案2】：

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

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

【讨论】：

我们可以使用jquery获取数据然后在iframe中加载内容吗？有什么诀窍吗？
@JeevaJsb：几乎肯定不会，因为如果他们这样做，他们也会使用Same Origin Policy 来阻止您的来源通过ajax 访问他们的内容。您可以向您自己的服务器发出请求，让您的服务器从他们的服务器请求它，然后将其返回到您的页面。我会恭敬地建议，因为他们很明显不希望以这种方式使用他们的内容，所以你不要以这种方式使用他们的内容。
看来我们在这里复制答案和 cmets
我以为评论通知不会发送给他。我也想要他的意见。所以我在这里发表了同样的评论。
@mplungjan：一直在发生。找了一些资料才找到，它不在我的正常参考清单上。