1

I'm developing a web app using Angular 9 as frontend to fetch data from a Django API. The authentication scheme is based on JSON Web Token. During login process, Angular sends to the API the username-password pair. If that data is correct, the API responds with a pair of JSON Web Token: one for accessing and the other for refreshing. Without a valid access token, the API won't let you get its data.

My concerns are on where to store those tokens on the client.

Searching on the web, I've found that one of the preferred way to memorize tokens are cookies and actually this is the way I've implemented so far. But several articles says that in order to grant some level of security against XSRF attack, cookies should be set with httpOnly flag. That's ok, but one of the advantage of using JWT for authentication is the possibility to attach user-defined claims to the payload of the token. For example, I was thinking about adding user permission as token claims to allow or deny access to given pieces of the client interface. But if the token are set as httpOnly, there's no way to access the payload, isn't there?

Furthermore, I would like some clearness on how cookies work in web applications. As far as I know, a cookie should be set by the server, using the Set-Cookie header. But in my application, the cookies are set by javascript code, exploiting ngx-cookie-service library, which runs in the client's browser. Where are those cookies sent, given that no server knows about them? Are they attached along every single request to the node web server which powers Angular framework? So for example every time I make a request to localhost:4200/home/students the tokens stored in the cookies are sent along with that? Isn't it a security risk to have travelling tokens on each request?

dc_Bita98
  • 464
  • 2
  • 6
  • 19

1 Answers1

1

I personally store my tokens in the browsers local storage, and yes the JWT token is sent along with every request, this may cause a problem if you are using http, but if you use https, requests data are gonna be encrypted and no one can intercept you token.
you can refer to this video for more explanation on how to store your token in an Angular app: link

Elmehdi
  • 1,065
  • 2
  • 7
  • 19
  • Thank you. But using local storage, token can be accessed by any browser tab and also from any javascript code,, right? – dc_Bita98 Oct 04 '20 at 17:20
  • browser's local storage is isolated per domain and per port, check this https://stackoverflow.com/questions/4201239/in-html5-is-the-localstorage-object-isolated-per-page-domain – Elmehdi Oct 04 '20 at 17:41