Overlay one iframe on top of another, scroll them

Question

Following up on How to rewrite URLs referenced by Javascript code? I'd like to overlay a button on top of someone else's website (e.g. overlay a Paypal button alongside Stackoverflow's bounty button) and have the two <iframe>s scroll together. The button would reside in the top layer. The website would reside in the bottom layer.

I understand that transparent <iframe>s were/are abused for clickjacking but the browser security mechanism seems to block legitimate use-cases. In my case the user is seeing the same button he/she is clicking. It's even possible that this is a browser bug.

Here is what I see under Chrome:

1. The top <iframe> intercepts all mouse clicks, even for areas that do not contain any components. Meaning, users cannot interact with the bottom layer at all.
2. If I style the top <iframe> with pointer-events: none the opposite problem occurs: users are able to see the top layer but all mouse clicks go to the bottom layer. Applying pointer-events: auto to child components does not help (clicks still pass through to the bottom layer).
3. If I size and position the top <iframe> so its area is equal precisely to the button I am trying to overlay, then mouse clicks go to the right layer but the top layer fails to scroll alongside the bottom layer. Meaning, the button always remains in the same absolute position as the bottom layer scrolls.

Is it possible for me to position a button in the top layer so that it always aligns with a certain position in the bottom layer? In the example where I position a Paypal button alongside the Stackoverflow bounty, I expect the Paypal button to scroll off the page as the user scrolls down the question.

https://stackoverflow.com/a/4087397/14731 leads me to believe this is not possible. Is there another way to implement this?

UPDATE: Here is a jsfiddle for you to play with. The test button is found to the right of "NEWS & VIEWS" in the middle of the page.

Answer 1

Update: New approach

Following discussion with Gili below, the requirement for the solution to work across multiple pages made me rethink my solution.

The new approach:

1. Doesn't require any code changes or specific features on the target site.
2. Works on every page while the user navigates (as long as they stay on the same domain)
3. Could be tweaked to inject any HTML/JS into any DOM element within any target page

My solution works as follows:

1. Send the person you want to demonstrate Widget X to an email with a link to your instructions page
2. That instructions page contains a bookmarklet which they add to their bookmarks bar
3. They visit their own site and click your bookmarklet
4. Your bookmarklet injects javascript into their page
5. That javascript creates a pop-up window with content that appears to belong to the target domain, since that domain generated the popup
6. That pop-up window then monitors the DOM on the target browser window (window.opener) and injects our arbitrary HTML whenever the current page doesn't contain our target node ID.

It seems to work well in my testing (perfect in Chrome, haven't tested across all browsers yet) and seems to work on every target site from StackOverflow to Twitter.

Live demo here: How to demo an web widget on a third party site without having access to their code

Sample code below, expanded for readability:

s = "<script type='text/javascript'>setInterval(function() { if(!window.opener.document.getElementById('gctrlPixelator')) {var i=document.createElement('IMG');i.src='//lorempixel.com/400/200/';i.id='gctrlPixelator';i.style.cssText='top:20;right:20;position:absolute;z-index: 9999;';window.opener.document.getElementsByTagName('body')[0].appendChild(i);}},500);</script>";
t = "<div style='text-align: center; font-family: Arial, Helvetica;'><h1 style='font-size: 18px;'>Demo running!</h1> Keep this window open and return to the main site window to continue the demo.</div>";
w = window.open('','name','height=200,width=400');
w.document.write(s);
w.document.write(t);

The above should be converted into a bookmarklet before deploying to an 'instructions' landing page for a potential client.

Original solution

First, sorry for posting this as an answer rather than as a comment. I've been thinking about this for half an hour, and only just realised I need 50 reputation to comment. So, apologies, but I wanted to share...

I agree that it's unlikely there is a cross browser way to do this double iframe trick. I read your other question about javascript URL rewriting and it lead me to an idea: Rather than trying to embed/hijack their site on another URL, how about creating a bookmarklet that allows you to inject your Javascript into their page?

It could work like this:

1. Direct them to your site where you host the custom bookmarklet link. Ask them to add it to their favorites.
2. Ask them to go to their own site, then click your bookmarklet in their bookmarks.
3. This would inject your JS into their page, allowing you to edit the DOM any way you wanted (e.g. changing styles, adding DOM elements, etc.)

Code something like this, converted to a bookmarklet (i.e. wrapped in a function with a javascript: at the start) could do the trick...

var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "http://www.example.com/file.js");
document.getElementsByTagName("head")[0].appendChild(script);

I've tested that in Chrome and it seems happy to load the JS cross-domain. The only rule seems to be that the protocols must match (http or https).

Not quite what you asked for, but a possible solution.