What is the best way to use HTTP authentication in an Ajax application and not 100% AJAX

Question

I have a standard HTML login page that I would rather use than the standard HTTP authentication popup provided by browsers. Today I use session cookies to track the session after logging in, but I would like to be stateless and pass HTTP authentication every time. The web services I click already support this, so this is a browser-only problem.

Adding authentication credentials is trivial in jQuery, but I don't know how to save them. If you go from the login page (jsp) to the home page (another jsp), you will not explicitly save the username and password fields on the login page. I know that some browsers will store your credentials for HTTP authentication if you enter them from a popup, but I don’t know if they will be saved when using XHRRequest. If so, is there a lot of consistency between browsers?

In addition, the user must also "exit" the application. If the browser stores credentials for authentication, is there a way to clear them using JavaScript.

It seems to me that I cannot be the first to try to solve this problem. Is there any jQuery plugin or something that already handles this? Or is it just impossible to do what I'm trying to do?

Answer 1

Update

The answer below was posted in 2012, and the links are mostly dead. However, since then, a more elegant standards-based approach to the same solution has emerged using JSON Web Tokens . Here is a good blog post explaining how to use them.

---

Most answers will skip the point, avoiding a server-side session. I do not want any state of the application on the server. I am rewarded with generosity to answer what was closest, but the real credit belongs to the relaxation discussion group and Jon Moore for the correct answer and Mike Amundsen for helping me actually understand it.

The best answer I got is to use a cookie, but not the typical session cookie cookie provided to you by most application servers. A cookie (which will be automatically sent with each subsequent request) is the user ID and time signed by the server. You can specify the expiration time using a cookie so that it simulates a typical 30-minute session on the server (which means you need to push it forward with subsequent requests), and also retains the same cookie that it is valid forever.

The XHR / AJAX part is a red herring. This will work whether you are executing XHR requests or an old-fashioned turn-based web application. Basic moments:

• Cookies are automatically sent on subsequent requests, so no special scripting is required - this is exactly how browsers work.
• The server does not need to save the session for the user, so the user can hit any server in the cluster and not re-authenticate.

Answer 2

You have 2 options:

1) Client-side credential storage is not a good idea. For obvious reasons, you do not want to store the username / password on the client. If you have a hashed version of the password, this may not be so bad, but still not recommended. In any case, if you intend to store it on the client side, you need to either use a cookie or local HTML5 storage (which has not yet become widespread)

2) Server-side credential storage - usually done through sessions. Then, the obtained session identifier can be transferred to the client and stored either in a cookie or in the URL of each subsequent AJAX call (for example ?SESSID=xyz )

The server-side approach will be the most secure, reliable and easiest to implement.

Answer 3

Okay, I’ll hit, helping ...

First, understand how HTTP authentication works. There are two versions - Basic and Digest. Basic sends in clear text, the digest is encrypted. With these types of authentication, the username / password is sent in the HTTP header with each individual request. The browser captures them at logon and is stored in a browser inaccessible browser session, which is deleted when the browser session is closed. Therefore, answering one of your questions, you cannot access them from javascript.

You can create your own session cookie variables for username and password. The jQuery functions for this are really simple. See jquery cookie for an example of how to set session cookies. They can be extracted from the session cookie and sent with every ajax request and verified on the server. However, this is not a particularly good way to do authentication, as sniffing the network will allow anyone to easily capture your data. But it will work.

Using session-based cookie authentication, where the session identifier sent with each request is sent, is the best way to do this. On the server side, you need to call a function for each HTTP request. This function should perform the following actions:

  check to see if the session has been authenticated if no: redirect to login screen if yes: do authorization and allow the user access to the page 

Most web frameworks support session cookie verification and server session identifier management. This is definitely the way to go.

Answer 4

It is interesting.

Manage user sessions on the server using cookies. Create a session when the user first accesses the login page and passes the session identifier / key as a value to one of the cookies via the response. When the user authenticates, put the user "key" in the cookie and the "values" in the context of the application on the server. After user registration, any subsequent request will be authenticated based on the session cookie value on the server. Authorization will be based on the user "key" passed as a cookie value.

When logging out, clear session-based cookies from the server and refresh the default site page.

Cookies are fancy with different browsers - just a note;)

Hope this helps.

Answer 5

A little interesting is that you think you need to move part of the authentication to the client. If you want to use the usual solution, the KOGI server-side offer is the way to go.

But you also seem to be asking questions about memory leaks related to secrets provided by your user. Good questions. But in order to take a general blow by replying, I would say that it must be browser specific. The internal elements of the browser, the internal mechanisms are javascript-dependent, where the client application (that is, the browser or js in the browser) stores the values ​​entered by the user.

Most likely, these values ​​will not be duplicated without the need for all memory, but there is no way to guarantee this. Apart from responsible javascript encoding methods, you can do nothing to guarantee the restriction of the location of user inputs.

Minor retreat

The main point is that if you store it on the client, it is not really secure - if only the service stores encrypted information on the client with a key that only the server has (or the user through their correct credentials). That way you could apparently encode the JS application to do some kind of confirmation on the client - just like the way a bank card (used?) Does POS authentication by checking the PIN for the PIN on the map, not back to the database. This is based on the (somewhat far-fetched) assumption that the user does not have direct access to read / write the cookie / local storage of the dark area on the client / magnetic strip on the bank card. Therefore, I would advise this only as a disqualifier of false authentications, and not as the only qualifier for credentials.

Main point

If you want to be stateless, just save the user credentials in localstorage or as a cookie, but encrypt them using the server key. When you need it, send XHR with the encrypted / used stored credentials to the server via HTTPS, let your server decrypt them and send them to the callback. Then pass this text to HTTPS to authenticate.