Como mostrar google.com em um iframe?

121

Estou tentando colocar google.com em um iframe no meu site; isso funciona com muitos outros sites, incluindo o yahoo. Mas não funciona com o Google, pois mostra apenas um iframe em branco. Por que não renderiza? Existem truques para fazer isso?

Eu tentei de uma maneira normal para mostrar um site em um iframe como este:

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

A página google.com não é renderizada no iframe, apenas fica em branco. O que está acontecendo?

html Bala
fonte
Por que você precisa mostrar o Google em um iframe?
Paul Alan Taylor
Não me cite, mas talvez o google use algo parecido window.propertyou algo assim, que, dentro de um IFrame, quebraria parte do display?
anonimamente
se quiser a barra de pesquisa do Google, consulte este link: google.com/webelements/#!/custom-search
mgraph
@PaulAlanTaylor Era uma exigência do meu cliente, foi dito que ele queria mostrar o resultado do google em seu site à mão em um iframe.
Bala
11
Basta fazer isso:<iframe src="https://www.google.com/webhp?igu=1"></iframe>
Niutech

Respostas:

117

A razão para isso é que o Google está enviando um cabeçalho de resposta "X-Frame-Options: SAMEORIGIN". Esta opção evita que o navegador exiba iframes que não estejam hospedados no mesmo domínio da página pai.

Vejo: Mozilla Developer Network - O cabeçalho de resposta X-Frame-Options

Andreas Koch
fonte
18
Eu acho que isso é bastante inútil. Se alguém puder pensar em uma razão para usar esse recurso além de ser apenas mau, sinta-se à vontade para me dizer.
anonimamente
15
@JonHanna não basta entrar em contato com o Google para nada.
Albert
23
Você pode usar este URL em iframe: google.com/search?igu=1
niutech
1
Ou você pode usar meu componente da Web X-Frame-Bypass .
niutech
4
@niutech Incrivelmente, sua URL com o parâmetro? igu = 1 funciona. Alguma ideia do porquê? Qual é o propósito original por trás dessa opção? Curiosamente, isso faz com que eu apareça como não conectado, mas o campo de pesquisa ainda sugere algumas das minhas pesquisas históricas reais. Então estou "meio que" logado. Muito estranho.
Mark Thomson
28

NÃO É IMPOSSÍVEL.
Use um servidor proxy reverso para lidar com o problema de origem diferente. Eu costumava usar o Nginx com proxy_passpara alterar o url da página. Você pode tentar.

Outra forma é escrever uma página proxy simples executada no servidor por você mesmo, basta solicitar do Google e enviar o resultado para o cliente.

ijse
fonte
8
O Google bloqueou minhas tentativas simples de curvar seu URL de pesquisa padrão. :( Acabei usando "Google Custom" que envia diferentes X-Frame-Options. Google.com/custom?q=test&btnG=Search
Joel Mellon
7
Existe um tutorial sobre como resolver esse problema com o Nginx?
Preto de
21

Conforme descrito aqui, como o Google está enviando um cabeçalho de resposta "X-Frame-Options: SAMEORIGIN", você não pode simplesmente definir o src como " http://www.google.com " em um iframe.

Se você deseja incorporar o Google a um iframe, você pode fazer o que as pessoas sugeriram no comentário acima e usar um link de pesquisa personalizado do Google como o seguinte. Isso funcionou muito bem para mim (deixe 'q =' em branco para começar com a pesquisa em branco).

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

EDITAR:

Esta resposta não funciona mais. Para obter informações e instruções sobre como substituir uma pesquisa iframe por um elemento de pesquisa personalizado do Google, confira: https://support.google.com/customsearch/answer/2641279

ScottyG
fonte
Thx ScottyG! Existe alguma opção para adicionar resultados de imagens?
Krzysztof Przygoda
Ei, Krzysztof Przygoda, acho que você pode forçar uma pesquisa de imagens com um src como: http://www.google.com/search?site=imghp&tbm=isch&q='searchstring'mas porque usa a pesquisa? e não personalizado? você não poderá usá-lo em um iframe
ScottyG
1
@ScottyG A técnica acima ainda é válida? Tentei deixar essa linha em uma página em branco e tudo o que recebo é um iframe em branco, mesmo quando forneço uma consulta
Andres,
2
Olá, Andres, parece que você está certo. Eu não sou mais capaz de fazer isso funcionar para mim. O link de pesquisa personalizada agora redireciona para google.ca/webhp?btnG=&gws_rd=ssl que força ssl e parece estar bloqueado em um iframe agora. Vou continuar investigando isso, mas parece que a festa pode acabar neste aqui ... :(
ScottyG
8

Você pode ignorar as opções do X-Frame em um usando 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>

Execute aqui: http://jsfiddle.net/2gou4yen/

Código a partir daqui: Como posso ignorar as opções de X-Frame: cabeçalho HTTP SAMEORIGIN?

Netham
fonte
3
Está funcionando, mas não pela primeira vez. Se eu abrir minha página da web na qual eu incorporo, tenho que clicar em atualizar para carregar a página pela primeira vez. Depois disso, será bom.
Vivek Sinha
@ TV-C-15 Funciona ao substituir http://query.yahooapis.compor https://query.yahooapis.com.
Niutech
testado também no codepen [ codepen.io/anon/pen/Xyqqvb] e funciona (embora às vezes exija uma atualização) no firefox, chrome, opera, não funciona no limite, MAS se eu copiar localmente e abrir no navegador, ele continua a recarregue a página ... aqui está o script completo: [ files.fm/u/arzrb2h4]
Joe
1
não está funcionando. Existe alguma outra maneira de abrir o Google em um iframe?
Krishna
3

Você pode resolver usando o Google CSE (Custom Searche Engine), que pode ser facilmente inserido em um iframe. Você pode criar seu próprio mecanismo de busca, que busca sites selecionados ou também em todo o banco de dados do Google.

Os resultados podem ter o estilo de sua preferência, também semelhante ao estilo do Google. O Google CSE funciona com pesquisa na web e imagens.

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
fonte
2

Isso costumava funcionar porque eu o usava para criar pesquisas personalizadas no Google com minhas próprias opções. O Google fez alterações e quebrou minha página de pesquisa personalizada privada :( O exemplo abaixo não funciona mais. Foi muito útil para padrões de pesquisa complexos.

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

rede

Acho que a melhor opção é apenas usar Curl ou similar.

Jim
fonte
1

Não é o ideal, mas você pode usar um servidor proxy e funciona bem. Por exemplo, vá para hidemyass.com coloque em www.google.com e coloque o link para onde ele vai em um iframe e funciona!

Monty
fonte
0

Se estiver usando PHP, você pode usar file_get_contents()para imprimir o conteúdo:

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

Isso irá imprimir qualquer conteúdo file_get_contents() função de obtida neste url. Observe que, como você está exibindo o conteúdo como string em vez de uma página da web real, coisas como imagens de caminho relativo não são mostradas corretamente, porque /img/myimg.jpg agora está carregando de seu servidor e não mais de google.com.

No entanto, você pode brincar com alguns truques como a str_replace()função de substituir urls absolutos em imagens:

<?php
$page = file_get_contents('https://www.google.com');
echo str_replace('src="img/','src="https://google.com/img/',$page);
?>
Quakeglen
fonte