Avoid Basic Authentication popup

Question

I been playing with an ip cam (TP LINK NC200), trying to display a snapshot inside an html form.

Of course the IP-CAM asks for authentication with a big popup

so i been trying to solve it this way

    document.addEventListener('DOMContentLoaded', function(){
      getimg = document.getElementById('getimg');
      getimg.addEventListener('click', getsnap);
    });
    
    function getsnap(){
      user = 'admin'
      psw = 'YWRtaW4=' // base64 password
      url = "http://"+ user + ':' + psw + "@192.168.100.103:8080/snapshot.jpg";
      document.getElementById('cam_img').src = url;
    }

<input id="getimg" value="getimg" type="submit">
<iframe id="cam_img"></iframe>

so apparently embedded credentials are blocked (https://www.chromestatus.com/feature/5669008342777856)

I googled for different solutions, there's many ways to do it and most of them are deprecated by browsers updates, what would be the best way to solve this problem? Im open to any ideas, the simpler the better, but this could also be a nice learning curve.

Also, when i solve the Authorization POPUP manually, this are the headers

I tried using ajax with this code

var uName='admin';
var passwrd='admin';

$.ajax({
    type: 'GET',
    url: 'http://192.168.100.103:8080/snapshot.jpg',
     beforeSend: function (xhr){ 
        xhr.setRequestHeader('Authorization', "Basic " + btoa(uName+":"+passwrd)); 
    },
    success : function(data) {
      //Success block 
   },
   error: function (xhr,ajaxOptions,throwError){
    //Error block 
  },
});

But i keep getting this error

Any help or guidance would be appreciated! Thanks!

try Basic auth https://stackoverflow.com/questions/5507234/use-basic-authentication-with-jquery-and-ajax. — Alex78191, Oct 14 '19 at 02:28
I believe you can use Basic Auth in XMLHttpRequest or fetch(). You would need to specify your own `Authorization` header — Evert, Oct 14 '19 at 03:31
With any of those methods I keep getting "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource." Any ideas? — bot maria, Oct 14 '19 at 07:57

score 1 · Answer 1 · answered Oct 14 '19 at 08:08

It sounds like the camera doesn't allow cross origin requests. Assuming that you can't alter the cameras web server to allow this, your best bet would be to run some kind of proxy in front of it.

This would allow you to set whatever cors headers you need, and give you a lot more flexibility around authentication. Personally I'd probably use a small node service to accomplish this

See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS for details of cors.

I'd suggest doing the basic auth part server side and then create a random key to use as authentication to the node service

Avoid Basic Authentication popup

1 Answers1