JavaScript redirect URL with Authorization header

Question

I managed to successfully invoke a URL behind a directory in Apache that is protected with Basic Authentication (htpasswd, etc.). The Ajax GET request works normally and returns the protected content:

var encoded = Base64.encode(username + ':' + password);
$.ajax({
    url: "/app/test",
    type: "GET",
    beforeSend: function(xhr) {
        xhr.setRequestHeader('Authorization', 'Basic ' + encoded);
    },
    success: function() {
        window.location.href = '/app/test.html';
    }
});

My original assumption was that once the web session had successfully authorized a request, it would make possible the redirection in the 'success' block without asking user credentials. When this code block is invoked, the user had entered username and password, in a non-protected environment. However, when the redirect is invoked, the browser will popup the the login/password window.

Any suggestions on how I could pre-authorize a session with the Basic Authorization which would have been provided by the users?

Answer 1

Logging with AJAX request usually works because a successful AJAX request sets session cookies that will be sent in all subsequent requests transparently.

Maybe your cookies are set but for some reason are not set transparently: you can check with xhr.getAllResponseHeaders() / xhr.getResponseHeader() and after that set them with document.cookie.

If no session cookies, then this behaviour usually fails.

You can try to redirect with the username+password in the url (not recommended because username+password probably will be visible in the browser address url bar afterwards):

    window.location.href =
        window.location.protocol + "//" +
        username + ":" + password + "@" +
        window.location.hostname +
        (window.location.port ? ":" + window.location.port : "") +
        '/app/test.html';

Also you should test to delay the redirection... because maybe it's working but you need to give some extra time to the browser, did you try:

   var encoded = Base64.encode(username + ':' + password);
   $.ajax({
       url: "/app/test",
       type: "GET",
       beforeSend: function(xhr) {
           xhr.setRequestHeader('Authorization', 'Basic ' + encoded);
       },
       success: function() {
           setTimeout(function() {
               window.location.href = '/app/test.html';
           }, 333);
       }
   });