Learn-json-web-tokens: Web storage and progressive enhancement

Created on 15 Oct 2015  ·  9Comments  ·  Source: dwyl/learn-json-web-tokens

In #5, #46 and most discussions online, people seem to default to using local storage / session storage for JWTs, rather than in a cookie. This requires using AJAX throughout the app so that the header can be set from web storage each time. My understanding is that this to prevent cross-site request forgeries (and is essentially leveraging the same-origin policy to do this).

How does this fit with progressive enhancement, where some devices will not support javascript at all?

enhancement question

Most helpful comment

Not necessarily though this depends on your toolset. Angular for example allows you to set this once .. i think you can even do with jquery easily.

$.ajaxSetup({
   headers: { 'x-my-custom-header': 'some value' }
});

Another issue with cookies as transport layer for tokens is you are using 2 timeouts and you don't get the benefit of avoiding CORS issues. Cookies complicate access to RESTful web services. Is much easier to construct a curl one liner to access a resource with a token than bundling in a cookie.

All 9 comments

_Another_ _GREAT_ Question from the _Wizard_! :+1:
For the purposes of this micro-example I think its "_Ok_" to use localStorage.
Let's be honest, _everyone_ is using React these days with zero regard for accessibility.
All the cool kids are _way_ more interested in _Shiny New Frameworks_ than _Progressive Enhancement_...

However...
In our _actual_ app we are using cookies _precisely_ for backward compatibility and progressive enhancement.
That's why we added the option to JWT2 ... see: https://github.com/dwyl/hapi-auth-jwt2#want-to-sendstore-your-jwt-in-a-cookie

So in conclusion: I would add localStorage to the example in this repo and add a comment informing people that using cookies for storing JWTs is "_Ohkay_" because you still get all the _horizontal scalability_ and security benefits of using JWTs while saving _effort_ of having to set/get the JWT and add it to headers on each request...

@rjmk & @nelsonic

is there a specific reason the JWTS stored in local storage should be sent in the headers or is there anything vulnerable/"wrong" about using https://www.npmjs.com/package/node-localstorage?

@Jbarget are you building a "_Universal_" that requires you to have access to localStorage on the server? If that is your use-case then the node-localstorage module will serve your purpose.
_However_ you will still have to _manually_ send the JWT in the header to send it back to the server in "AJAX" requests... so there isn't much advantage to using a _module_ if all you want to do is get/set the token to/from localStorage ...

@nelsonic we'll probably end up setting it in the headers of each request, thanks for the clarity!

@Jbarget do you have an _objection_ to storing the JWT in a cookie? (_it simplifies your life..._)

@nelsonic no objection, am i right in thinking it simplifies my life by being able to access the cookies from anywhere in the app as opposed to local/session storage?

It simplifies your app because once the cookie is _set_ by the server, _all_ requests sent/received will always contain the cookie. which means you _never_ need to _think_ about it after that point.
By contrast storing the JWT in localStorage means you cannot have non-ajax interaction and you have to remember to SET the auth header for each request you make to the server...

Not necessarily though this depends on your toolset. Angular for example allows you to set this once .. i think you can even do with jquery easily.

$.ajaxSetup({
   headers: { 'x-my-custom-header': 'some value' }
});

Another issue with cookies as transport layer for tokens is you are using 2 timeouts and you don't get the benefit of avoiding CORS issues. Cookies complicate access to RESTful web services. Is much easier to construct a curl one liner to access a resource with a token than bundling in a cookie.

This is issue is being automatically closed as it's more than a year old. Please feel free to reopen it if it's still relevant to your project.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sarneeh picture sarneeh  ·  3Comments

joepie91 picture joepie91  ·  18Comments

KumarS-Naveen picture KumarS-Naveen  ·  3Comments

nelsonic picture nelsonic  ·  5Comments

rhewitt22 picture rhewitt22  ·  5Comments