How to show google.com in an iframe?

Html

Html Problem Overview


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?

Html Solutions


Solution 1 - Html

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

Solution 2 - Html

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.

Solution 3 - Html

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

Solution 4 - Html

You can bypass X-Frame-Options in an

Solution 5 - Html

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>

Solution 6 - Html

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.

Solution 7 - Html

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

Solution 8 - Html

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

Solution 9 - Html

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!

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBalaView Question on Stackoverflow
Solution 1 - HtmlAndreas KochView Answer on Stackoverflow
Solution 2 - HtmlijseView Answer on Stackoverflow
Solution 3 - HtmlScottyGView Answer on Stackoverflow
Solution 4 - HtmlNethamView Answer on Stackoverflow
Solution 5 - HtmlWalterVView Answer on Stackoverflow
Solution 6 - Htmlroshandeep singhView Answer on Stackoverflow
Solution 7 - HtmlquakeglenView Answer on Stackoverflow
Solution 8 - HtmljimView Answer on Stackoverflow
Solution 9 - HtmlMontyView Answer on Stackoverflow