Cookies and Chrome
Ray Deck shows how websites track users by storing data in your browser. He walks through Chrome DevTools to inspect localStorage, sessionStorage, and cookies, then adds a new cookie and explains how analytics services like Google and Facebook use them to follow you across the web.
Chapters
So how does a webpage know who you are? You go, you sign in, just like I signed in here to WeWeb and I'm working in my current instance. How, how does it know who you are? How does it know who our customers are when you look about, look at this a little bit more under the covers? What I would like to do today is sort of show you how a webpage knows who you are and how it thinks about things that's going to keep on your webpage as you go from page to page. And the tools you can use, maybe goof around with that a little bit. So if we're going to look at what's called DevTools here in my Chrome browser, ordinarily it wants me to be able to inspect elements. That's a very interesting thing for us to do. We'll do it another time. But I want us to take a look at two key places here. One is called Console and one is called Application. We're gonna start with Console because Console can be a great way to sort of get to experiment with how the browser is thinking. So we have lots of, you know, messages in here and probably a lot of errors. And some of these are gonna have to do with like extensions you might have running or with telemetry systems that whatever the services has in place. I wouldn't worry too much about those. That's one of the reasons why I'll often clear those out here to understand more about what's going on. And if I do window, window is the global scope and I can find out what's inside it. And, you know, learn all these different things that have been added to my window. For example, there's add-dev-to-dev-component, which is something that is part of the, the WeWeb environment. You can go explore more of that. It obviously has Axios installed, which is a library for fetching data from, from the web. And some of these things are built in. You can learn more about those. But a couple things I want us to pay particular attention to. One is called localStorage. And localStorage is a very popular place for services to put data that isn't just stored on the page, but it's gonna be staying with your local environment. In fact, it's a pretty common place to store things like your tokens or information, for example, for, you know, what it has from Iconify or things it might have from WeWeb, WeWeb editor, and what my current actions are. All of these are gonna be stored as strings. So some of them are stored as JSON-encoded strings, which can also be interesting things to look at, look at. As well. And the, so when you're wondering about what's going on inside, that's one place to look. There's also a thing called, you know, session storage, which is a little bit more limited in what's actually stored in there. You can see that it's not used nearly as often and has right now a length of 0. There's nothing inside it. And then there are the cookies and you can do that for document.cookies. Cookie. And oh wow, hey, there's lots of stuff in here. Now, the cookie is stored as a big old string that is going to be about the relationship between your client and the eventual server. And you know, you're going to find it's a sort of set of key-value pairs, right? There's a key called GA and a value called, you know, GA1 blah blah blah for Google Analytics. And this is for, for FBP. This is Facebook. Pixel, and then you sort of see how they all split out. So a fun thing we can do here is we can say split on semicolon and then start to see, oh, well, hey, look, all these guys that are in here have, there's this one, this one, this one, and what the actual users are, who might be stored. You can see there's a WeWeb has some sort of socket service that we can start to explore and understand more about how that works. We can also inject cookies into here by using document.cookie and then equals, and then we create a new one that looks along these lines. So I can say, you know, document.cookie equals, you know, Ray equals YouTube, right? And then if I were to then take a look at my cookies again, you'd see my Ray YouTube sitting here right here at the top, document.cookie, and you see it got added to all the rest of these as well. So this is where cookies get stored, which is just, you know, more strings that have a relationship now with the server on the other end. And this, and so localStorage and cookie are the two most popular places to be storing this kind of information. A second thing that you can look at that gives you some insight is going to be over here on do-do-do-do application. An application also lets you take a look at local storage. And one of the really important things about this is that local storage is about the relationship between the, between your client and different servers. It is actually what's called domain specific. So specific to things that are in editor.weebly.io. And when it's talking and getting like a little Stripe component for the purpose of managing payment or whatever, what, what actually has for Stripe and there's no more for Stripe Network, I guess. You can see session storage. Yeah, nothing interesting in here. Oh hey, look, Stripe Network uses session storage in a way others don't. And this sort of gives you more things you can look at just to explore, to see how these servers, how these systems are talking to each other. And then of course you have the cookies and you'll notice that this, unlike the other stringy based one, much easier to work with. And also gives you an easier way to inject the cookies because you can change any of these by editing right in here. And of course my, you know, Grammarly really wants to get in the way of all that. Yeah. Okay, fine. And then the, and then down here you can actually create a new one by creating a new key and new value. This becomes very handy in other circumstances, like especially if you're using, have iframes involved and you have to in the you know, the main window is going to one server and there's an iframe that goes to another server. This interface here allows you to work with those other cookies. Look, all this is a complicated topic. Uh, and there are lots of different things that you, that are going on here. You have local storage, you have session storage, you have cookies. You can be looking at the cookies from the point of view of your console. You can be looking at the application. You have these different servers that are working with the, uh, and we can get more into detail on those in future videos. And of course we talk about this fairly routinely in the StateChange community. But what I would encourage you to do is to open up your DevTools by right-clicking and saying Inspect, clicking on Console, and clicking on, you know, Application for your, to be able to explore and see what this information looks like. I find, you'll find that the more you look and the more you're curious about how these things work, about how these systems are interacting with each other, the more you'll get sort of a mental model, right, of how these web systems work, and the more you will be able to understand things without having to go and implement a whole lot of code because you understand the underlying data.
