在框架中加载另一个域名网站

Load another domain website in a iframe

本文关键字：域名 网站 另一个 加载 框架      更新时间：2023-09-26

我想在我的网站上使用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'".

简短的回答是不可以，你不能使用iFrame嵌入这个网站。

如果网站允许，你的代码是好的——但是在这种情况下，你没有一个有效的方法来嵌入这个网站。

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

显然他们不希望你嵌入他们的网站:

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

然而

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

尝试Ajax 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"

如果允许的话，可以将来自另一个源的页面放到iframe 中。这个没有，它使用内容安全策略告诉浏览器它不可以通过frame-ancestors策略:

frame-ancestors指令指示用户代理是否允许使用frame, iframe, object, embed或applet元素嵌入资源，或在非html资源中具有同等功能。资源可以使用这个指令来避免被嵌入到潜在的敌对环境中，从而避免许多UI redress [UIREDRESS]攻击。

相关文章：