How Can You Embed An iframe IN A Google Search Result Page

Question

For whatever reason, that's not important, i'm trying to combine google shopping with another page via an iframe.

I've tried the approach proposed here, consisting of embedding a google custom search query in an iframe, but google custom search does not allow access to the shopping tab.

I figured, if you can't embed Google, embed yourself in it. So I proceeded to inject some jQuery in the page

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type.
jQuery.noConflict();

clean up the google shopping search results page to what I needed, namely the html inside the div#search

jQuery(function($) {$('#search').show().parentsUntil('body').andSelf().siblings().hide();});

Create an iframe and inject it:

var iframe = document.createElement('iframe')
iframe.src="http://example.com"
iframe.width="100%";
iframe.height="500";
iframe.style="visibility:visible";
document.body.appendChild(iframe)

Only problem is the iframe doesn't load the contents of the page and in turn is blank. If you try the above snippet in any other page, it works. It seems like Google is blocking the iframe from loading. How can I get around that?

Answer 1

Google seems not to work using an iframe... Even if you are not using JS. What you should use instead is the Google Custom Search API, wich allows you to create a custom search engine. You just have to enter an example website, change the Option to Search all the web. and remove your entered website again. To create a custom Search engine you'll need a google account. Start here.

Answer 2

When I run that code, the following error is reported in my console:

VM259:7 Mixed Content: The page at 'https://www.google.co.uk/?gws_rd=ssl' was loaded over HTTPS, but requested an insecure resource 'http://example.com/'. This request has been blocked; the content must be served over HTTPS.

Changing it to an HTTPS URL:

var iframe = document.createElement('iframe')
iframe.src="https://example.com"
iframe.width="100%";
iframe.height="500";
iframe.style="visibility:visible";
document.body.appendChild(iframe)

… makes it work fine (albeit it tucked behind the logo):

Answer 3

Tnx for @Quentins comment.

UPD:

Embedding code to google website:

In general you can't embed code for page that you don't own.

if user opens your website and open another tab with google or your website opens another tab with google, your website doesn't have access to google website source code/context and you can't affect on google website, because there are completely isolated from each other.

Seems your actions for cleaning results and embedding your iframe in google page you made in your browser console. That changes affect only locally for your browser and doesn't affect for any other users that open google website.

Possible solutions:

Actually, you can embed some code to other pages, but you need to use:

• Browser extensions (too complicated, because user need to install your extension for browser)
• XSS/other vulnerables (that's almost impossible for google search website)

Embedding google to your page:

You can't embed iframe from google because of x-frame-options header in http response for google.com. There is no good workaround, sorry.

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.