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) { } ```

Accepted Answer

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`): ``` ``` 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 :)

Basic authentication for a url in an iframe

Solution

Problem