可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I want to load another website on my website using the iframe.

I have seen some other issues while loading using the iframe in some other websites. So can't we implement iframe to load other domain website pages? If so, do we have another way to load the websites?

The following is the way I tested:

I have tried in http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe with the following code.

<!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>

I got the following error. Refused to display 'https://github.com/mattlewis92/angular-bootstrap-calendar/issues' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

回答1:

Short answer is NO, you cannot embed this site using iFrame.

If the site allowed it, your code is fine - however in this case you do not have a valid way to embed this site.

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

Obviously they do not WANT you to embed their site:

The look and feel of the Service is copyright © GitHub, Inc. All rights reserved. You may not duplicate, copy, or reuse any portion of the HTML/CSS, Javascript, or visual design elements or concepts without express written permission from GitHub.

HOWEVER

You can use javascript to get the content since their API allows you to do so.

Try ajaxing to https://api.github.com/repos/mattlewis92/angular-bootstrap-calendar/issues - I see Access-Control-Allow-Origin:* so you are able to return that in an Ajax response to your page

$(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>

or write a proxy on your own server using

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

回答2:

You can put a page from another origin in an iframe if that page allows it. That one doesn't, it uses the Content Security Policy to tell the browser it's not okay via the frame-ancestors policy:

The frame-ancestors directive indicates whether the user agent should allow embedding the resource using a frame, iframe, object, embed or applet element, or equivalent functionality in non-HTML resources. Resources can use this directive to avoid many UI Redressing [UIREDRESS] attacks by avoiding being embedded into potentially hostile contexts.