Take the 2-minute tour ×
Server Fault is a question and answer site for system and network administrators. It's 100% free, no registration required.

I'm trying to create a reverse proxy to work like http://www.meowbify.com/, It's a cool platform that replaces images with cats animations. I tried Apache and nginx "reverse proxy" just to reverse proxy one existing site, which worked ok with sites like www.bcc.co.uk but didn't work with edition.cnn.com/. (I was using the regular ReverseProxyPass in apache and proxy_pass in nginx). In apache I also used the proxy_html_module, in order to rewrite the links.

So how does http://www.meowbify.com/ works? I've searched the mobifiy site which states:

How it works: Mobify.js uses a technique called client side adaptation to remix HTML in the browser. The remixed content is interpreted by the browser as if the server had sent it in the first place!

The Mobify.js tag bootstraps the adaptation and loads the Mobify.js file, which performs it. The tag activates in iOS, Android and BlackBerry browsers. By default, the Mobify.js file is loaded from the development server.

The development server is part of the Mobify Client, a command line tool for building Mobify.js projects. It compiles the Mobify.js file dynamically per request. The file contains two parts, the Mobify.js API and site specific adaptations.

Adaptations are expressed as a series of operations on the source DOM, the DOM constructed from the page’s original HTML. HTML Elements can be selected, then rendered with a template. Finally, the rendered template is written to the browser.

To make the long story short, it uses some css magic in order to display the site adapted to each browser.

I guess that the trick of mewbifity is manipulation the site directories (i.e cat.'site'.meowbify.com/).

So how can I do something similar?

Thanks in advance, Guyl

share|improve this question

2 Answers 2

up vote 1 down vote accepted
  1. Set up a website with an handler that accepts a URL as part of a query string
  2. On each request to that website, make your own web connection to the passed URL
  3. Scrape the resulting HTML for <img> tags
  4. Replace the value of the src attribute in each <img> tag, with your own images' URLs
  5. Serve the replaced HTML in response to the original request
  6. ????
  7. Profit.

As for exactly how to do any/all of the above, those would be programming questions for the community that supports your preferred language.

Remember that this is not going to change the entire web for your intended clients (victims?) only those who specify the URL they want to proxy.

share|improve this answer
    
I actually used apache reverse proxy + a small server (using cherrypy) the website configures the server and than redirects it... –  Guy L Jan 26 '13 at 14:05

Meowbify is in fact open source, so you can take a look at the code on github and inspire yourself as need be: https://github.com/mobify/meowbify

It uses a pretty simple means of encoding the desired URL: cat/cats to designate http or https protocol, then the original hostname, then .meowbify.com, and then the path and query string as they are in the original URL.

After requesting the desired document, it uses a SAX-style streaming XML parser to find and rewrite the tags it's interested in (in this case, mostly the src attrbutes of <img> elements), and then serves the resulting HTML.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.