JWT: Where to store JWT in the browser frontend?

json web token is a standard for sharing json data that are protected by a cryptographic signature it is the most common method of authorization of services on the internet but the question is once your service issues the token where should your front and store it you want to strongly avoid anyone getting access to the identity or access token of another user through cross-site request forgery or cross-site scripting what method of storing jwt in the browser you use is super important because you want to make it very hard for anyone to hack your application if you store jwt in a cookie cookies have the advantage that they are automatically sent together with each request so you don't need to deal with any authorization header that makes them much easier to implement cookies are still open to cross-site requests forgery because of csrf you should also implement csrf tokens csrf token is a random string sent as a cookie with each request and it is different for each of those requests you should also use http only flag to make the cookie available on the server side a cookie with this flag attribute is inaccessible to the javascript document cookie api it is sent only to the server a cookie with the secure attribute is sent to the server only with an encrypted request over https protocol however on locals only you can still use http for jwt in web storage you can choose between local storage and session storage the difference between these two is that local storage is more permanent session storage is cleared when the user closes the website window local storage data have to be explicitly deleted unlike cookies local storage is sandbox to a specific domain and its data cannot be accessed by any other domain including subdomains but remember that you are still open to cross-site scripting both cookie and web street solutions can be a target of cross-site scripting local storage is used the most in jwd implementations however session storage is the more secure option here with local storage gwt is not passed with each request automatically and you need to pass it to the server through an authorization header yourself the most secure solution here is to store gwt in memory of your single page application this means that you end up storing the token in a javascript variable without additional persistence this comes with some limitations you cannot implement a single sign-on and each tab or open window in a browser will require their own sign-in because javascript memory is not shared however the sharing issue can be worked around by the use of a refresh token this solution is of course still open to gross site scripting like all the other solutions you will need to pass the jwt with each request using an authorization header the same way as you would with web storage and that's everything for the video today i hope that you enjoyed it as much as i enjoyed making it and you can find all the materials and source code in the description of the video see you with the next one bye

Channel: 7urtle JavaScript

Views: 408

Keywords: json web token, jwt, javascript, authentication, authorization, security

Id: occfnVaZOXI

Length: 3min 12sec (192 seconds)

Published: Tue Nov 16 2021