Embedding website into another website using object or iframe [duplicate] - javascript

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.

Related

How to allow iframe embed for a web page? (The iframe shows blank screen)

I'm trying to put a url from my web app in an iframe to be displayed on another website.
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://mywebsite.com/a-page"></iframe>
But right now the page doesn't show up inside the iframe. It's completely blank. Some internet research shows that it means my web app is not set up to allow iframes. What should I do (e.g. change certain settings on my server) to allow iframe embed?
I only want to allow certain url patterns from my web app to be embeddable, i.e. https://mywebsite/embeds/page-number. The site is built with react.js and using Nginx server.
The client (browser in this case) is blocking the web site from being rendered. You have to whitelist the origin from which you are trying to access the content to be loaded in the iframe
If you open dev tools, you should see something like this
This article should provide the solution you are looking for to fix your issue :
Google Content Security Policy

Why won't this page load into an iframe?

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.

Load another domain website in a iframe

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.

How to fix a drupal (https) website with blocked mixed content

My Drupal e-commerce site is working on https.I want to embed below code to a page.
<iframe src="http://files.podsnack.com/......"(not exact code)
But src is on http, due to this not able to load the iframe in the page. I am getting below error.
Blocked loading mixed active content "http://files.podsnack.com/iframe/embed.html?hash=avcsgijp&t=1402616221"
carouFredSel: No element found for "#clients-scroller".
plugins... > eval (line 1)
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
Note: src will not work on https.
Please advise.
I'm afraid you cannot load an iframe via http on a https page securely, thus getting the errors. Browsers are beginning to just completely block this now, where as older browsers would just give a warning.
The only way to get it to load is using https for the iframe, or accessing the page via http instead of https.
See this blog post about Firefox introducing the block: https://blog.mozilla.org/tanvi/2013/04/10/mixed-content-blocking-enabled-in-firefox-23/
and here's a page about IE blocking mixed content: http://support.microsoft.com/kb/2625928
and here's a page about Chrome blocking mixed content or warning about it: https://support.google.com/chrome/answer/1342714?hl=en
And see this post for a general explanation of the problem: https://developer.mozilla.org/en-US/docs/Security/MixedContent/How_to_fix_website_with_mixed_content

How to check if website is loadable in iframe

I need to check, if website in iframe is loaded properly. On my website, users can POST custom website, which will show them in iframe. But some websites are protected from insert to iframe (such as google or facebook).
How can I check, if is website loadable in iframe and can be used in iframe?
PS: I haven't show any code, because I have no code and no idea how to do it. (My website runs on Java, so no Apache or PHP).
Check HTTP response header for X-Frame-Options. Facebook sends X-Frame-Options=DENY, which means "The page cannot be displayed in a frame, regardless of the site attempting to do so."
The X-Frame-Options HTTP response header can be used to indicate
whether or not a browser should be allowed to render a page in a
<frame>, <iframe> or <object>. Sites can use this to avoid
clickjacking attacks, by ensuring that their content is not embedded
into other sites.
Check this: Accessing the web page's HTTP Headers in JavaScript

Categories