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?

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?

• javascript
• jquery
• apache
• basic-authentication

• Does it work if you authenticate with AJAX's headers setting instead of beforeSend? For example: headers: { "Authorization": "Basic " + encoded } – Sabrina Commented Aug 20, 2015 at 17:10
• It's been a while, I believe I tested it with the same results. – hcabral Commented Sep 11, 2015 at 18:41
• 2 It seems this is how Authorization Header works in case of AJAX. Cookies are automatically sent with requests, and you can read that on server to check authorization (need to keep XSS, CSRF in mind). Any specific reason you want to use Basic Authentication? – Sandeep Kumar Commented Jun 2, 2016 at 9:17

1 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 remended 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);
       }
   });