HTML injection into someone else's website?

Question

I've got a product that embeds into websites similarly to Paypal (customers add my button to their website, users click on this button and once the service is complete I redirect them back to the original website).

I'd like to demo my technology to customers without actually modifying their live website. To that end, is it possible to configure http://stackoverflow.myserver.com/ so it mirrors http://www.stackoverflow.com/ while seamlessly injecting my button?

Meaning, I want to demo the experience of using my button on the live website without actually re-hosting the customer's database on my server.

I know there are security concerns here, so feel free to mention them so long as we meet the requirements. I do not need to demo this for website that uses HTTPS.

More specifically, I would like to demonstrate the idea of financial bounties on Stackoverflow questions by injecting a Paypal button into the page. How would I demo this off http://stackoverflow.myserver.com/ without modifying https://stackoverflow.com/?

REQUEST TO REOPEN: I have reworded the question to be more specific per your request. If you still believe it is too broad, please help me understand your reasoning by posting a comment below.

UPDATE: I posted a follow-up challenge at How to rewrite URLs referenced by Javascript code?

UPDATE2: I discarded the idea of bookmarklets and Greasemonkey because they require customer-side installation/modification. We need to make the process as seamless as possible, otherwise many of get turned off by the process and won't let us pitch.

Skyeskyhigh

You can use server side code to grab the remote page contents as raw HTML then inject your own HTML in there and display the final result. – Reece

@ShadowWizard, please post this as an answer so we can discuss it in more detail. – Skyeskyhigh

Need to first come with some sample code to make it substantial, maybe in the meantime you'll get better suggestions. :) – Reece

@ShadowWizard what about CSS and JS files? – Longboat

@Longboat that's indeed one wall to climb, their URL's need to be parsed and changed to be absolute. Same go for pictures. – Reece

I would look at creating a bookmarklet maybe. – Kalikow

@Skyeskyhigh well, Patrick pretty much put my idea into code. That's what I meant. :) – Reece

What about using Greasemonkey? A Firefox plugin, which can add contents to another web-page on the fly (using Scripts). So just go to real site, have greasemonkey on your browser and write a custom script for it. – Deactivate

@AmirPashazadeh, I considered that, but business requirements dictate that customers should not need to install anything. They're doing us a favor by listening to our pitch, so we need to make it as painless/non-intrusive as possible. – Skyeskyhigh

Answer 1

After playing with this for a very long time I ended up doing the following:

1. Rewrite the HTML and JS files on the fly. All other resources are hosted by the original website.
2. For HTML files, inject a <base> tag, pointing to the website being redirected. This will cause the browser to automatically redirect relative links (in the HTML file, CSS files, and even Flash!) to the original website.
3. For the JS files, apply a regular expression to patch specific sections of code that point to the wrote URL. I load up the redirected page in a browser, look for broken links, and figure out which section of JS needs to be patched to correct the problem.

This sounds a lot harder than it actually is. On average, patching each page takes less than 5 minutes of work.

The big discovery was the <base> tag! It corrected the vast majority of links on my behalf.

Skyeskyhigh

Answer 2

I would suggest to create a proxy using a HTTP handler.

In the ProcessRequest you can do a HttpWebRequest to get the content on the other side, alter it and return the adjusted html to the browser. You can rewrite the urls inside to allow the loading of images, etc from the original source.

public void ProcessRequest(HttpContext context)
{
  // get the content using HttpWebRequest
  string html = ...

  // alter it

  // write back the adjusted html
  context.Response.Write(html);
}

Commodus

Thank you for the post. Would the customer website need to allow Cross-Origin requests for this kind of thing to work? Are there any other security concerns I need to be aware of? – Skyeskyhigh

@Gili: not that I know, since you just pretend to be the website and serve the browser with almost the same html. I don't see any problems. (I have done this myself once for proxying http traffic and include windows credentials to it, and it works fine) – Commodus

Interesting. So just to be 100% clear: I'd serve the HTML files, but any database requests would go to the customer's website? – Skyeskyhigh

@Gili: Definitely yes! In fact you are just acting like a software-based router. – Commodus

Excellent answer. Thank you! I'll wait a couple more days before marking an answer as accepted, but yours looks like a top candidate. Thanks again. – Skyeskyhigh

Thanks for the help reopening this issue :) – Skyeskyhigh

@Gili: Did I do that? ;) – Commodus

@Gili: I am at Cebit now (Germany). Will take a look when back. – Commodus

Answer 3

If you're demoing on the client-side and looking to just hack it in quickly, you could pull it off with some jQuery. I slapped the button after the SO logo just for a demo. You could type this into your console:

$('head').append('<script src="https://www.paypalobjects.com/js/external/dg.js" type="text/javascript"></script>')
$('#hlogo').append('<form action="https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/pay" target="PPDGFrame" class="standard"><label for="buy">Buy Now:</label><input type="image" id="submitBtn" value="Pay with PayPal" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif"><input id="type" type="hidden" name="expType" value="light"><input id="paykey" type="hidden" name="paykey" value="insert_pay_key">')
var embeddedPPFlow = new PAYPAL.apps.DGFlow({trigger: 'submitBtn'});

Now, I'm not sure if I did something wrong or not because I got this error on the last part:

Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped.

But at any rate if you are demoing you could just do this, maybe as a plan B. (You could also write a userscript for this so you don't have to open the console, I guess?)

Reboant

You'd still implement this using server-side rewriting, right? – Skyeskyhigh

No, this would be client-side. When you said demo, I assumed you meant that you'd be demoing in person. – Reboant

No. I plan to email the customer a link so they can play with it on their own time. Still, your answer might interest someone else who wants to demo this in person so I would keep it up. – Skyeskyhigh