156

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?

14
  • 1
    Why do you need to show Google in an iframe? Commented Jan 2, 2012 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? Commented Jan 2, 2012 at 12:16
  • if you want google search bar see this link:google.com/webelements/#!/custom-search
    – mgraph
    Commented Jan 2, 2012 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
    Commented Jan 2, 2012 at 12:18
  • 39
    Just do this: <iframe src="https://www.google.com/webhp?igu=1"></iframe>
    – niutech
    Commented Nov 21, 2018 at 18:17

9 Answers 9

153

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

11
  • 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. Commented Jan 2, 2012 at 12:27
  • 20
    @JonHanna one does not simply contact google for anything.
    – albert
    Commented Feb 19, 2018 at 16:05
  • 56
    You can use this URL in an iframe: google.com/search?igu=1
    – niutech
    Commented Nov 21, 2018 at 18:16
  • 2
    Or you can use my X-Frame-Bypass Web Component.
    – niutech
    Commented Jan 7, 2019 at 16:10
  • 8
    @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. Commented Jan 22, 2019 at 23:32
32

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.

1
  • 9
    Google blocked my simple attempts at curling their standard search url. :( I ended up using "Google Custom" which sends different X-Frame-Options. google.com/custom?q=test&btnG=Search Commented Aug 28, 2013 at 19:33
23

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

4
  • Thx ScottyG! Is there any options to add images results? Commented Dec 9, 2014 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
    Commented Dec 9, 2014 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
    Commented Mar 25, 2016 at 7: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 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
    Commented Mar 25, 2016 at 17:45
20

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.

1
  • 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. Commented Aug 24, 2022 at 16:40
7

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>
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?

4
  • 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. Commented Jan 25, 2018 at 11:55
  • @TV-C-15 It works when you replace http://query.yahooapis.com with https://query.yahooapis.com.
    – niutech
    Commented Nov 21, 2018 at 18:09
  • tested also on codepen [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: [files.fm/u/arzrb2h4]
    – Joe
    Commented Nov 24, 2018 at 14:26
  • 1
    not working. Is there any other way to open google in an iframe?
    – Krishna
    Commented Jul 31, 2019 at 3:05
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);
?>
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.

-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!

1

Not the answer you're looking for? Browse other questions tagged or ask your own question.