Load another domain website in a iframe

2019-06-01 10:34发布

站内问答 / JavaScript
1814 2 4

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'".

2条回答
迷人小祖宗
2楼-- · 2019-06-01 11:13

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.

查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
3楼-- · 2019-06-01 11:29

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"
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)