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'".
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 <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.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"
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.
Related
I have some html that loads a page into an iframe. This works fine with this page, for example:
https://seandavi.github.io/
However, a page like this:
https://twitter.com/seandavis12/
results in an empty iframe. I suspect this has to do with the page from twitter being rendered in parts using javascript, but I am not sure how to force the page to display in an iframe. Any suggestions?
Environments I have tested: chrome & safari on mac OS
Minimal example:
<html>
<body>
<iframe src="https://seandavi.github.io"></iframe>
<iframe src="https://twitter.com/seandavis12/"></iframe>
</body>
</html>
You won't be able to embed Twitter in an iframe - they have HTTP headers set which your browser sees and prevents the iframe content from being rendered.
If you open your browser console you will be able to see it being blocked:
Twitter will allow you to embed a specific tweet on a page, however, but you must follow their guide on how to do this: https://dev.twitter.com/web/embedded-tweets
Short answer is you can't use iframe/frame/embed/object or any other regular embedding html tag.
Most large company websites that aren't simply static, video streaming (ex. youtube), or informational, will likely have the "X-Frame-Options" set to 'sameorigin'. This is known as a Frame-Killer, disabling iframes/frames/etc from embedding content because they are highly vulnerable to being Click-Jacked.
Check out the security section here in Dev Moz
Oftentimes, high profile companies with desirable endpoints and webpages will provide alternate embedding options or even API's that allow you to safely request access for displaying their resources.
How can I see the personal account of the Telegram in the iframe tag?
I tried the following code but it does not work:
<iframe src="https://telegram.me/joinchat/BfNEij9CbDh03kwXacO5OA"></iframe>
Telegram does not allow you to show their webpage in an iframe. You can see the message when you view the console:
This is, because the Site explicitly refuses it using X-Frame-Options header set to sameorigin. You'd probably need to use the telegram-api. There is a JavaScript Library for that but it's a bit more advanced then just showing an IFrame. It will take you some time, you need to authenticate against the App etc.
I am loading HTML content into an iframe using the srcdoc property. The iframe is a sandboxed iframe with no permissions given, so all Javascript in the iframe is blocked. However, remote requests (such as for CSS, images etc.) will still be triggered inside the iframe.
Is there any possible way to tell the iframe to only load what I give it in the srcdoc property and not make any additional requests?
Thanks in advance
The basics
Presumably no because sandboxing the iframe is meant to avoid sharing sensitive data between your main document and your iframe's document or limiting potentially disruptive behavior.
The iframe is still functionally a browser window and will act like such, loading all external resources that are declared in it, with the only difference that it displays within another document rather than another window.
If the code present inside srcdoc has calls to remote resources, then the browser is doing exactly what you are telling it to do by loading them.
If you don't want these resources to be loaded, you will have to edit them out of the srcdoc code.
Actually, a possible solution
That being said, there might exist a way to block the loading of resources by using a Content Security Policy from within the iframe's document using a meta tag:
<meta http-equiv="Content-Security-Policy" content="default-src 'none';">
or
<meta http-equiv="X-Content-Security-Policy" content="default-src 'none';">
I did try this under Firefox 39.0.3 but it didn't work, likely because of the following:
Bug 663570 - Implement Content Security Policy via tag
Regardless, for more information, see:
CSP (Content Security Policy) on the Mozilla Developer Network
Content Security Policy Reference
This question already has answers here:
How to show google.com in an iframe?
(9 answers)
Closed 8 years ago.
I am trying to embed one of my website into a html page, but I am unable to do that. I have tried to embed my other two websites and those are displaying correctly and the remaining one not displayed in my page.
After I have tried to access https://www.google.com and its also not displayed in my html page.
I have used the code:
Can we access the websites like google, facebook etc with object or iframe tags.
I have tried with both iframe and object tags but I was failed to access the website.
Please tell me is there any methods to access the websites like google or facebook etc.
Thanks in advance......
For security purpose you can't embed the websites with ssl prefix i.e. https. Although you can embed the website that uses http protocol like the code mentioned below:
<iframe src="http://www.techgig.com" height="600" width="700" frameborder="0"></iframe>
This might work if there is no protection applied for X-Frame-Options i.e. webistes with http prefix can also deny loading it in to iframe via X-Frame-Options in their .htaccess file. For e.g. stackoverflow has applied .htaccess security so you'll see this error in mozilla console when try to load it within iframe:
Load denied by X-Frame-Options: https://stackoverflow.com/ does not permit cross-origin framing.
However for websites with https prefix doesn't allow to be loaded in to iframe since they have aleady applied security for iframe injection in their website. Hence the wbsites like https://www.google.com & https://www.facebook.com will not load in your iframe.
I am trying to add:
$('#div_content').load('page.html');
into an App so that grabs announcements from my school's site, so when they update the site, it updates the apps page, and im not sure if its because im stressed and keep missing it, but how would i have it load the div "page-content" from said "URL" using the above script, sorry if this sounds stupid!
Simply put - you can't load HTML from other domains (like your school) unless they explicitly allow it by enabling Cross Origin Request Sharing (CORS). You can ask your school's IT administrator, but I don't think they'd be too keen on it, as CORS opens up a whole host of security issues.
Your best option is to use an <iframe> element:
<iframe src="page.html" width="400" height="400"></iframe>