How to send Authorization header with browser

Question

I have implemented a web server which uses Basic authentication(using spring security).

I disabled the default authentication entry point when accessing a URL (instead of responding 401 with www-authentication header, it just returns 401), the purpose is to prevent the browser from displaying the authentication popup.

I am able to connect to the server with javascript code and command line tools like curl, however when I tested it with browsers (chrome & firefox), they just don't send the header.

curl -v -u user:password localhost:8080/user

GET /user HTTP/1.1
Host: localhost:8080
Authorization: Basic dXNlcjpwYXNzd29yZA==
User-Agent: curl/7.58.0
Accept: /

Chrome: version 71.0.3578.98 (Official Build) (64-bit)
http://user:password@localhost:8080/user

GET /user HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
DNT: 1
Accept:
text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8
Accept-Encoding: gzip, deflate, br Accept-Language: en-AU,en;q=0.9,fr-FR;q=0.8,fr;q=0.7,en-GB;q=0.6,en-US;q=0.5

Why the browsers are not sending the authentication header.

Answer 1

Normally the Browser gets the Auth-token after login. The Backend adds a valid token as Authorization part to the header. To manipulate HTML-request with a browser you need a plugin like https://addons.mozilla.org/de/firefox/addon/restclient/ or an extra tool like postman, SoapUI, httpie or curl (included in many linux distros).

Answer 2

Actually You can. With the help of Client Side JavaScript you can send. Use AJAX request. Pass Authentication token in xhr request param.

<script type='text/javascript'>
// define vars
var url = 'https://...';

// ajax call
$.ajax({
    url: url,
    dataType : 'jsonp',
    beforeSend : function(xhr) {
      // set header if JWT is set
      if ($window.sessionStorage.token) {
          xhr.setRequestHeader("Authorization", "Bearer " +  $window.sessionStorage.token);
      }

    },
    error : function() {
      // error handler
    },
    success: function(data) {
        // success handler //can redirect to any route of your wish
    }
});
</script>

P.S. - I got hint from Where to save a JWT in a browser-based application and how to use it

Answer 3

Unfortunately if you want the browser to automatically send authentication information when performing simple navigation (not XHR requests), and without presenting the authentication popup, then you need to use a cookie, with all its associated issues including CORS, etc. There's no other standard way (absent a plugin) to inject headers into every GET the browser issues.