Intercept and use local files in http requests

Question

I'm trying to find a tool that will allow non-programmers to test files on a live server.

For example, they could modify an image on their computer, reload a webpage, then see the results of their work immediately.

I've tried finding a tool for this, because it seems obvious enough that someone must've thought of it, but a lot of software I see doesn't quite fit. A tool called Fiddler does this (they call it autoresponding) but it's Windows-only. I could change the hosts file to redirect to a local instance of nginx or something, but that seems difficult to maintain when all I really want is a simple tool that will something like this...

http://someserver.com/css/(.*) -> /home/user/localcss/$1

Does anybody have any recommendations?

Edit: Redirect clarification

Answer 1

Fiddler has this feature; just click the AutoResponder tab and map URLs to local files. Thousands of people do this every day.

See also video #5 here: http://www.fiddlerbook.com/fiddler/help/video/default.asp

Answer 2

I found Charles Proxy very useful for this http://www.charlesproxy.com/documentation/tools/map-local/

Answer 3

Max's PAC solution was a life-saver so I'm providing more details (can't yet up vote)

To use a local version of, say, css files, create a file 'proxy.pac', which contains this function:

function FindProxyForURL(url, host)
{
    // use regex to match requests ending with '.css'
    // and redirect them to localhost
    var regexpr = /.**\.css/;
    if(regexpr.test(url))
    {
        return "PROXY localhost";
    }

    // Or else connect directly:
    return "DIRECT";
}

Save 'proxy.pac' and point your browser to this file. In Firefox this is in Options > Advanced > Connection > Settings > Automatic Proxy Configuration URL

For best practice, also add a MIME type to your web server: map '.pac' to type 'application/x-ns-proxy-autoconfig'.

All requests to .css files will now be routed to localhost. Don't forget to ensure the file structure is the same on the proxy server.

In the case of CSS, it may well be easier to override CSS by using a local chrome. For example in Firefox, chrome/userContent.css. See http://kb.mozillazine.org/UserContent.css

Answer 4

It's been a while since I asked this question and I have an good technique that wasn't suggested.

PAC files are supported by all major browsers, and allow you to write a script that can redirect any individual request to a proxy server. So for example the proxy server could serve a PAC file, have the PAC file redirect whitelisted URLs to the proxy server, and return the local versions of these files. It can even support HTTPS.

Beware of one gotcha - Internet Explorer. It helpfully "caches" the results of this script incorrectly, so that if one URL on a domain is proxied, all URLs at that domain will be proxied. This feature can be disabled, however.

Answer 5

You can do this with the modify response rule in Requestly.

Using the local file option you can specify any file to be used as the response for the intercepted request.
According to their documentation it also supports hot reloading, i.e., as long as the file path remains the same, the rule will pick up the changes that you made.

As for the dynamic URL matching, they have support for regex and wildcards in their source filters

Note: This is currently only available in their desktop app.
If you want to implement this using their chrome extension ,which is what I personally did, you can use the Redirect rule paired with a mock server. Here is a page explaining this
You can setup a mock server / mock files endpoint within Requestly instead of using something nginx or a local server to do so. But this works only for text based content, not images

This would also bypass any setup on the tester's local machine. They would only need to install the extension. All you would have to do is send them the endpoint for your mock server and the redirect rule that you created.

Answer 6

Actually you can't do this because browsers don't allow files over http:// to access file on the local machine (just think a moment about it... What would happen if, for example, a malicious webpage loads some private files from your computer?).
Some browsers (e.g. Safari) allows files over file:// to access other file:// files, others don't, but no browser allows http:// to access file://.

Firefox has a feature called "Signed scripts", which are scripts digitally signed with a trusted certificate. They can ask the user to grant them access to the local hard drive. Look at this: http://www.mozilla.org/projects/security/components/signed-scripts.html

Do you mean the Fiddler Web Proxy (www.fiddler2.com)? There is a commercial Java-based alternative named Charles Web Proxy that may fit your needs.