Basic authentication for a url in an iframe

Question

I need to authenticate a request being sent from an iframe (which is being created through javascript) on a page. The authentication will be done with basic http authentication. I've tried doing

http://user:password@server

but apparently this is unavailable in IE because of a security exception:

http://support.microsoft.com/kb/834489

Is there another way I can add the authentication into the request so the iframe will automatically authenticate with the server? Thanks.

Here's the code I'm currently using that doesn't work:

var url = 'http://userName:test@localhost:12000/Service.svc/GetStatus';

try {
    // Attach image to cache auth
    var frame = $('<iframe />');

    frame.load(function() {
        alert('here');
    });

    $('body').append(frame);

    frame.attr('src', url);
    //img.remove();
}
catch (e) {

}

Answer 1

I had to solve this exact issue. The only solution I could come up with is using a reverse proxy. This works like this:

Browser (request without basic authentication) -> Reverse Proxy (request with added basic authentication) -> Destination server (requires basic authentication)

So there is a reverse proxy running somewhere separately from the destination server. Details of the basic authentication is stored in the reverse proxy.

Say the URL in iframe looks like this (assuming the reverse proxy runs on port 8088):

<iframe src="http://proxy_id.proxy_host.com:8088/cgi-bin/some/path"></iframe>

The reverse proxy then translates the request to look like this:

http://destination_host.com:PORT/cgi-bin/some/path

Where destination_host, PORT and details of the basic authentication (sent to the destination server as request headers so they are no longer visible in the URL) are taken from the reverse proxy configuration based on the proxy_id that was in the original URL.

The reverse proxy will change the host header (from *.proxy_host.com to destination_host.com) but it will not change the path, so the proxy is transparent to any requests coming from the browser, including any sub-requests to download CSS or JavaScript files, or even to any requests initiated from JavaScript.

This set-up requires appropriate DNS entries so that proxy_id.proxy_host.com resolves to the IP of the reverse proxy and destination_host.com resolves to the IP of the destination server. Depending on requirements proxy_host can be actually the same as destination_host (e.g. if the proxy is running on the destination server).

---

That was the basic idea. In my project proxy configurations can be added dynamically so I had to ensure that all sub-domains of the main domain *.some_host.com resolve to the same reverse proxy IP. I am using Acrylic DNS for that as the default Windows hosts file doesn't support sub-domains as * (catch-all).

Depending on the requirements of your projects you may be able to find a suitable reverse proxy that could be used for that purpose. My project is written in Erlang and I couldn't find any proxy that I could use, so I implemented my own. Check it on github: yoonka/charreada. It doesn't have any documentation yet but the code is fairly simple. It could be potentially used with any project written in any language, but currently the limitation is that the configuration is being added using Erlang calls (as in my project it is being supplied from another Erlang application). Reading the configuration from a static file, as well as a better documentation, can be added if only there is any demand for that :)