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?