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?

Does it work if you authenticate with AJAX's `headers` setting instead of `beforeSend`? For example: `headers: { "Authorization": "Basic " + encoded }` — Sabrina, Aug 20 '15 at 17:10
It's been a while, I believe I tested it with the same results. — hcabral, Sep 11 '15 at 18:41
It seems this is how [Authorization Header works](http://stackoverflow.com/questions/20617720/why-doesnt-the-browser-reuse-the-authorization-headers-after-an-authenticated-x) 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, Jun 02 '16 at 09:17

score 1 · Answer 1 · answered Nov 09 '17 at 13:11

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

JavaScript redirect URL with Authorization header

1 Answers1

Linked