HTTP Cookies Crash Course

cookies are small pieces of data that are used as the storage medium in the browser and are also sent to the server with each request they are mainly used for sesange session management you know like what keeps you log in when you go to facebook.com and you don't have to log in every time and type in your username password right or it can be used for user personalization when you choose the language or choose a certain like for playing games in the browser it stores like kind of very very little information about your game right use a personalization and the infamous ad tracking right so every almost all websites now track you and cookies are used for tracking mainly in this video we will try to demystify cookies and learn everything there is to them hopefully by example and with demos as well like we will do in this channel and if you speaking of this channel if you're new to this channel welcome my name is Hussein and we discuss all kind of software engineering concept and topics by example this channel so if you here consider subscribing and you can check out the other content of this channel with that said let's just jump into this exciting topic right uh alright guys so so cookies when I decided to you know every almost if you ask anyone from history talk what our cookies like what cookies are obviously if you tell them that hey I'm talking about technology here right they'll tell you yes there on the browser cookies sure right they they know right most people know what cookies are but I decided to kind of step out of this bubble and cisely you know what I don't know anything about this and I wanted to learn almost a lot I learn I want to learn about this what are these cookies whatever old is kind of different things how they work right so I started I did almost a two-week research and I still think I don't know a lot about these things so I'm gonna distill what I learned about this topic here and hope you guys can enjoy oh that's it let's just jump into this alright so I'm gonna divide this tutorial if you will into four sections I'm going to show you how to create cookies the different methods of creating cookies yes there are more than one method of creating cookies right I didn't know that right and yes most of them like using javascript but there's a server-side way of creating cookies and there is a client-side way of querying cake is we're gonna talk about that so section two we're gonna talk about cookie properties all right and there are a lot of properties for for for the for the cookie there's the max age and expiry in there same side and other stuff as well that we're gonna talk about right and then what what how they like what is the contract of the cookie we're gonna we're gonna talk about that right so what makes a cookie cookie in Section three we're gonna talk about cookie types there are a lot of types that are in my opinion that are made up right it's just no times but it's kind of kind of kind of like attributes associated to this today to the type of cookies you know it's like there there are different types and we're gonna talk about them the permanent session base HDB only I even included zombie cookies there for you too for for fun before we're gonna talk about cookie security which is insane man so the way there are a lot of ways to steal cookies and hijack sessions I was so surprised but but we're gonna have a lot of fun guys right so with that said let's just jump into section one where we will create cookies creating cookies okay so there are two ways to create cookies guys right so there is a few if you go to any browser right now and you go to google.com when you open the console Chrome you can type some JavaScript there and you can literally do this code right document right which is the document that you open which is Google that's come in this case and then you say document dot cookie equal something equals something right which is the the value of the key cookie which is like a key value story and you can think about it this way all right so this is one way of doing it you can write a JavaScript code to sit that cookie right we're gonna show that and there is another way which is kind now if a server the server asks the client to sit a cookie for it so in this case this we're gonna use the header that is called sit cookie all right and this is a response header so what happens here when you make a request to a site like a get request or even a post request to a site the site can choose to response with obviously the body and it also responds with a bunch of headers like content type right and all this kind of stuff one of those headers optionally you can sit a cookie you can say okay set cookie and there is you specify what cookie you want to set and the browser will set that cookie for you and most of the size does that for you like if you go to amazon.com right do you sign in it will return sit cookie and then we'll return the session ID for you and the browser will set the session that cookie for you from that right so if there's no JavaScript involved here behind the scene browser the browser does that it looks for this it's cooking and takes that and creates that cookie for you right let's just jump and show you both those things all right guys so let's show you one of the ways to set a cookie right so let's say I'm gonna go to a site example.com and then I am going to go to the developer developer tools here and then this will open the console which allows me to write some code assuming that all this code that will be written be executed in the same context of this domain example that count right so what I can do is I say document.cookie equal I don't know the same equal to right whatever you can see all the tests that I've been doing right so now I have set a cookie with one value called Hussein and that keys have seen and the value is 2 right and this is how you look at the cookies right in this domain we're good at the application then you expand that and then you can see that there is one cookie name the same and the value is 2 and it's it to this domain which we were going to talk about is well these are part of the properties of the of that cookie today we're gonna talk all about it all that cool stuff right so that's that's one way of doing it right so the the the this is the JavaScript way of doing it right so another way of the kind of the JavaScript way of doing it but let's say I want to build my own website right so I'm gonna go ahead and open a visual studio code here and I'm gonna create a brand new folder let's call it cookie demo right and then what are we gonna do man what we're gonna do here is we're gonna create a new file index.html right and html5 and let's say I am going to create a button here button create cookie right and then say create cookie and we'll add some script here and let's say the script will be cons button create cookie equal document dot get element by ID [Music] what we gonna do here essentially guys is we're gonna add an event listener so that when I click on this button I want to create a cookie right so I say do document here dot cookie equal say in equal seven wherever it was a very basic cookie that's the keys who saying the value is seven okay so that's another way of doing the cookie here alright now that we have the index dot HTML file ready for us okay what we need to do is create an index the GS file and that file will have basically an express application a small Express application nodejs application that will return that index dot HTML file ok the reason we do that we checked because we want a raw web server that we can control and express is great for that ok I'm going to reference the video that we don't Express guys how to install I know that's Jess alright so here is how we create an Express application cause a pic will require Express and then you do that I have Express already install so I don't have to worry about it and then what we're gonna do is Abdur get if someone made a get request on the route right i want to get take the request response function and i'm gonna return the file that is called index dot HTML alright but we cannot return it this way right we have to specify the path of this and that's the security just preventive mechanism okay so we can do that directory name is the current directory right and we can do that and then just add index.html and these are the text the beautiful tix and jobs cut this is a new stuff alright so now we're gonna send it back right but we have to also obviously to listen to their to a given port right gotta listen to a port in order to satisfy anything right and yep console dot log listening on port 8080 okay let's go ahead and run this thing let's make sure we don't have any errors what good listening on port 8080 right so let's go ahead and go to my application refresh refresh there you go we have our button there you go guys create cookie so now if I go to the console I go to applications you can see that I don't have any cookies here right the moment I click on this guy either fresh and we have Husain seven right and the domain and all that jazz okay that is pretty cool guys are so that's another way of creating the cookie from JavaScript however how can we let the server create a cookie for us without us writing code okay in the client that it here's how we do it you go to my application here and before we send the file I will say it's like hey if someone visits index.html let him say that cookie sit that cookie for it okay that's the cool part you can do it with images you can do it with index.html it's like cookies cannot cookies or I find wood with anything right it would with literally anything it doesn't have to be an interesting or or text or anything can be literally anything now when you do a resource dot sit header you can do that right and then and the the header name is called sit cookie okay and here's what you pass you pass an array okay and you pass an array of cookies right let's say set from server this is this has been set from server I need equal one all right let's try this now if i refresh this guy if i go here and i refresh this guy and i go back look at that set from server i did not write any JavaScript code yeah I have a I have a cookie by just visiting this thing alright guys so this is how we set cookies there is a way from the client and there is a way from the server right okay so the server sits it tells the browser to set the cookie and let's let's go and actually check that out guys okay so if I make a request here and I go to Network you can see the request we made to localhost and if we scroll all the way we're gonna talk about that now next right but this is this is what we're talking about guys here see set cookie the browser have been asked to set a cookie from the server right and this is what what the server is powered from right so all the hell response headers this is what we're looking for set cookie set from server equal one and now every time we visit this page we were asked to set this cookie okay and this cookie is called the session cookie which is we're gonna talk about as well like kind of temporary the moment we close this yeah it's all gone all right guys all right what do we have next we learned how to set a cookie from the browser and from the server what do we have next guys cookie properties guys alright cookie properties so hers there's something about cookies that you need to know right and cookies are sent with every request whether you like it or not there is an asterisk after that but cookies are always set there are some cases that cookies are not sent and these are kind of security things that we can I come to but they are sent whatever a quest if you visit a link if there are cookies said to that domain it will be sent with that request right and you can think about it right now oh my god what if I have like thousands of cookies I'm just now sending all this bandwidth right just like all this kind of all this cookies are sent with all my requests if I visit a link if I made a fetch request if I made a post request these cookies are sent if there are any right assigned to to my domain okay which is my next topic here there's a cookie scope right so remember when we did the first thing we did an example does comment we said that cookie here cookies are think of these cookies are like a buckets right each cookie has like each each domain has a bucket right and the cookies goes into this bucket right and this bucket is called the domain right so if you go to example.com literally example that can I didn't say EE the minute every good example it comes at a different domain if you go to example that come and the server sets your cookie that cookie goes only you know example.com bucket if you go and don't do document the cookie and you said that another cookie that goes into the same bucket and so on right so in our case localhost:8080 is another domain that goes into a bucket right any cookie created will goes into this bucket right so this this is the path of this this is the this is the scope of the cookie domain right and the second one is the path there are optionally you can sit paths for the cookies alright you can say for example I want these cookies right well I say you have you have example.com right and you have you have a lot of cookies right but you want you want some cookies to be sent to certain path like slash login but other cookies do not send it to this path send it to other path right so you can specify cookies per path as well we're going to talk about that so I said let's just jump into some demos guys here domain alright so go back to our I like this a lot so go here do we have any cookies let's clear them out clear all the cookies and here we're gonna do we're gonna go to example.com and I don't have any cookies right now okay so what I'm gonna do here is I am going to create a cookie okay and document dot cookie equal let's call it mmm saying equal one okay and obviously we need your fresh there's your cookie it created an example calm okay now if I go to www.example.com guys guess what my cookie is not there because that cookie that I have created was if if I if I say document equal Jose an equal one that default is it only is created for that particular domain which was example.com and that's it nobody else can see it not about that example that come not mail dot example or dev a little bit example to come these are different domains right obviously not google.com can't see it alright so by default you create a cookie like that it will only be seen for that particular domain right ok so now if I have if I create let's say create a cookie for this guy only ok equal www same equal one two now this guy I can see it right your fresh wait I can see the very WI same if I go to example.com I better not see the ww1 right so I can see only this guy right same okay and said the domain is example.com if I go to www.uwec.edu/career Oh Hussain but I'm gonna add a property this cookie called domain and I'm going to specify this dot example.com which means that since okay this cookie please make it available all sub domains example that come they believe about your example that come about calm mail.com anything just calm right I'm making a good example let's go right and make it available there that's what this means now if I do this I go to application hey I am in ww I just created here right all the same is there if I go to example.com I also see it here isn't there pretty cool guys and see the domain right dot example.com right is different not example that comes dot example it means everything everything in there isn't that cool edge guys isn't that pretty cool huh so that's cool the verge I don't care all right so we're not about the domain so that's all all we need to know about the domains right so the we need to talk about cookies and sending the cookies as well right so now if I go to example.com let's go to network and see that a course that I made example that come enter made a request right and look at that guys we're sending the cookie we told talked about this right we always send the cookie with every request cookies that are relevant to this in this case to this domain which is example.com I have assigned a call and all her saying is one which is this one is available to all subdomains so we get this cookies so we always send this course so the server has it if each request because remember you guys HTTP is stateless so it gets all cookies every time you have to send as much information as possible right because the server doesn't store and think all right so if I go to www.deewr.gov.au/rjcp from here and this is the server cookie that we have sent right so the moment I clear the cookies and then I made the request again right you can see that I don't have any cookies no nothing got sent the moment i refresh again guess what one cookie is getting sent we do you know why guys right the first week we cleared the cookies it was a waiter here's what we did we cleared that cookies right with so we now we made the request with no cookies at all right so we didn't we didn't send any cookies the server told us hey by the way you don't have cookie please create set from server cookie that's the server side cooking created the second refresh that we made we sent that cookie alright and there is so so that's why we have sent from server cooking alright let's talk about paths guys let's do pass now alright so path I'm gonna configure my application here with pass here so I'm gonna create a path yeah let's go at path one request response and what what I want to do here is guys literally when you make a request to the path one I want to return the cookies that have been sent to me ok so that's what I want to do so to do that we just look literally a response to send and there is the cookies are part of the request so request dot i think headers got cookie there you go yeah and we can just do that I have been sent these cookies right so the server will just respond with the cookies that has been sent to ok ok and let's just say path one and I'm gonna do the same thing path - there you go sweet sweet alright guys so let's do this run localhost I do all one do path one we can do that we can see that there's it from server which is that the default cookie that we got right we do path - that's the only cookie we have how are we gonna do here I'm gonna create two cookies document that cookie equal let's say I'm saying path one I'm gonna create a cookie that is will only be sent to path one and here's how we do it you add a property remember the domain this is another property called path you can literally just say slash path one okay that's the first cookie the second cookie is literally I'm gonna call it path - just for fun and just have another value so just completely different cookie but it's only set to path - let's not go like let's take a look at the cookies here guys so we can see that refresh we have a same path - okay and here's what we're gonna do guys if I make a request to path one you can see that the response came with a same path one only right and we can see that y can only see this is what I can see slash path 1 because I am in the path 1 right if I do path - I get there is the other cookie right but I also get this cookie all the time because this cookie has no path it is just like the path is universal always since this cookie - all that so this is pretty cool guys because now if you have a huge set of cookies you can configure them to be sent to only the relevant path right if you have that slash login or slash certain api's right you don't need to send unnecessary cookies - to the login api of the login path if you don't if you're not gonna use it right and the reason is because you will gonna save a lot of bandwidth right becomes cookies gonna cost a lot of bandwidth right because you're sending it with every request they were kind of stuck with you and we're talking about small cookies here but the real life you're gonna have a lot of cookies a lot of strength and big name big big bites right especially with sessions so you need to be careful with that right so use that right what do you what do you feel it's it's worth it right but pass was good path this is the path this is how you do pass right so all right let's go back what do we learn we learn about scent with every request we learned that cookies has scope domains right and path right I can send certain cookies to certain paths I can send the domain the cookies for a certain domain all right expires and makes age kind of kinda same nice but cookies if you don't specify these properties expires or max age the cookie will be destroys destroys it the cookie will be destroyed when the browser just closes right that and that's called what we call the session cookie right which will come to it right if you know specify a max age right then the cookie will always get destroyed if you close the browser I'm not gonna do anything I think this is just I mean maybe we will show right but you can say max age equal 3 minute and then the cookie if you do that then it's called the permanent cookie which is kinda weird name because it's not really permanent right but it's called permanent for some reason that thought mdn calls it all right so if you set a max age or expires it's called a permanent cookie right what are you gonna do is essentially it has a lifetime even if you close the browser it still lives if you open a browser again it's still lives right so yeah you know what guys let's show you a demo because I am I am that cool guys okay so I'm gonna create a cookie let's say temp cookie in this cookie well nine that has max age equal three minutes that's how you do it I don't even know hope you that that does the trick there you go that did the trick guys if only I can expand this hey so this will expire after three minutes which is literally that's the date of this thingy so it's gonna expire on whatever this day is May first all right so it's gonna expire after 3 Matt's right so that's that's how you do it if you don't specify it's gonna say na which means not available the moment you close the browser it just goes away right but chrome doesn't have has this weird thing with even with session cookies right even if you close it and do this mystery boy a max age it comes sometimes it just keeps them right I don't know why but that's that's just you can take my word for it okay expires message so you need to set them if you need to keep your cookie alive for a while same side all right this is my favorite right talk me I want to understand this to be honest guys it's a kind of complex name all right but what do you understand it so a really basic simple right but that that makes me really things like wow I don't understand anything about these cookies right and then and it's pretty cool once you do understand it right and there was it's good guys to have this mindset it's good to have this attitude about everything in life really it's just like treat everything that you don't know anything if you treat every if you treat life that you you know everything then you kind of don't will not learn anything because you will always be arrogant and you always like think yourself like above others right but if you treat said everything is like a new opportunity to learn right always accepted it's pretty cool how much you can learn alright sorry for the life lesson there guys but let's do that all right same side same side this is this is this isn't really new I think it's like I don't know when was added but it wasn't recently added and I think chrome added it first I don't know if it's support you know what is this a sexually chick it seems right in the end same site yes it's a it's available in all Arab browsers but I think chrome is the first one that added it all right so let's explain what was this thing is guys alright so here is here is here's the problem guys okay let's assume you you logged into Bank of America okay you as you logged into Bank of America okay and Bank of America uses the sit cookie header and they sit your session ID and a bunch of other stuff tokens and and all that stuff in your cookie so now your cookie has these tokens so now when you go to Bank of America calm you don't have to log in because the cookie is always sent with each request so the server says hey oh it's you it's it's Barbara so I'm gonna log in Barbara right I don't have to ask her for credentials okay right so that's what you do right you'd really go Bank of America common enter and that makes and the browser have your cookies it will send it with every question we talked about this right that's the basic thing all right now imagine this scenario so there is one way to do anything going to the browser and typing Bank of America right or the browser or the site example.com or anything right and you hit enter yourself there is another way of what if I have a link here that goes to Bank of America right if I have a link literally just click here to visit Bank of America I am on I don't know the Pirate Bay does org okay and then I click on that link that takes me to Bank of America the browser guess what well the browser sent my cookies to Bank of America the question is yes it will send it which is kind of freaky guys if you think about it if you're in a just shady side and this side has a link and you click on the link that's why people tell you don't click links it is really scary guys because if you have cookies like from your bank or whatever and you click that link right the broad remember that that site doesn't have access to your cookie it will never have access to your cookie but it will make you click that link which will will take you to that site with your cookies so it can do bad thing just like that we're gonna talk about out but yeah if you have a link you're gonna send that cookie right all right so let's give let me let me give you an example here ok guys so if I have a link here alright if I have added a link here and I ask you to click on this right and this link has let's say it goes to Bank of America but it doesn't go to banker Frank it come together it's goes to Bank of America calm let's say these guys are lazy and wrote wrote an API called slash transfer money and there is like an and percentage alright it's actually showing about that B of a Bank of America slash that's actually my site but I say there's there is like an API called transfer and there is there an account ID equal blah blah blah and then it's like a money is equal 1 million right let's say if this actually transfers 1 million users that's 100,000 and offense double from your account to account 8888 that's what it does right that's what request it does that right but it's a transfer account from your session right because this is the to account right this is the to account ID okay but you are already logged in right so it will transfer your account from your account right but if you if you are not logged in this will fail if you're logged in this will succeed so if someone have this URL on a shady side and you clicked on it they will for they will like and kind of force your request for your request right to transfer money from your account to their account by one click all right and other bad things can happen as well okay if that's the fifth it's a link if it's kind of it's a post or a get request using fetch then course will take care of that right there that cross-origin resource sharing which we made a whole video about it and you guys loved it right I'm gonna reference that video here hopefully okay so so if you make a request here and you make that request to Bank of America you can you will be blocked because Bank of America say wait a minute you are a shady side you cannot make a request to me right you can't make a post request you can't make a get request right so because that that this this thing this example is kind of it's kind of where was the word for it it's it's contrived guys because this when you do this record and you hit enter it's actually I get requests and nobody in their right mind will make a transfer API as I get requests that's the most insecure thing in the world word plus bad banks now I have all this CAPTCHA and that's why banks suck guys dealing with banks like transferring money you had all to do all these sculptures and captures and all that million certification they have to send you message to their phone just to make sure that it is you right because they don't trust anything and that's a good thing right that's why user experience with banks suck because of this because of the security okay alright guys let's show you how this works I had some same site alright sorry for the loan grant there and all right so we talked about pathway we're gonna do okay go to industry HTML we're gonna add a link and there's one I do a at ref equal I'm going to do example.com go to example.com is alright guys and this is go to WWE my mother I was two guys right these are those two have different cookies so let's see what will happen by refresh now if I click this let's see what cookies will get sent right if I go to application right if I go to example.com look what do we sent we sent we say Nicole one and all her cynical one we send those cookies alright and if I go to this guy we sent those cookies so we're sending cookies from that site okay we're sending all this information even if I am in a in a different side okay so here's what are we gonna do guys what I'm gonna do here is I am going to go to WWE Champ de Skokie's right but I'm gonna create a brand new cookie here on WWE example.com but I'm gonna call it super secret cookie all right equal one and I'm gonna add a property to it called same site equal strict if you do the same side equal strict then you will never get this cookie unless you are in the same site if you're in the same site then the cookie will be sent to the server if you are not in the same side will never be sent to the server okay make sense guys so let's do this cookie we just set a cookie called super-secret cookie - right so now if I go back and refresh go here go Network we can see that that the cookie was not being sent right but if I visit this like normal I say from here okay the ability of an example comm you can see that we got our super secret cookie isn't that pretty cool guys so that's one one way to do a same side cookie that's the one way the other way is to do document.cookie equal kind of more laxed cookie right if we do another cookie same side equal acts that's the other property then that property that cookie will be obviously sent when you go to example.com right lacs cookie but if you go to your fancy side a woman will know that the super secret cookie will not be sent but the last cookie will be set because it doesn't it's kind of more relaxed right it will be sent regardless make sense guys so that's the same side property right so we're done with the property section - it's done all right guys all right let's move on what do we have next all right guys section three cookie types so take this with a grain of salt these are not written on stoned cookie types right these are just the types that I've seen from researching this topic section cookie is the first one and we kind of talked about this I'm not going to demo this because we we have we have seen this session cookie is a cookie that doesn't have a max age or expiry that means if you close your browser your session hands and the browser deletes the cookie right that's that's what it means very simple permanent cookie is a cookie that has a max age set or expiry right which means once you set that expiry date right it can live live if you close the browser if you can live after you restart your server but it obviously if you clearly cookies one live HTTP only this is exciting stuff guys we're gonna talk about this now HTTP only cookies or cookies guess what that can only be set from this server and with this property that's call HTTP only and guess what the browser cannot read them and that's a security I think because if you have a few if someone did an X cross-site scripting attack on you and they cannot really read your session ID or talking fast HTTP or HTTPS HTTP only because these guys are HTTP only and that means it will only get sent to the server you cannot access it from document.cookie feeder do document or cookie you cannot see it right but obviously if you go to the application you can see it right but let's show that let's show some example guys and cause this if I go to my index to GS I'm gonna set it from server here I'm gonna set makes it from server as an HTTP only cookie right so here's what I'm gonna do I'm gonna make another one this no js' can't see this click one one right and we're gonna college DB only I don't remember physical - only or HDTV only if you do that then let's run back refresh either a quest you can see that I have another sit cookie Jess can't see this it's initiative only right that means if I do application Jess cannot see this right but here's a property that you need to see guys here look at that HTTP there's a tech it means this is a she TV only that means if you go to the client is a document dot cookie guess what that's what you get you cannot see that one if someone wrote some code to read the cookies of the current browser right looks like they want to steal the cookie which we will see in the last section right they want to take the cookie and send it somewhere else they cannot because it's an HTTP only cookie you cannot access it with document of cookie so there is no code that allows you to access this right someone will say who's there I can already see it it's right there but this is this is different right this is the console button as a developer said that it will not be available for a hacker or someone right so you cannot write that code to access HTTP only cookies alright guys so you cannot see that so that's that's pretty cool guys but guess what if you do refresh or you make a request you go to this we are sending this puppy with every request so we we kind of sending it but you cannot access it from the JavaScript so if this this is cool for kind of things like tokens session IDs things that you don't want people sniffing but kind of sucks if you like building a game that that relies on JavaScript that you really need to read the cookie like scores you cannot big scores HTTP only that's just I don't know it doesn't work because you need to display the score at some point right into the user so you cannot make the score or the number of kills or whatever so you have to make it into non-http only if you will secure cookie security okay I'm gonna just pass through this it's secure cookies that is another property I can put in the cookie but it is only available for site that are HTTPS right so secure cookies will only be sent to HTTPS domains right protocol okay that's that's the only difference right third party cookies these are what the tracking server's uses to track you okay it's it's not really something special guys right this is if you think about it's not it's not anything special it's just normal cookies but they are available in nested in your in your website so so so you go to my blog for example and if I'm serving you ads then my site would be her saying oh so calm and if there is an ad obviously that ad doesn't live in my site right it lives on somewhere Google ads calm slash whatever right so my site will say another come we'll set cookies for my domain right but that component that JavaScript component will make a request whether it's image whether it's anything else we'll make a request to the Google Analytics domain and we'll sit there on cookies essentially in your site right so ma if I wrote cool in Hosea no SOCOM I cannot really access that do me I cannot really access that cookies but they kind of sitting in your domain so they can they know that you are they are in need in your domain they cannot access your cookies as well but but what happens is they they are kind of tracking you with each of the ophélie requests they have your IP address they have your website and that's pretty much it they don't have more information but they can get some of your information off your browser right so like an ID or whatever but so it's better to show you guys how about that so um if I go to localhost 8080 let's add an image guys how about that alright guys so I just put a cookie image here now what I'm gonna do here is Abdur get if someone visited the slash image I am going to send the image which is cookie PNG but also I am going to select header I'm gonna set a cookie that is called I am tracking you okay and then I'm gonna go to HTML in this direction well then I'm gonna add image source equal HTTP I'm not gonna do local laws and they're the same Mac the local which is my hostname image and that will basically make a request to my side which is the same server or essentially into its socially local hospice with the hosting and that will receive the image and that will also sit a cookie let's see how this will work guys all right guys now that we have refreshed the site for you to developer tools application we have I am tracking you so that's a different domain but it's sitting in my domain right when you can notice that all these kind of third-party this is this is a third party this is a third party this is a third party cookie right and it's like that's previously that's a from a previous session that I had user I had a user cookie here but you can see like that I can't you if you click on this domain which is just localhost think of this as google.com you will not only see stuff from Google that can you see a lot of third party cookie as well right although you are in the same domain but other people are sitting your cookies in your domain for their domain does that make sense I don't know it's it's I don't see this as dangerous thing per se in my opinion because they cannot access they are they're just they're tracking you that's it this image could be might as well just be as JavaScript code right that can read something from here and kind of send it over to them right they cannot access your cookie per se right they might they might because they aren't the kind of the same domain right but you gotta really be careful with these all right if you think about it all right let's jump into the next topic what do we have zombie cookies I'm not gonna show you a demo of this but I'm gonna explain how this work right and it's really interesting alright zombie cookies guys so here's what the definition of zombie cookies are zombie cookies are cookies dad even if you delete them they recreate themselves with the same values right so now if I have a cookie called Husein and have value of one if I go to the browser and say literally flash all my cookies delete them right they don't they're not coming back right the server unless the server since that that were the same bad right but let's say let's say you go to to a site like YouTube calm and YouTube knows you right and we'll go there and they'll sit this is the random session for you right you log in you sit around obsession for you and then that's it you clear that session you go back and that's that butyl doesn't know you anymore that's how supposed to be right but zombie cookies or cookies that are created with the same values because the server knows you from some other pieces of information that you're sending it to could be your IP address could be things like called etags could be like indexeddb database that you have right so just because you clear the cookies that is not really enough people and especially specifically who Lowe's was called out for and they called them doing this doing zombie cookies who know I've been doing this I think with etags and how etags essentially how it works is we made a whole video about it guys I'm gonna refer some cards here so here's how it works etags is a mechanism for caching so here's is just a very brief explanation of etags so if you make a request to a certain resource right their server most of the time right if it's a get request the server will respond with something called if there are the resources cacheable there were response was something called attack it's a tag with random numbers okay and that does string right what the client does what the browser does like it saves it somewhere it's another storage right and what it does is the browser if it makes a request to the same resource like the index.html or an image or anything it's ask the server says hey if not modified but says gives the e-tag right if not match I think this and gives the e-tag and the server checks the attack and checks the resource if that etag and the resource didn't really change it has the same attack like you can think of the caching there the resource to match that hash alright if it didn't change then the server will respond with not an HTTP code 200 with there are three or four instead which is say not modified right and the client what it does is oh that's good if it's not modified um I'm not I'm just gonna use the version that I have is can cache it locally and that's very powerful for saving bandwidth right but here's what houla did I think right so what houla did is they wrote this custom tracking server with etags that doesn't really check our resource it always responds with 3 or 4 code regardless of the resource it doesn't really matter it just responsible 3 or 4 not to modify all the time so guess what the client now always gonna send the same attack you so you only visit houla once right you get an e tag and this e tag sticks with you the whole time unless you find a way to clear eat X which was very hard back in the days now Krum have another way to clear any tax but etags where we're just there right it's not it's not a cookie it's something else right so you get an e-tag and then the browser just sends this e tag all the time right to the server and guess what the server hat just they got you they know who you with this ether they know what you're browsing they you know everything about because they store all this information on the server right so they don't really know they don't really care about your name right but they know you know that you watch Game of Thrones and you're you're binging season up to season season seven right but that's what they need to know they do they won't wait game thrown it's available at all of if it's not so that's the deal but yeah whatever handmade tale right if you're into that thing but yeah if that's how either you do it basically so what they do is like every time even if Lee if you clear your cookies guess what I don't care you gonna send me the e-tag it's the same etag right and if it's the same etag I know you I am gonna send back set cookie hitter right and I'm gonna let you create the same cookie with the same information so I know you I don't even need to use cookies for that matter right it's just like I I have the e-tax right other people use the tracking server to like build strang server with indexeddb we made a whole did you about indexeddb guys right right and that's what was a pretty cool video as well I enjoyed making that right and okay zombie cookies that was it cookies security guys cookie security all right so dart two ways that I know of at least from Sir researching you can steal cookies right and this is the third party cookie that we talked about and stealing cookies is essentially having a JavaScript application or script that literally reads document dot cookie and sends it over to somewhere else all right that's what it did right and we're gonna write some small code to do that and cross-site request forgery which we talked about a little bit with the Bank of America example right so that's the the same site property was added to to to fix this so a cross-site request forgery is essentially a a method where it's a method where I'm not gonna inject any code in your website but I have my own website I have wired Vader org and there is a link that links to Bank of America slash transfer from account money Quan million right and that if you click this link if your cookie is not is not same site it's just regular cookie guess what the browser would be dumb enough to send that cookie right and if it's in that cookie bank of America knows you and it's it's as if like hey but there were such oh you're trying to transfer money to this account sure I'm gonna transfer that money with one click right but we know that's not that's not the case right because there's captures and and all this garbage imageries that they have to do like and mobile verification if you transfer money you see how painful that is anyway but it's still dangerous because some some not only for banks right it's just any application can can take care of this right so you really need to be careful with get requests get requests don't make get requests are supposed to be just read don't make to request that changes the backend they have to be idempotent guys right I don't know if we talked about it important see biology general that's there the HTTP is designed for a reason I have to be ID important man get should not change anything in the server if it changes then it's very dangerous because because a link visit is actually I get requests and if you're making get request that changes something in the server then oh my god you could you could really screw things up right some people can do cross-site request forgery or Chris site scripting that's another type thing and this is not the scope of this video right Christophe scripting is is the ability to inject code to run in a domain that is not supposed to run in right like I will write a code a script then injected into twitter.com and and somehow run it and Twitter right but but yeah that's that's essentially how you can do things right so let's do stealing cookies guys I'm not gonna do with that forgery and we're gonna in this video soon and you can get a few if you made it until here guys kudos guys thank you so much for watching my boring videos right until the end man if you made it into this video I don't know how many hours this thing is being recording but man kudos really cool it for you right that means you really want to learn and I really appreciate that and then and call me out of you before I fees if you see anything that is wrong or obviously I take constructive criticism or trolling for that matter I'm not good at that throw me all you want in the comment section okay alright let's do that here's the final thing we're gonna do all right guys so in order to do that we can we can literally create an anchor here it's called this anchor steel all right then we kill cold steel and then on the script we can just say Const still equal document or get element by ID then a steel then we set the HVF for this guy to be to say a new API that we're gonna create the same Mack got local 8080 still think this is a completely new site right and then we're gonna say V equal literally document.cookie send over that goodies all the good cookies send it over when you click on this all right so now on the index page is we need to we need to make a API call steel right it's not a good thing but for science guys response and then we'll just respond back saying hey I stole your cookies I saved them in my database as well here are they the database is the cookies or request dot query does V that's how you do query parameters again I've got a reference what do you do there difference between query parameters on core strengths we have done all videos about that as well so quite a v right v is the property V let's see if this thing's actually work guys good refresh refresh steal and guess what that's the cookie guys we have just transfer the cookies to somewhere else right to the abbess alright guys that is it for us today guys sorry for the long video but I try to cover as much as possible of the cookies hope you enjoyed this video if you did hit that like button and share it with your friends subscribe for more cool stuff like that sorry about my voice caught it a little flu and cold and and hopefully I get better in the coming days and I'm gonna see you in the next one guys you guys stay awesome good bye

Channel: Hussein Nasser

Views: 52,477

Rating: 4.9391251 out of 5

Keywords: http cookies, cookies by example, cookies tutorial, session cookies, httponly cookies, cookie domain, http cookie tutorial, cookie javascript tutorial, learn cookies tutorial, zombie cookies, types of internet cookies, set-cookie header, document.cookie

Id: sovAIX4doOE

Length: 69min 20sec (4160 seconds)

Published: Wed May 01 2019