Why does Chrome sometimes request basic auth a second time, but Firefox doesn't?

Question

I run the external interface of React and the Laravel backend on the Nginx server (field for the Vagrant manor) behind basic auth, for the Nginx configuration it looks like this:

server { ... location / { try_files $uri $uri/ /index.php?$query_string; auth_basic "Restricted"; auth_basic_user_file /home/vagrant/Code/project/.htpasswd; } } 

This basically works, and Chrome (v52, Mac OS X) "sometimes" asks auth again on subsequent requests, for example, to load an image that is defined as css-background on hover. This behavior (at least for my research so far) is incompatible, and I cannot reproduce it regularly, this happens from time to time, I can not find a reason for the subsequent auth request.

In Firefox (v47.0, Max OS X), I get one auth prompt, and then it works as expected.

Do you have any idea to debug specific behavior in Chrome or make sure that the first auth prompt is the only one?

Note. The interface sends additional XHR requests to the backend, which also have an "authorization" header, to perform basic auth without displaying a hint.

Answer 1

I suspect the problem is how you locally save the authorization token and the time it is valid. Browsers will handle local storage somewhat differently from each other, so if you use local storage or session storage, there may simply be a difference in how the data is stored.

I believe this SO post will probably help answer the question: How persistent is localStorage?

Basically, Chrome allows data to set a timeout period, while in Firefox "it is not possible to specify an expiration period for any of your data."

If you use Chrome frequently and clear your cache for other reasons, chances are you will also clear your authorization token. If you use only Firefox for testing, you probably have a cached authentication token that does not expire.