Using HttpOnly cookies in React & Node | Storing JWT Tokens or SessionID Securely

hey guys my name is rahul ahri and in this awesome video we are going to talk about the most important and the critical topic of web security that is http cookies or http only cookies what it is and how can we take advantage of it so prior talking about more on the https as well i would like to take a moment and really explain the various storage mechanism about storing all the tokens and session ids uh you know that when we when the users freely log into our app itself you know the kind of to really make the user experience much more enhanced as well the server actually gives a token or a session depending upon what are you using to the user as well so that every time the users really you know authenticates that token as well it's the server really remembers that this user is kind of really locked in as well and to really further really enhance this user experience the concept of cookies was kind of really introduced first so as usually you know that the server really uh sends the token or the session id to the user as well uses client as well so and somehow we need to store that uh token or the session id depending upon what are you using really securely and that's where comes about the problem of storing those tokens or session ids you know securely so talking about briefly about cookies as well there are three types of storage mechanism the first one is cookies the second one is local storage the third one is session storage so cookies has a maximum size of 4 kilobytes it's pretty marginal and the biggest one is of local storage being 10 megabytes i guess you can do crazy lot of thing with it uh and this session storage is just about five megabytes so talking about differences between each of this thing is like the session storage lasts only till the tab is open until unless you just close the tab it will automatically the data which is stored in the session storage just gets vanished out of it so what you can do with session storage well according to my intuition as well you can really do something like youtube's uh playback rate i just so if you really are if you really adjust the playback rate of current video that you are playing right now and if you really just click to the recommended section the current let's say i have very let's say i'm watching joe rogan podcast and i'm right now itself i'm really i have really increased the speed up to 2x as well now next time it's really happened that the youtube gives me a recommendation of any science video and i'm really interested to know that so if when i click that video the playback rate automatically gets set to 2x as well and i don't need to do anything but when i open that same video to the next tab as well it gets back to the default playback rate as well and that is the one x so you got my point what i'm really trying to say the second one is the local storage you know the possibilities of local storage is quite endless as well you can do many lot of things with it and the local storage has let's say an application uh so let's say about how can we use local storage well let's say if you are chatting with someone and you occasionally by mistakenly your net got vanished or you know uh let's say you by mistakenly close the browser tab as well so if you have redesigned the chat application efficiently as well you can store that unsend text into this local storage as well and can retrieve that data again so that you can really enhance this user experience as well and most important the star of this video that probably we are going to discuss is cookies now why cookies why not local storage and session storage why don't we why it is generally advised not to use local storage or session storage it's simply because it's not secure and the kind of security option that cookies really provide or correct political term will be the kind of security options that we really get with cookies is much more greater or much more enhanced and proficient in rather comparison with local storage and session storage as well the session storage and local so it doesn't have any security option it just it's it is only blank and really you can just debunk and try to access the object with javascript as well that means it is prone to excess attack unlike cookies if you really set up this correctly that which will be really much more safe and really protected against cross-site scripting or cross-site request forgery as well so let's talk about cookies why cookies well i've already told you the most of the obvious reason is it provides better security in this the best way of storing the jwt token and it really has an option about http only cookies which what well what that means is which which we are going to talk about in later words the secure flag and the domain and the path that means you can specify the browser to say hey browser hey google chromos firefox use this cookie only on this particular route as well so let's talk about same site now hussein nasi has really made a brilliant video about demonstrating this the same site and the concept as well basically there are three aspect one is strict lacks and none so by default if you really don't define anything attribute about same side google chrome browser defaultly treats the cookies as lacks as well they define it or not so what it really means is like your cookie will be only treated to that particular domain as well let's say if you define strict what that strict really means is that this cookie will only work on youtube.com and nothing other than else but if you redefine it as lacks it can work with subdomain as well like studios.youtube.com let's see like creators or dot youtube.com that's example like jobs.google.com you got my point right but if you define none it is prone to open to everyone out there so and majority third party cookies are kind of really set that aspect as well let's say they need to specify the cookies as well none like most of the third party cookies does that now let's talk about secure flag the secure flag really means that this cookie will only work on https cookies oh sorry https route that means it won't work with the non-secure route or non-https or non-tls route as well now let's talk about http only cookie what that really means now http cookie is a phenomenon when you know the problem with cookie in earlier days was it's really like it can be accessible by javascript if you just kind of go with google and type out document.cookies uh you will get some various attributes you know and that kind of really make it more prone to the vulnerable about xss and crossfit forgery and the http cookie what that really means is let's say the problem with cookies was really like you know you can access this cookie within the document.cookies in the browser as well so what it really means is that it's it is really prone to the excesses and cross-site 4g attacks in order to prevent that the concept of http is kind of really helpful helpful as well what that really means is that let's say i really enable the http only rookie what that really means is that the cookie can't now be accessible by javascript so if it can't be accessible by javascript that means it it is really prone against to the uh cross-site scripting as well as cross-site forgery and bunch of other malicious things out there so now the major advantage of what i already discussed about let's go to the previous slide as well uh what have we discussed about one thing that i really forgot to mention is that unlike local storage and session storage cookie can be created both on the browser and the server side as well but the local storage and the session storage are only limited to the browser as well but uh the http only cookie can only be created within the server as well you can't send you can't set that within this uh browser as well and now to really prove that point i'm gonna do a demo as well so here it goes so as you can see i have really made a video sorry uh i have made and really cool react app itself so you can if you have open my vs code sorry this is obs let me just close all these files this is garbage okay uh yeah sometimes i do some mistakes okay so i really installed create react app in the client folder and my express server is running at port 4000 so if i go up right here and it says it says giving me hello and this is my create react app itself so what you can really see is right now is this is create cookies this is renew cookies and delete cookies but if you really go up right there this is just an empty hollow cast there is nothing bad minimum up right there so to really prove my point about how what i was really trying to say is you can't create http cookies in the browser as well so we will really install one library called universal cookies so if i go up right here i'll talk already type universal cookies okay and then what i'll try to do is click it up right there go up back and let's say i really take another terminal let's see the client and really install this so okay and now what we try to do is [Music] he will import this okay and yeah okay so now it's been really installed what one thing we do need to do is just take this classic example like you know keys dot set my cat because everyone loves cats no so what we'll do is we will define a function over here it's really let's say on click on click equals uh create cookies okay and what we go up right here we will define as const create cookies let's say we denote it as arrow functions and then what we'll do is try to just exactly same page setup right there and now what we'll do is go back to the browser open our this so let's refresh this okay and open this console okay so what we are going to do is right now we will open this tab so as you can see if i will open this create cookies it it is really giving me my cat no pacman and it's really this is expiry is none so what we'll do is we are going to go up right here there is some other attribute as well so as you can see so basic fundamental aspect is you define what you want let's say my name is let's say i defined it as name and then my value is something which is my name let's say like rahul this is my name and value and otherwise and to really specify the option as well so let's say what we really want is same site to strict okay path we defined as path to let's say slash now let's define it as expires the expire attribute is really counted in milliseconds as well so that's why we need to define as in that appropriate manner as well so we'll define this so what it really means is that this will take this parameter as new dot date it will currently it will convert that timestamp into millisecond and then it will take about three thousand thirty thousand milliseconds that is 30 seconds so new not date new date that means current time plus 30 seconds so yeah it will have a validity about 30 seconds now let's go back to this browser and let's try to create cookies to tell you that this inside is invalid what's really problem okay that oh same site must be in string okay uh let's try to create this refresh this okay so now you can see this same site has been strict so that means this cookie cannot be used anywhere other than this local storage 300 3000 as well so this my cat is something which we haven't really ex stored it up right there so if i really wait for 30 seconds let's see what will really happen so but i'm not really that patient so let's try to really bring this close to five seconds you know let's try to override this okay and i'll create this cookies okay so let's see this name is rahul ira if i really constantly do do this refresh it will automatically last away and most important thing is really that if you just kind of renew the cookie if you really attribute the same site or to really if you change one of the attribute as well it will overwrite instead of duplicating itself and one of the thing is really that if you really overwrite the cookies as well it won't duplicate it will just you know replace that original value with a new one as well what that really means is so in the case of asp what we have already seen is that it changes the expiry from 30 to 5 seconds as well so similarly we can do that about in just 10 seconds as well so right now here is something about 10 seconds you know and if i go up right here name is rahula area and the session is about 10 seconds but if i really go up right here and really do it five seconds so and we create up right there so it will go up exactly five seconds later words you know so that is the clear advantage unlike other things where you can it gets duplicated it gets the cookie actually gets override even if you really specify the attribute exactly and the pathway is it now let's come back to the point about where i really stated about that you can't use http cookies in the browser as well so we come back right here let's say app.js and now what we do is really specify http only cookie to true okay that is a boolean value either it's false or it's true so now let's come back over here and let's try to do this now you can see the cookie has been very none as well so what it really happens is you can't create http cookie in browser that is the whole point of security over here if you are able to create the if you are able to create a http cookie in browser itself that means it may it might have come with the own issues as well that means that some of the other attacker could really uh create some other situation that it could really retrieve the cookie as well so that's why the task of making cookies uh ideally you should delegate that to the server side as well so that's why we are going to use express for this uh terminology as well so if you go up right here back to the uh let's say server.js file as well so as you can see this is the app.get file and now what we really try to do we will rest we will send some cookies but previously we need to install couple of things as well we need to install axias oh yeah so npm install axis in pmi axis in the client folder but one thing that i forgot i'm sorry my pardon that i really need to forgot this to increase this size okay now it's looking good yeah so yeah and one thing really now let me create some another terminal and let's say what we need to install is npm i course for that's because you know the local site the origin really must be same as well and yeah one thing that i really forgot is http cookie only works within the same origin as well and that is why you need to specify this course exactly there on the proper uh path as well so we'll just see how we how can we do this and let's say let's install this npm course and what we need to do is cookie uh parser because that's what it's the most popular option out there you know you can use many of those options as well like cookies uh there are many libraries to it you can send the cookies and to really just kind of help to ease your burden as well so yeah uh let's say what we need to do is if we need to do and whatever you do is you just close all this thing and let me go to this server side as well now what we need to do is we will use this cookie parser so before going on to that let's go to the official documentation of keepass right so what they say okay we need to use this specify cookie let's use this instead of var instead we are using const const and coming back to here we are going to use app.use cookie parser and coming back here what we'll do is again here and most importantly it's important to use the course as well so yeah uh app dot tab dot use course c u r s course uh so we have not initialized it sorry on my part let's say we do it up right here const uh course uh equals require uh required course right uh yeah quad cores so what we need to do is initially let's say we need to define as some attribute about uh credential is true credential to true and let's say to origin to let's say uh you know http local host to 3000 so what it essentially it will do is without this credential to true and origin to uh to this local address that the react is actually currently on the development server of react is on it won't just work so why it won't really work let's say i will i want to really show you this uh stack overflow thread as well so okay so here we are so you know what make access and request automatically as well so as you can see this you this guy has really initialized something a parameter as well and he want to send some cookies now here it comes an interesting point now you may have thought about if we can't access the cookies so how can we really send them it doesn't really mean that if you can't access those cookie you can't send them definitely you can send them so and how is that so just we are going to discuss in this topic so what it really does is you need to initialize with credential property within axis as well so if you go up right here as you can see this is this true we need to define with credential to true as well and as you can see here exactly somewhere yeah we need to define it app is equal to course and origin is equal to uh origin to let's say this as attribute as well why because as as i told the same side or sorry the http don't will not work with another origin as well it will work only on the same origin as well and in order to really try to you know fix that issue we need to use this parameter so what we are going to do we are going to shamelessly copy just like other programmers do we use this thing okay and then what we do is try to copy and yeah we will go up right here paste it exactly on the same issue let's say about x except for uh 3 000 we'll use yeah 3000 a about instead of 8 000 as well and let's say okay http it's not https now what we need to do is so now rest dot let's say it's not send it's cookie and what we need to do is let's say we will copy exactly same thing previously no no wiring went wheel and it's all already there so yeah we'll copy this exactly over here uh come over here and like let's say we paste it exactly but before that we need to define our status status s t a t u s status in bracket let's say two o sorry around let's say 202 that means accepted oh and then what we need to do is send something let me beautify this now it looks clean now what we need to do is send message that is cookie cookie bean initialized okay and now here it comes the game of axios remember what i told you now coming back to the point of this stack overflow example it's like we need to define this with credential is equal to two now coming down a little bit further as well so as you can see here it's really like we need to define it axis uh instance as true copy this now come back to the point let's say app.js i will initialize it in the topmost part and then let me just close this issue i mean yeah so what we need to do is exactly come over here up so yeah i'm not it's like i get confused with the nexus and i'm not get i don't but anyways uh app.get in bracket what we need to do is define as initial localhost l oh sorry l o c a l local host what's the port that i think it's four thousand let me check it again oh yeah it's four thousand four thousand uh path is equal to get okay and then what we need to do is say we need to first i forgot to initialize a axis so let's say import axis right from uh axis import not imposed okay and now for but for now we don't need this cookie library we'll just remove this because as i have told you we can't modify or create the cookies in the browser as front end well specifically in case of http only yeah so what we need to do is let's say we take this parameter off with credential to true let me just copy this because we are shameless programs which generally copy and now what we need to do is symbolize then give an error function and take a parameter of rest so result whatever you like and then what we need to define as console console.log let's say result okay so log rest dot data okay because that is what then access really formats in within that format as well yeah so let coming back to the point if i create the cookie up right here you can see this name has been initialized and there you can see hey it's been http only now you might have seen that we haven't really initialized on secure the problem is we are on the local host so that's why even if i really specify this uh secure attribute it won't just work totally demonstrate i really like to present you this thing so if you go up back right here you know let's say in the server.js what we need to do is let's say to secure this is secure to true okay it's a boolean value and then let's say oh let's say try to zoom this up so as you can see it just went away that means the cookie has been set initialized so if you really try to really tamper with some other way it it can go vanish as well so what it really means in this context is that we can't initialize secure cookie as we are in the local host but if you're really testing on this or let's say on https then surely it can get enabled as well and what you might see in this priority window this is automatically i think it's been set for chrome as well the chrome automatically arranged every cookies in the stack was there depending upon how frequently it's used or on this certain criteria as well i'll mention the link or additional article if i really found that is really useful so that you can check that out but now let's try to come back over here let's erase this comment for a while and then what we need to do is let's say name rahul lahiri now let's try to you know change the validation oh sorry expiration oh i think yeah it's five seconds more than enough now let's try to refresh this as you can see it's gone now what we need to do is let's try to extend this life around 100 seconds and what we need to do right now is uh let's try to do copy exactly same thing ctrl c and now what we need to do is ctrl v and what we need to do what we will do is just current app.get slash delete cookie in camel casing and what we need to do is let's say restart clear cookies right cookie being cleared oh yeah say cookie cookie cleared now what we need to do is make some changes in this attribute instead of cookies we need to define it as clear cookies let's say let me clear this let's say clear clear cookies and what we need to do is we only need to specify the name value as well in exact same order because it's a case sensitive let's say what i've done mistake yeah so we need to define it as in exact same because it's a case sensitive and if you don't define it as it won't get delete so what we can do is right now go back to the axis let's say we define it as you know const cookie we will define it as delete cookies okay yeah let's say come back over here what i'll do is delete cookie and then what we'll do is localhost 4000 slash delete cookie yeah exactly the same yeah it's exactly the same thing and now what we need to do is let's say around here we it says send hi you have done that it's like sometimes i my vision get ignored uh yeah so now what we need to do is we have initialized this with credential to true console log rest data and now what we need to do is let's say on click let's say on click to around let's say what's that delete now right delete cookie delete okay and yeah we're good to go so now let's try to do a brighter if everything works well it's just one file so the name is rahul lahiri the cookies expiration about 100 seconds now let's try to delete this okay what was wrong okay i cannot get the mistake that i really realize is uh yeah so if i go up right here it's clear cookie not cookies so let's try up right here you know i've initialized it again let me refresh this now let me just delete it so as you can see it has been deleted over here so this is basically exact thing so now if you want to relieve cookies uh you can use the jwt tokens with you know kind of video uh use the refresh token to generate access token every new time within accessing interceptors now what access interceptors are uh it generally runs it makes a request every time behind the scene or if you really make per request to every particular route in here and there as well so what is the advantage of using interceptors as well so let's say you're cooking your cookie access token has been expired it's been getting expired you can use interceptors for every calling to re-renew and refresh that cookies as well so here really wraps up our entire discussion about http cookies but now let's try to do it one more time for final moment if we try to create some cookies if we try to delete them it just went it just goes away cookie initialized if you go up right here in the application if we go back to the console and then delete cookies cookie clear let's try to do this yeah it is clear so let's say cookie make http flag strict and here let's try to modify this stuff for a moment uh let's say we will define for the temporary moment we'll do it as lacks la x okay and we'll try to do this so as you can see it's changed relax we want done okay and then what we do is yeah you can see it gives me an error as well issue so let's say it's a marks as cross starting so this the chrome has been really what giving me warning that this cookie can be used for uh for excesses or you know cross origin as well cross-origin policies so let's try to make it again relax or strict let's say strict is more better because it's kind of local host and then what we need to do is let's for a temporary moment we enable this as false okay http cookies now coming back here you know let me close this let me refresh this for a while delete this okay and you can see the flag has been gone now let me just close give back again and let me just take this true and let's see now the http flag is back let me try to delete this and you got my point right so there you go you now you really know how to use it but a last moment that i really like to demonstrate is like you can't access those cookies uh in the console as well let's try to do a one more thing let's see if i disable this for a moment http only to true now i finally create this cookie and really go to the console and let's talk about document uh dot cookies you know as you can see it gives me the name of rahul ahire but if i will delete this again and then again and finally try to initialize it again htp to true and then let's try to go about right here let's try to just you know http flag is on and let's go back to the console and let's say document to true it returns me this null string or a blank string and that is the power of http cookies and which i already told you in the beginning of this video as well so here you go we have finished this massive topic of http quiz uh it took me a really long time to really figure out all this uh let's say around four of well it's it took me around four or five days to really uh to bring this topic out and come up with the video uh and it's really my hopeful wish that what i really took about so long time to reload you can learn within this short say half an hour half to one hour depending upon what this video will be edited uh and yeah use this security aspect in your project and make your apps more secure that is what i'm really praying for everyone should really use this security aspect more seriously as well so till then being said that if you have any question queries comments or any some sort of suggestion please leave it down in the comment box below and let me know how this video was helpful for you or not uh what could have already done more better for you till then stay connected stay subscribed to this channel which is more important and i'll see you next time [Music] you

Channel: Rahul Ahire

Views: 60,892

Keywords: httponly, httponly cookie, secure cookies, web security, storing jwt tokens safely, how to use httpOnly cookie, httpOnly cookie tutorial, jwt token httpOnly cookie, storing session securly, protection against xss and csrf, xss, csrf, xss http cookie, samesite, secure flag

Id: a5Krfkfl9MM

Length: 36min 13sec (2173 seconds)

Published: Sun Nov 01 2020