Basic authentication for iframe url

Question

I need to authenticate a request sent from an iframe (which is created via javascript) on the page. Authentication will be performed using basic HTTP authentication. I tried to do

http://user: password@server 

but apparently this is not available in IE due to a security exception:

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

Is there another way to add authentication to the request so that the iframe automatically authenticates to the server? Thanks.

Here the code I'm using right now does not 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 problem. The only solution I could come up with is to use a reverse proxy. This works as follows:

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

Thus, there is a reverse proxy that works somewhere separate from the target server. Details of basic authentication are stored in the reverse proxy.

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

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

The reverse proxy then translates the request like this:

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

Where destination_host , PORT and basic authentication information (sent to the target server as request headers so that they are no longer visible in the URL) are taken from the reverse proxy configuration based on proxy_id , which 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 load CSS or JavaScript files or even any requests initiated from using javascript.

This setting requires appropriate DNS records for proxy_id.proxy_host.com to allow reverse proxy IP and destination_host.com to allow the destination server IP. Depending on the requirements, proxy_host can actually be the same as destination_host (for example, if the proxy server is running on the target server).

---

That was the main idea. In my project, proxy configurations can be added dynamically, so I had to make sure that all subdomains of the main *.some_host.com domain *.some_host.com allowed to the same reverse proxy IP. I use Acrylic DNS for this, because the Windows hosts does not support subdomains like * (catch-all) by default.

Depending on the requirements of your projects, you may find a suitable reverse proxy server that can be used for this purpose. My project was written in Erlang, and I could not find a proxy server that I could use, so I implemented my own. Check it out on github: yoonka / charreada . It has no documentation yet, but the code is pretty simple. It can be potentially used with any project written in any language, but at present the limitation is that the configuration is added using Erlang calls (since it comes from another Erlang application in my project). Reading the configuration from a static file, as well as better documentation can be added if there is only a demand for it :)