Bootcamp
Search…
3.5.1: Cookies

Introduction

Cookies are a browser-side feature that will hold onto data received by servers and send it in subsequent requests.
Cookies are one of the main technologies that enables basic functionalities like user login, and is one of the main ways that you are tracked across the internet for the purpose of ads, although that is currently changing, with laws and technical developments. See more about that here and here.

Headers

Specifically cookies are keyed to specific response headers and request headers.
If the browser receives a properly-formatted response header, it will store a given set of cookie data.
On every new subsequent request on the same domain, it will send that data back in the header of the request.
  1. 1.
    The browser receives a response back from the server. This response header has the Set-Cookie key in it. The Set-Cookie key's value is a set of keys and values that contain cookie data and metadata.
  2. 2.
    The browser stores that set of keys and values.
  3. 3.
    The browser makes another request to that domain. Inside the request headers are the cookie keys and values.
The most important part of this mechanic to understand is that the instruction to set the cookie is in the response header to a request.

Incognito Mode

The defining characteristic of Incognito Mode is that its cookie environment is separate from the non-Incognito cookie environment (i.e., cookies are not mixed between the two). Every new Incognito window has a new cookie environment.
Open Incognito mode and open the Dev Tools. Go to https://www.google.com/ and look in the Network tab.
Look for the Set-Cookie header in the response. Look in the request header. It doesn't say anything about cookies.
Go to another Google domain address: https://www.google.com/doodles/​
Look in the request headers to see the cookies that the browser was previously instructed to hold, being sent back.
Look in the Application tab to see the set of all cookies for this domain. Click around the www.google.com domain to see that these cookies are being sent on every subsequent request.

Curl

Send a cookie with curl. This is to test our server's cookie-receiving functionality without having to use the browser environment. -v stands for verbose. myAuthToken and myAdsTrackingId are fictional cookies.
1
curl -v --cookie "myAuthToken=123;myAdsTrackingId=456" http://localhost:3000/recipe/1
Copied!

Express

Create a GET route for each of the cookie actions below. Check the Chrome Dev Tools Application tab after each request.
1
response.cookie('name', 'tobi');
2
response.cookie('weight', '230');
Copied!
1
response.clearCookie('name');
Copied!
Notice that the cookie value in the header is all the cookies together in a single string. Express pre-parses request headers for us and puts all cookie headers into the request.headers.cookie attribute.
1
console.log(request.headers);
2
console.log(request.headers.cookie);
Copied!

Exercises

Log Out by Deleting Cookies

Go to the Application tab of the Chrome Dev Tools. Navigate to a website that you have a login for, and remember the password to.
Delete all the cookies for this domain to see that you get logged out.

Clear Shopping Cart by Deleting Cookies

Open an incognito tab and go to amazon.com. Add something to the shopping cart.
Go to the Application tab of the Chrome Dev Tools. Delete all the cookies for Amazon and refresh the page. Your cart will empty.

Count User Visits

Set a cookie each time a user visits the URL /home.
1
app.get('/home', (request, response) => {
2
response.cookie('visits', 1);
3
response.send(`Current cookie key and value: visits: ${visits}`);
4
});
Copied!
In order to "count" the visits we'll increment the current value of the cookie for every request.
We need to install a library cookie-parser to parse the cookie string value in the header into a JavaScript Object. More information on cookie-parser functionality here.
1
npm install cookie-parser
Copied!
Configure it:
1
import cookieParser from 'cookie-parser';
2
​
3
app.use(cookieParser());
Copied!
This creates a separate key inside of request.cookies for every cookie inside of the request. In this case, we care about the visits cookie.
1
console.log(request.cookies.visits);
Copied!
Update application logic so that the value in the visits cookie increases with each request.
1
let visits = 0;
2
​
3
// check if it's not the first time a request has been made
4
if (request.cookies.visits) {
5
visits = Number(request.cookies.visits); // get the value from the request
6
}
7
​
8
// set a new value of the cookie
9
visits += 1;
10
​
11
response.cookie('visits', visits); // set a new value to send back
12
​
13
response.send(`Current cookie key and value: visits: ${visits}`);
Copied!

Further Reading

Past students have found these videos helpful in understanding cookies.