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?
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.
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):
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.
Related
I have some html that loads a page into an iframe. This works fine with this page, for example:
https://seandavi.github.io/
However, a page like this:
https://twitter.com/seandavis12/
results in an empty iframe. I suspect this has to do with the page from twitter being rendered in parts using javascript, but I am not sure how to force the page to display in an iframe. Any suggestions?
Environments I have tested: chrome & safari on mac OS
Minimal example:
<html>
<body>
<iframe src="https://seandavi.github.io"></iframe>
<iframe src="https://twitter.com/seandavis12/"></iframe>
</body>
</html>
You won't be able to embed Twitter in an iframe - they have HTTP headers set which your browser sees and prevents the iframe content from being rendered.
If you open your browser console you will be able to see it being blocked:
Twitter will allow you to embed a specific tweet on a page, however, but you must follow their guide on how to do this: https://dev.twitter.com/web/embedded-tweets
Short answer is you can't use iframe/frame/embed/object or any other regular embedding html tag.
Most large company websites that aren't simply static, video streaming (ex. youtube), or informational, will likely have the "X-Frame-Options" set to 'sameorigin'. This is known as a Frame-Killer, disabling iframes/frames/etc from embedding content because they are highly vulnerable to being Click-Jacked.
Check out the security section here in Dev Moz
Oftentimes, high profile companies with desirable endpoints and webpages will provide alternate embedding options or even API's that allow you to safely request access for displaying their resources.
Good morning,
I have create a script with the extension CJS( custom javascript for website) for chrome that click and inject script on several page of a same domain automaticly, the script detect when the page change and alert me(with a simple alert()) about a new content in the page.
It works perfectly but I need to let open the web page, I put it as homepage but I don't wanna inadvertently close it. So I have create an extension with an iframe that contain the site witch I want insert the script but the extension CJS does not works on chrome extension.
The problem is that the site is in https so event if I disabled the Content Security Policy (CSP) I can't get the content of the iframe and inject script myself.
So my question is how to have a background page of an external site that let me execute script with chrome.
The extension is for personal use, I don't need an universal solution.
Thanks
edit:
the iframe appear in the default_popup:
I am creating a bookmarklet and this is the bookmarklet script which when clicked in bookmarks toolbar calls a javascript file which loads more content...On Google and Facebook, file BookmarkletAc.js does not get loaded and shows a message "Reload the page to get source for:...". On other websites this file is called and bookmarklet works fine, and i can not see what the problem is. File is blocked from loading, and i've read that there is no need to whitelist domain to Facebook or google, or am i wrong? What could be the problem.
<a onclick="alert('Drag button to toolbar');return false;" href="javascript:(function(){var head=document.getElementsByTagName('head')[0],script=document.createElement('script');script.type='text/javascript';script.src='//www.example.com/bookmarklet/BookmarkletAc.js?sId='+Math.floor(Math.random()*99999);head.appendChild(script);})();" class="bookmarklet-button">Add bookmarklet</a>
Facebook has a Content Security Policy which prevents any bookmarklet from working. A CSP can be set via the HTTP header for any page.
Based on my personal testing, Google's regular search pages do not block bookmarklets, but maybe you are testing on some other Google site or page.
I just answered a related question here: Content Security Policy for extensions and bookmarklets
I have a website, that has google ads, to display its ads. I want to keep track of the url's that are being displayed every time a visitor visits the page.
I have tried using twill, BeautifulSoup, nodejs jsdom, but the page returned excludes the google ads links and returns just the page.
how can I do this, for example, if I inspect the element with google chrome or firefox, I can view the links, but from the command line, I am not aware if this is possible?
You can't, for cross-domain security reasons. Sorry.
I've deployed a web widget which basically has an iframe & an external Javascript.
I added GA to the iframe before deploying it hoping to analyse where my widget is used. However now I get stats of my widget from GA like the number of times the iframe is loaded & other traffic related things but not what I needed.
What I needed was the urls of the websites where my widget is embeded.
How can I do this?
If GA not helps for this, Is there any other way to track my widget?
When you load an iframe, the initial 'referrer' value of the iframe will always be the value the page the iframe is contained on. (The exception is if the parent page is on HTTPS, and your iframe is in HTTP, then the referral value is blank, or if the site intentionally spoofs the referrer by POSTing into the iframe, like Facebook does for iframes on Fan pages).
So, if the parent URL is the referrer, that means to Google Analytics, the parent page is the Traffic Source. So, dig deep into your Traffic Sources report. The containing domain will be under Source (example.com), and the path of the URL will be under Content in the secondary dimension (/path-to-page-with-your-iframe-on-it.html)