How to set the 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?

Wouldn't it be unsafe to do that? The tag is visible to everyone. — Ruel, Sep 29 '10 at 15:55
Before the user can get to this HTML file, he would have to get through a log in page. — Robert Deml, Sep 29 '10 at 15:58
I get it, I thought it will work like, the user will visit the page, to login. lol. — Ruel, Sep 29 '10 at 16:03
Did you end up using the proxy method? I'm having the same problem and I can't find a solution anywhere — Rondel, Oct 04 '11 at 15:09
I just ran into this issue. I solved it using [user3053216's answer](http://stackoverflow.com/questions/24042994/how-to-show-an-image-which-is-secured-by-http-authentication) which does what I think Spudley is suggesting below, but it provides a code example to explain how to do it. — Stack Underflow, Jul 12 '16 at 17:08

score 10 · Accepted Answer · answered Sep 29 '10 at 16:02

10

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.

answered Sep 29 '10 at 16:02

Spudley

166,037
39
233
307

1

"Not all browsers allow this. It may work in some but not others." Can you cite your source? – Robert Deml Sep 29 '10 at 16:18
2

@Robert - no source; just experience; I had a similar frustration to you some time ago, trying something very similar. :) But that said, I may be out of date as I haven't actually tried doing this sort of thing for quite a while, due to my other point; ie it's not very safe. – Spudley Sep 29 '10 at 16:28
1

also, to clarify: there's a difference in how browsers will treat it if you enter `name:password@server/path` in the address bar, vs if it's in a link. Because passwords are involved, the browser's security policy comes into play. – Spudley Sep 29 '10 at 16:32

score 5 · Answer 2 · answered Sep 29 '10 at 15:55

5

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.

answered Sep 29 '10 at 15:55

Pablo Santa Cruz

176,835
32
241
292

3

You can pass auth info in parameters to `open()`. Unfortunately extracting the binary content of a response, and injecting it into an image node on the page, isn't so easy. – bobince Sep 29 '10 at 16:03
2

Can you provide an example ? – Krishna sagar Jan 21 '17 at 19:06

score 2 · Answer 3 · answered May 12 '11 at 14:39

2

Best way is to create a login page, then setup port forwarding on your router to display the camera. Does the camera come with web software?

answered May 12 '11 at 14:39

Zach

329
1
3
8

score 1 · Answer 4 · answered May 15 '14 at 15:20

See http://support.microsoft.com/kb/834489 and http://msdn.microsoft.com/en-us/library/ie/ee330735(v=vs.85).aspx#login_creds_urls

Long story short, usernames/passwords are not formally supported under the HTTP/HTTPS protocol schemes and due to their use in phishing attacks, they were disabled in IE6 on XPSP2. Support can be manually re-enabled by the user using a registry override (FEATURE_HTTP_USERNAME_PASSWORD_DISABLE) but this is not recommended.

score 0 · Answer 5 · answered Feb 09 '22 at 06:46

Try http proxy.

On server side, enable tinyProxy, create ReversePath to basic authentication server in configuration like:

AddHeader "Authorization" "Basic dXNlcjpwYXNz"
ReversePath "/foo/" "http://somewhere:3480/foo/"

dXNlcjpwYXNz is base64 encoded string from user:pass

Enable reverse proxy in Apache or NGINX to tinyProxy path http://localhot:8888/foo/

Img Source accessable from local server instead of old way deprecated, without http auth pop-up or CORS error.

http://user:pass@somewhere:3480/foo/DEST.jpg

score 0 · Answer 6 · answered Feb 10 '22 at 01:15

ajax add http header works!

pictureUrl = "https://somewhere/file.jpg";
var oReq = new XMLHttpRequest();
oReq.open("GET", pictureUrl, true);
oReq.setRequestHeader("Authorization", "Basic " + btoa("UserName"+":"+"Password"));
// use multiple setRequestHeader calls to set multiple values
oReq.responseType = "arraybuffer";
oReq.onload = function (oEvent) {
  var arrayBuffer = oReq.response; // Note: not oReq.responseText
  if (arrayBuffer) {
    var u8 = new Uint8Array(arrayBuffer);
    var b64encoded = btoa(String.fromCharCode.apply(null, u8));
    var mimetype="image/jpeg"; // or whatever your image mime type is
    document.getElementById("iOdata").src="data:"+mimetype+";base64,"+b64encoded;
  }
};
oReq.send(null);

How to set the tag with basic authentication

6 Answers6

Linked

Related