Always pass http authentication header javascript

Question

I'm trying to create a login and authentication system using Node.js. I'm going about it this way:

1) The users sends his credentials using a form via the POST method

2) The server checks these credentials against the database

3) If the credentials seem correct the server generates a jwt token and returns this to the user.

4) From now on the user always places this token in his http authentication header, or at least when trying to access restricted pages

5) When a user tries to access a restricted page, the server extracts the token and validates it before continuing.

Right now where i'm a bit stuck is step 4. I'd like to still be able to define my links in the typical

 <a href="/restricted">Click here</a>

kind of way, but make it so that the token is actually passed in the http header. Is this possible?

So this is not about api calls, but requesting full webpages that require you to authenticate yourself with a token. So i think ajax is not appropriate here.

Possible duplicate of Where to save a JWT in a browser-based application and how to use it — user2033671
– user2033671, Commented Jan 3, 2018 at 21:08
The only way that might be possible is the ServiceWorker API. — Evert
– Evert, Commented Jan 4, 2018 at 1:43

gokcand · Accepted Answer · 2018-01-07 11:03:55Z

1

Basically, you cannot set headers with plain HTML. To do that, you need to send requests using XHR. On the other hand, you may want to consider adding query tag into your href link.

First, write token by using localStorage

 localStorage.setItem('jsonwebtoken', 'AsdL6-4GffsdXCvS3j');

Read token and add it into your <a href> as a query parameter ?token

 <a href="/restricted?token=${localStorage.getItem('jsonwebtoken')}">Click here</a>

And then modify your server to accept token that sent with req.query

 const token = req.query.token || req.headers['X-Access-Token'];

edited Jan 7, 2018 at 11:03

answered Jan 3, 2018 at 21:07

gokcand

6,8362 gold badges25 silver badges39 bronze badges

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

5 Comments

Wouter Standaert Over a year ago

I realise how this works, i just want it to be set in the http header everytime the user clicks a link.

gokcand Over a year ago

@WouterStandaert I have updated the answer. Hope it helps.

Wouter Standaert Over a year ago

This does seem like a viable option, though i have read that passing a token via the url is not a best practice. So i guess that using a token for simple web authentication (that is not an api or websocket) is not a good option...

gokcand Over a year ago

@WouterStandaert If you use HTTPS/SSL, querystring parameters are also gonna be encrypted. Also, the jwt is signed with private keys. So, if anyone gets the token, they cannot manipulate and change its value.

Wouter Standaert Over a year ago

Yea sorry about the delay! You're right, this should in fact to the trick, thanks! :)

tinc2k · Accepted Answer · 2018-01-04 00:28:10Z

0

Unfortunately, I don't think there's a way to add your JWT token to the header, outside of using XHR or File API.

answered Jan 4, 2018 at 0:28

tinc2k

546 bronze badges

Collectives™ on Stack Overflow

Always pass http authentication header javascript

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related