Ajax: HTTP Basic Auth and authentication cookie

I want to store the HTTP basic authentication headerline in an authentication cookie, so that I don’t have to deal with the authorisation header in subsequent requests (I’m using jQuery):

authenticate: function(auth) {
    var header = "Basic " + $.base64.encode(auth.username + ":" + auth.password);
    document.cookie = "Authorization: " + header;
    $.ajax({
        type: "GET",
        url: "http://someurl",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: auth.success,
        error: auth.error
    });
},

Whilst this seems to work for the first user who logs in, it doesn’t work for any other users within the browser session, because the subsequent authorisation headers are added and not overwritten. I know that one could overwrite a cookie by using the name=value syntax, but this syntax does not apply to the authorization header.

Is there any way to get rid of the old authorization header once a new user logs in?

Any help would be appreciated. Thanks, JeHo

Answer

It seems, that it didn’t work for the first user either. The problem was, that the authorization header was probably set by the browser earlier on (when I used the authentication dialog of the browser).

What I’m doing now is storing the login information in a standard name=value cookie and setting the authorization header manually.

Set the cookie:

var header = "Basic " + $.base64.encode(auth.username + ":" + auth.password);
document.cookie = "Authorization=" + header;

Read the cookie:

function getAuthCookie() {
   var cn = "Authorization=";
   var idx = document.cookie.indexOf(cn)

   if (idx != -1) {
       var end = document.cookie.indexOf(";", idx + 1);
       if (end == -1) end = document.cookie.length;
       return unescape(document.cookie.substring(idx + cn.length, end));
   } else {
       return "";
  }
}

Set the authorization header:

    $.ajax({
        type: "GET",
        url: "http://someurl",
        contentType: "application/json; charset=utf-8",
        beforeSend: function(xhr) {
            xhr.setRequestHeader("Authorization", getAuthCookie());
        },
        dataType: "json",
        success: auth.success,
        error: auth.error
    });

This seems a bit awkward, but it works.

Warning: Make sure to encode any sensitive data that you store in the cookies or this would lead to security issue. Check CWE for more info.