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.

score 8 · Answer 1 · answered May 06 '22 at 07:33

8

I found your question because I was looking for the same thing !

However, I installed https://modheader.com/ and it works perfectly !!

you call follow the install process and then add any header you want:

answered May 06 '22 at 07:33

Bguess

1,700
1
11
24

@blimpse Can you elaborate? This seems like it solves the problem (and, indeed, solves the issue that I am currently having that caused me to find this question). – scubbo Nov 04 '22 at 04:53
3

...that said, reviews of this _specific_ extension suggest that it is pretty dodgy (mentions of fake traffic to shopping sites and advertizing fraud), so maybe this _particular_ extension isn't a good solution - but I don't see why a hypothetical extension cannot be. – scubbo Nov 04 '22 at 04:56

score 5 · Answer 2 · edited Feb 05 '22 at 11:55

5

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).

edited Feb 05 '22 at 11:55

Lubo

1,621
14
33

answered Feb 09 '19 at 14:10

nologin

1,402
8
15

score 1 · Answer 3 · answered Mar 16 '20 at 10:23

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

One cannot navigate pages via AJAX. I believe the question is how to add a header to the html request from the browser. — grantwparks, Mar 05 '22 at 22:42

score 1 · Answer 4 · answered Jan 17 '23 at 16:34

1

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.

answered Jan 17 '23 at 16:34

Emperor Eto

2,456
2
18
32

Is it not recommended to perform simple navigation for GET? I want to GET a webpage, and I want the url to change as well. If i perform fetch or XHR it does not change the URL... Further I am warned not to change the document contents dynamically using document.write() – A B Jul 10 '23 at 05:15
1

@ab sorry I'm not entirely sure what you're getting at. If you're in a Single Page App (SPA) situation you would generally want to be using XHR for most things (incl. GETs) except maybe img or media links. During navigation the URL changes programmatically but this is really just an illusion for the user; the browser is still on the same page technically. So whether or not you're doing "simple navigation" or XHR would depend on your application. But cookie authentication is a common method in both cases because you then don't have to manually inject anything for XHR (and can't with simple nav) – Emperor Eto Jul 10 '23 at 12:54
I mean if I'm on homepage /home, and I want to GET the contact Us page, I want the url to change to /contactUs as well. But in XHR/fetch, we only get the contact us page html and have to manually rewrite the document. the url remains the same (/home) – A B Jul 11 '23 at 11:07
1

@AB this might be getting a bit off topic and worth a separate question, but the SPA frameworks like React and Angular have functionality for changing the route the user sees in the browser bar without actually changing the page. So they will change the document contents dynamically and then change the perceived route. If you reload or copy+paste the link, the same modules will re-form the page to match what's in the route. But it's all done through XHR + DOM manipulation; with an SPA there's usually only one actual index.html file and that's it as far as the browser is concerned. – Emperor Eto Jul 11 '23 at 13:49

How to send Authorization header with browser

4 Answers4