Routing to proxy and code injection into files served on local network

mobile-devicesPROXYroutingtesting

I'm trying to set up an Open Device Lab.

This question focuses on the network routing of and injection of code into the responses to requests made by the test devices.

I want people to be able to come in with their laptops, and test as painlessly as possible. I want developers to be able to:

  • inspect the mobile browsers,
  • not have to refresh every page on file change, and
  • not have to navigate each device separately.

To achieve this, I have chosen to use the following technologies (respectively):

All of these technologies require JavaScript snippets in the requested web pages in order to open and maintain socket connections with a server program. I want to use a proxy server to inject these snippets.

Below is an image of how I plan to set up the testing network:

http://i.stack.imgur.com/klGJF.png

I will quickly explain the roles of the different parts of the lab:

Local web server + test device

This machine is the machine that a developer would come in with, running a web server of their choice (Apache, Nginx, IIS, whatever, it shouldn't matter).
This doubles up as a test device.
The developer will have to install some software that notifies the LiveReload server when a file has changed (like guard-livereload). It will connect to the router via WiFi.

Test devices

These are the mobile devices that are the reason the lab is here. The web pages they render will be inspectable using weinre, refresh on file change using LiveReload, and navigate along when any other device navigates using Shim. They will connect via WiFi to the router.

Router

The router will use the proxy server for all requests served on port 80. It will also use the proxy server machine as a DNS server.

Proxy server

This server is more than just a proxy server. Its tasks are to be:

  • a DNS server (so that local test domains will work without having to configure each device separately, thinking of using Smbind for this),
  • a proxy server (in order to inject the JavaScript snippets),
  • a weinre server (to be able to inspect any connected WebKit client),
  • a LiveReload server (to signal to all connected browsers to refresh the whole page or some of its resources when appropriate),
  • a Shim server (to signal all connected browsers to navigate when appropriate), and
  • a network speed throttle (to simulate slow connections).

TL;DR

What I am struggling with is the following:

  • Which proxy software can inject code into requests?
  • How do I only inject the code into local port 80 requests that are HTML (as indicated by the MIME type) and contain </body> ('local' refers to the test network, not requests that go out to the wider Internet)? Also, the code needs to be injected right in front of </body>.
  • How do I transparently route all traffic through the proxy (so that I can inject code and throttle speed), i.e. will my current set up even work?

I would very much appreciate your thoughts.

Best Answer

The feature you're possibly looking for is ICAP (Internet Content Adaptation Protocol).

There's a Python framework that handles it (http://icap-server.sourceforge.net/), and Squid itself might have the feature now (at least in development).

There is more info (and a list of other ICAP servers) on the Squid Wiki at http://wiki.squid-cache.org/Features/ICAP#ICAP_Servers

Related Topic