How to set the <img> tag with basic authentication

Question

I would like to display the image from a network camera on my web page, but the image is behind a HTTP basic authentication server.

In Firefox and Chrome I can do this:

<img width="320" height="200" src="http://username:password@server/Path" />

But in Internet Explorer 8, I get an empty image box. If I use JQuery to set the src attribute, IE8 displays a blank src. It looks like IE8 is checking the string and rejecting it.

Is there a way to put the basic authentication credentials in the img tag?

Answer 1

Bottom line: Not all browsers allow this. It may work in some but not others.

But as someone else has said already, it's not very safe -- you're effectively giving the login and password details to anyone who browses the page. Not good.

A better option would be proxy it through the same server that you're providing the html code from, then the href in the <img> tag could just be a local URL, and no-one need know where the image is actually coming from.

Answer 2

You can load your img with AJAX, using XMLHttpRequest. As you might know, XMLHttpRequest has a setRequestHeaders method, so you will be able to manipulate headers for your request, hence, you will be able to do basic HTTP authentication.