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 .asp?filename=tryhtml_iframe with the following code.
<!DOCTYPE html>
<html>
<body>
<iframe src="" width="800" height="800">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
I got the following error. Refused to display '' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".
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./tags/tryit.asp?filename=tryhtml_iframe with the following code.
<!DOCTYPE html>
<html>
<body>
<iframe src="https://github./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./mattlewis92/angular-bootstrap-calendar/issues' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".
Share Improve this question edited Jun 28, 2016 at 6:30 Sender 6,85812 gold badges49 silver badges69 bronze badges asked Jun 28, 2016 at 5:51 Jeeva JJeeva J 3,25311 gold badges42 silver badges91 bronze badges 1- Read this stackoverflow./questions/2754282/… – NeiL Commented Jun 28, 2016 at 5:55
2 Answers
Reset to default 3Short 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
<frame>and<iframe>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./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./repos/mattlewis92/angular-bootstrap-calendar/issues",function(data) {
console.log(data)
$("#result").html(data[0].title);
});
});<script src="https://ajax.googleapis./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./repos/mattlewis92/angular-bootstrap-calendar/issues"
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-ancestorsdirective indicates whether the user agent should allow embedding the resource using aframe,iframe,object,embedorappletelement, 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.