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嵌入此网站。

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

The frame-ancestors directive specifies valid parents that may embed a page using the and 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"

Answer 2

您可以将来自其他来源的网页放入iframe ，如果该页面允许的话。那个没有，它使用Content Security Policy通过frame-ancestors政策告诉浏览器它不合适：

frame-ancestors指令指示用户代理是否应允许使用frame，iframe，object，embed或{{1}来嵌入资源元素或非HTML资源中的等效功能。资源可以使用此指令避免许多UI Redressing [UIREDRESS]攻击，避免被嵌入潜在的恶意上下文中。

在iframe中加载其他域网站

2 个答案: