150

I am trying to put google.com into an iframe on my website, this works with many other websites including yahoo. But it does not work with google as it just shows a blank iframe. Why does it not render? Are there any tricks to do that?

I have tried it in an usual way to show a website in an iframe like this:

<iframe name="I1" id="if1" width="100%" 
 height="254" style="visibility:visible" 
 src="http://www.google.com"></iframe>

The google.com page does not render in the iframe, it's just blank. What is going on?

Eric Leschinski
  • 146,994
  • 96
  • 417
  • 335
Bala
  • 3,576
  • 10
  • 46
  • 74
  • 1
    Why do you need to show Google in an iframe? – Paul Alan Taylor Jan 02 '12 at 12:15
  • Don't quote me, but maybe google uses something like `window.property` or something, that, inside an IFrame, would break part of the display? – annonymously Jan 02 '12 at 12:16
  • if you want google search bar see this link:http://www.google.com/webelements/#!/custom-search – mgraph Jan 02 '12 at 12:17
  • @PaulAlanTaylor It was my client's requirement, it was said that he want to show the google result in his website handy in an iframe. – Bala Jan 02 '12 at 12:18
  • @mgraph I know about custom search by google, but the problem is that, the requirement is something like the following w3schools example where the w3schools website itself shown in an iframe http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe – Bala Jan 02 '12 at 12:21
  • unfortunately, without knowing the inner workings of google it's difficult to tell exactly what's wrong – annonymously Jan 02 '12 at 12:22
  • @Bala.C i think google refuse that but other domain are shown in the iframe – mgraph Jan 02 '12 at 12:22
  • @mgraph I agree, it seems google has some system (whether intentional or not) that stops their website from showing in iframes. – annonymously Jan 02 '12 at 12:24
  • @Bala.C the problem come from X-Frame-Options see this link :http://stackoverflow.com/questions/6666423/overcoming-display-forbidden-by-x-frame-options – mgraph Jan 02 '12 at 12:26
  • @mgraph initially i thought only the SSL secured websites are like that, but after finding iframe working with other https websites, I think only google and their branches cannot be shown in an iframe, I asked here in stackoverflow after a huge research – Bala Jan 02 '12 at 12:27
  • Use reverse proxy, you can solve the problem. – ijse Jan 02 '12 at 13:04
  • Isn't it against some Google's Terms of Service? If they want to charge you for using Google Custom Search in your site/applicatioon they probably don't want you to bypass it using iframe. Anybody knows something about it? – kremuwa Sep 19 '13 at 09:10
  • 36
    Just do this: `` – niutech Nov 21 '18 at 18:17
  • You mean proxy @ijse – GViz Apr 14 '22 at 21:05

9 Answers9

147

The reason for this is, that Google is sending an "X-Frame-Options: SAMEORIGIN" response header. This option prevents the browser from displaying iFrames that are not hosted on the same domain as the parent page.

See: Mozilla Developer Network - The X-Frame-Options response header

Tarandeepsingh
  • 126
  • 15
Andreas Koch
  • 1,977
  • 1
  • 13
  • 8
  • 25
    I think this is pretty useless. If anyone can think of a reason to use that feature apart from just being mean feel free to tell me. – annonymously Jan 02 '12 at 12:27
  • @annonymously it doesn't cause any problems, when you get permission from someone to embed their content into yours, you simply get them to change the header they're sending at the same time. – Jon Hanna Aug 27 '12 at 12:00
  • 20
    @JonHanna one does not simply contact google for anything. – albert Feb 19 '18 at 16:05
  • 50
    You can use this URL in an `iframe`: https://www.google.com/search?igu=1 – niutech Nov 21 '18 at 18:16
  • 1
    Or you can use my [X-Frame-Bypass](https://niutech.github.io/x-frame-bypass/) Web Component. – niutech Jan 07 '19 at 16:10
  • 5
    @niutech Incredibly, your URL with the ?igu=1 parameter works. Any idea why? What's the original purpose behind that option? Interestingly, this causes me to show as not logged in, *but* the search field still suggests some of my actual historical searches. So I'm "kind of" logged in. Very strange. – Mark Thomson Jan 22 '19 at 23:32
  • Do we have the same add-on for chrome browser? – Pranav Bilurkar Feb 21 '19 at 09:18
  • @annonymously It's used to prevent clickjacking. There was an old example in Firefox where they used to allow you to display source code in an iframe. They basically sized the frame such that it displayed a remote CSRF token and said "copy this token into this text box to prove you're not a robot". So you copy and paste a CSRF token for Facebook, for example, and now they can post on your Facebook wall. – Andrew Jun 26 '19 at 18:57
  • @niutech can you please say me how that igu=1 works – Godwin Jun 11 '20 at 16:29
  • @niutech's solution working with *Firefox*, but dropping the following error on *Chrome*: `Refused to frame 'https://consent.google.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://www.google.com".` – eapo Sep 16 '20 at 23:06
  • @Godwin, it's Google itself leaves the hole. I don't say it's a Loophole, just maybe Google think it's necessary under some circumstances. – Zhang May 13 '22 at 06:52
31

IT IS NOT IMPOSSIBLE.
Use a reverse proxy server to handle the Different-Origin-Problem. I used to using Nginx with proxy_pass to change the url of page. you can have a try.

Another way is to write a simple proxy page runs on server by yourself, just request from Google and output the result to the client.

ijse
  • 2,998
  • 1
  • 19
  • 25
  • 9
    Google blocked my simple attempts at curling their standard search url. :( I ended up using "Google Custom" which sends different X-Frame-Options. http://www.google.com/custom?q=test&btnG=Search – Joel Mellon Aug 28 '13 at 19:33
22

As it has been outlined here, because Google is sending an "X-Frame-Options: SAMEORIGIN" response header you cannot simply set the src to "http://www.google.com" in a iframe.

If you want to embed Google into an iframe you can do what sudopeople suggested in a comment above and use a Google custom search link like the following. This worked great for me (left 'q=' blank to start with blank search).

<iframe id="if1" width="100%" height="254" style="visibility:visible" src="http://www.google.com/custom?q=&btnG=Search"></iframe>

EDIT:

This answer no longer works. For information, and instructions on how to replace an iframe search with a google custom search element check out: https://support.google.com/customsearch/answer/2641279

ScottyG
  • 3,204
  • 3
  • 32
  • 42
  • Thx ScottyG! Is there any options to add images results? – Krzysztof Przygoda Dec 09 '14 at 14:19
  • Hey Krzysztof Przygoda I think you can force a image search with a src like: `http://www.google.com/search?site=imghp&tbm=isch&q='searchstring'` but because it uses search? and not custom? you will not be able to use it in a iframe – ScottyG Dec 09 '14 at 19:38
  • 1
    @ScottyG Is the above technique still valid? I tried dropping that line into a blank page and allI get is a blank iframe, even when I provide a query – Andres Mar 25 '16 at 07:48
  • 2
    Hi Andres, looks like you might be right. I am not longer able to get this to work for me. The custom search link now redirects to https://www.google.ca/webhp?btnG=&gws_rd=ssl which forces ssl and appears to be blocked in a iframe now. I will keep investigating this but it looks like the party might be over on this one... :( – ScottyG Mar 25 '16 at 17:45
12

You can use https://www.google.com/search?igu=1 instead of https://google.com/ , it works. This issue is it has X-Frame-Options Header policy and browsers follow those policies.

roshandeep singh
  • 458
  • 6
  • 7
  • The content inside the iframe is way bigger than the iframe itself. Any clue how to make the content inside be sized correctly, ie be responsive in relation to the size of iframe it is in? Like you would think if the iframe was small width, then Google would just do a mobile layout that fits the width available. – Kevin Wheeler Aug 24 '22 at 16:40
6

You can bypass X-Frame-Options in an using YQL.

var iframe = document.getElementsByTagName('iframe')[0];
var url = iframe.src;
var getData = function (data) {
    if (data && data.query && data.query.results && data.query.results.resources && data.query.results.resources.content && data.query.results.resources.status == 200) loadHTML(data.query.results.resources.content);
    else if (data && data.error && data.error.description) loadHTML(data.error.description);
    else loadHTML('Error: Cannot load ' + url);
};
var loadURL = function (src) {
    url = src;
    var script = document.createElement('script');
    script.src = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20data.headers%20where%20url%3D%22' + encodeURIComponent(url) + '%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=getData';
    document.body.appendChild(script);
};
var loadHTML = function (html) {
    iframe.src = 'about:blank';
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(html.replace(/<head>/i, '<head><base href="' + url + '"><scr' + 'ipt>document.addEventListener("click", function(e) { if(e.target && e.target.nodeName == "A") { e.preventDefault(); parent.loadURL(e.target.href); } });</scr' + 'ipt>'));
    iframe.contentWindow.document.close();
}

loadURL(iframe.src);

<iframe src="http://www.google.co.in" width="500" height="300"></iframe>

Run it here: http://jsfiddle.net/2gou4yen/

Code from here: How Can I Bypass the X-Frame-Options: SAMEORIGIN HTTP Header?

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Netham
  • 1,168
  • 6
  • 16
  • 3
    It is working but not for first time. If I open my webpage in which I have embedded, I have to hit refresh to load page for first time. After that it will be good. – Vivek Sinha Jan 25 '18 at 11:55
  • @TV-C-15 It works when you replace `http://query.yahooapis.com` with `https://query.yahooapis.com`. – niutech Nov 21 '18 at 18:09
  • tested also on codepen [https://codepen.io/anon/pen/Xyqqvb] and it works (although sometime requires to refresh) on firefox,chrome,opera, does not work on edge **BUT** if I copy locally and I open into browser it continues to reload the page..here the full script: [https://files.fm/u/arzrb2h4] – Joe Nov 24 '18 at 14:26
  • 1
    not working. Is there any other way to open google in an iframe? – Krishna Jul 31 '19 at 03:05
6

You can solve using Google CSE (Custom Searche Engine), which can be easily inserted into an iframe. You can create your own search engine, that search selected sites or also in entire Google's database.

The results can be styled as you prefer, also similar to Google style. Google CSE works with web and images search.

google.php

<script>
  (function() {
    var cx = 'xxxxxxxxxxxxxxxxxxxxxx';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

yourpage.php

<iframe src="google.php?q=<?php echo urlencode('your query'); ?>"></iframe>
WalterV
  • 1,490
  • 2
  • 21
  • 33
4

If you are using PHP you can use file_get_contents() to print the content:

<?php
$page = file_get_contents('https://www.google.com');
echo $page;
?>

This will print whatever content file_get_contents() function gets in this url. Please note that since you are displaying content as string instead as a actual web page, things like relative path images are not shown correctly, because /img/myimg.jpg is now loading from your server and not from google.com anymore.

However, you can play with some tricks like str_replace() function to replace absolute urls in images:

<?php
$page = file_get_contents('https://www.google.com');
echo str_replace('src="img/','src="https://google.com/img/',$page);
?>
quakeglen
  • 165
  • 3
  • 7
2

This used to work because I used it to create custom Google searches with my own options. Google made changes on their end and broke my private customized search page :( No longer working sample below. It was very useful for complex search patterns.

<form method="get" action="http://www.google.com/search" target="main"><input name="q" value="" type="hidden"> <input name="q" size="40" maxlength="2000" value="" type="text">

web

I guess the better option is to just use Curl or similar.

jim
  • 71
  • 1
  • 7
-1

Its not ideal but you can use a proxy server and it works fine. For example go to hidemyass.com put in www.google.com and put the link it goes to in an iframe and it works!

Monty
  • 13
  • 2