在 iframe 中加载另一个域网站
[英]Load another domain website in a iframe
问题描述
I want to load another website on my website using the iframe.
我想使用 iframe 在我的网站上加载另一个网站。
I have seen some other issues while loading using the iframe in some other websites.在其他一些网站中使用 iframe 加载时，我还看到了其他一些问题。 So can't we implement iframe to load other domain website pages?那么我们不能实现iframe来加载其他域网站页面吗？ If so, do we have another way to load the websites ?如果是这样，我们是否有另一种加载网站的方法？
The following is the way I tested :以下是我测试的方式：
I have tried inhttp://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe with the following code.我在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>
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'".拒绝在框架中显示“ https://github.com/mattlewis92/angular-bootstrap-calendar/issues ”，因为祖先违反了以下内容安全策略指令：“frame-ancestors 'none'”。
2 个解决方案
解决方案1
3 2016-06-28 05:54:48
Short answer is NO, you cannot embed this site using iFrame.简短的回答是否定的，您不能使用 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
<frame>and<iframe>elements<frame>和<iframe>元素嵌入页面的有效父级
Obviously they do not WANT you to embed their site:显然，他们不希望您嵌入他们的网站：
The look and feel of the Service is copyright © GitHub, Inc. All rights reserved.
HOWEVER然而
You can use javascript to get the content since their API allows you to do so.您可以使用 javascript 来获取内容，因为他们的 API允许您这样做。
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尝试对https://api.github.com/repos/mattlewis92/angular-bootstrap-calendar/issues 进行ajaxing - 我看到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>
or write a proxy on your own server using或使用在您自己的服务器上编写代理
curl -i "https://api.github.com/repos/mattlewis92/angular-bootstrap-calendar/issues"
解决方案2
0 2016-06-28 05:55:45
You can put a page from another origin in an iframe if that page allows it.如果该页面允许，您可以将来自另一个源的页面放入 iframe。 That one doesn't, it uses the Content Security Policy to tell the browser it's not okay via the frame-ancestors policy:那个没有，它使用内容安全策略通过frame-ancestors策略告诉浏览器它不好：
The
frame-ancestorsdirective indicates whether the user agent should allow embedding the resource using aframe,iframe,object,embedorappletelement, or equivalent functionality in non-HTML resources.frame-ancestors指令指示用户代理是否应该允许使用frame、iframe、object、embed或applet元素embed资源，或者非 HTML 资源中的等效功能。 Resources can use this directive to avoid many UI Redressing [UIREDRESS] attacks by avoiding being embedded into potentially hostile contexts.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.