Ajax: HTTP Basic Auth and authentication cookie

Question

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

Can you change any code on the server side? What language are you using (PHP, python, etc.)? — bpedro
– bpedro, Commented Mar 16, 2010 at 15:17
The server side is a selfhosted (WebServiceHost) wcf data service (written in c#). I'm owner of this host, so I could make changes to it - but I fear the possibilities are limited. — Jeldrik
– Jeldrik, Commented Mar 16, 2010 at 15:51

adriendenat · Accepted Answer · 2022-01-10 11:23:46Z

12

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.

edited Jan 10, 2022 at 11:23

adriendenat

3,4831 gold badge27 silver badges25 bronze badges

answered Mar 17, 2010 at 9:10

Jeldrik

1,3771 gold badge11 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

William Boman Over a year ago

Storing your users' password in plaintext anywhere (especially on the client side) is a biiiiiiiig no no. Do not do this (definitely not in production).

Jeldrik Over a year ago

Since I still get upvotes here: William is right - This solution is completely insecure because the cookie can be read by JavaScript (moreover the content is visible in the F12 Dev Tools - since the cookie is unencrypted).

user3130012 Over a year ago

you should probably edit your answer to account for this security issue. maybe a warning at the end of the answer. i'm pretty sure when it works nobody bothers to read this section.

Collectives™ on Stack Overflow

Ajax: HTTP Basic Auth and authentication cookie

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related