How to suppress the browser's "authentication required" dialog when doing an ajax call that requires authentication?

Question

My users enter a username and password for a third party service. I do an ajax call to that service to authenticate them. The issue is that if they enter the wrong username and password the browser (at least firefox) will display an "authentication required" dialog. If they then enter the correct username and password in that dialog, my ajax call will return a "success", and it will appear that the original user/pass they entered was correct, when it is not (since they changed it).

Is there any way to either suppress this dialog (so I can then have my service tell them to correct their user/pass) or somehow grab the correct username and password that the user entered in the browsers dialog? This is a firefox extension.. so I'm sure there is some way to grab the correct pass/login from the request.. but It would be nice if there was a simpler method via javascript.

jQuery.ajax({
  type: "GET",
  dataType: "xml",
  url: endpoint,
  username: username,
  password: password,
  success: function(data,status) {
    // Do something
  },
  error: function(XMLHttpRequest, textStatus, errorThrown){
    alert(errorThrown);
  }
});

Answer 1

http://dothow.blogspot.com/2009/05/http-basic-authentication-with-jquery.html

Answer 2

Instead of the url string being "http://blah.com", make it "http://user:[email protected]"

// Note that you might need to trim http:// out of endpoint first
url: 'http://' + username + ':' + password + '@' + endpoint,

Answer 3

You can't do it in IE or firefox, and you never will be able to from javascript for security reasons. There is no browser setting that lets the user avoid getting prompted for http authentication. This gets real annoying when you have 50 images all requiring http authentication.

Answer 4

I've solved this problem by putting a proxy in between the browser and the service that requires authentication, in my case, a java servlet. The browser sends the AJAX request to the servlet, which forwards the request to the service, then sends back the services' response, omitting the "WWW-Authenticate" header. Your browser app. handles the HTTP 200 or 401 response code accordingly.

Similarly, the proxy could always return a 200 with a json response indicating the results of the forwarded request. This way you can discern the difference between a failure of your proxy and the response of the service.

One tricky thing you may have to deal with - if the far-end service responds with a set-cookie header, say because it's created a session for your client, then you have (at least) 2 possible paths to take.

1. your proxy will remember the cookie, your browser app. always goes through the proxy for this service, and the proxy adds this cookie to the subsequent forwarded requests. or
2. you ignore the service's cookie, and have the browser re-authenticate directly with the service once you've verified the username and password via the proxy. Though this may have the side-effect of creating an orphaned session with the service

Answer 5

Without jquery (does not work in IE, but that is OK for a firefox extensions):

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com", true, "username", "password");
xhr.onreadystatechange = function(){
  if(this.readyState == 4){
    if(this.status == 200){
      alert("we got a response");
    }
  }
}
xhr.send();

Answer 6

How about not using HTTP Authentication? Use a standard login with cookies, or simply POST the username/password the user supplies to the script and check the details against a database of users.