1

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.

Wouter Standaert
  • 299
  • 1
  • 4
  • 13
  • 1
    Possible duplicate of [Where to save a JWT in a browser-based application and how to use it](https://stackoverflow.com/questions/26340275/where-to-save-a-jwt-in-a-browser-based-application-and-how-to-use-it) –  Jan 03 '18 at 21:08
  • The only way that might be possible is the ServiceWorker API. – Evert Jan 04 '18 at 01:43
  • You can’t add headers in standard HTML elements. – Joe Jan 04 '18 at 03:30

2 Answers2

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'];
gokcand
  • 6,694
  • 2
  • 22
  • 38
  • I realise how this works, i just want it to be set in the http header everytime the user clicks a link. – Wouter Standaert Jan 03 '18 at 21:47
  • @WouterStandaert I have updated the answer. Hope it helps. – gokcand Jan 04 '18 at 14:22
  • 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... – Wouter Standaert Jan 05 '18 at 09:27
  • @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. – gokcand Jan 05 '18 at 11:14
  • Yea sorry about the delay! You're right, this should in fact to the trick, thanks! :) – Wouter Standaert Jan 07 '18 at 11:00
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.

tinc2k
  • 54
  • 6