How cookies work in HTTP in Flask - Visual Walkthrough

Concept Flow - How cookies work in HTTP

Client sends HTTP request

↓

Server checks for cookies

↓

Server sends HTTP response with Set-Cookie header

↓

Client stores cookie

↓

Next client request includes Cookie header

↓

Server reads cookie and customizes response

This flow shows how a client and server exchange cookies via HTTP headers to remember information across requests.

Execution Sample

Flask

from flask import Flask, request, make_response
app = Flask(__name__)

@app.route('/')
def index():
    username = request.cookies.get('username')
    resp = make_response(f'Hello {username}')
    resp.set_cookie('username', 'Alice')
    return resp

This Flask code sets a cookie named 'username' and reads it on subsequent requests to greet the user.

Execution Table

Step	Action	Request Headers	Response Headers	Cookie Stored	Output
1	Client sends first request	No Cookie header	Set-Cookie: username=Alice	username=Alice	Hello None
2	Client sends second request	Cookie: username=Alice	Set-Cookie: username=Alice	username=Alice	Hello Alice
3	Client sends third request	Cookie: username=Alice	Set-Cookie: username=Alice	username=Alice	Hello Alice
4	No more requests	N/A	N/A	username=Alice	Session continues with cookie

💡 Execution stops when client stops sending requests or closes session.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
username cookie	None	Alice	Alice	Alice	Alice
request.cookies.get('username')	None	None	Alice	Alice	Alice

Key Moments - 3 Insights

Why does the first response greet with 'Hello None'?

At step 1 in the execution_table, the client has not sent any cookie yet, so request.cookies.get('username') returns None.

How does the client remember the cookie for the next request?

After step 1, the response includes 'Set-Cookie: username=Alice', so the client stores this cookie and sends it in the next request header as shown in step 2.

Why does the server keep sending Set-Cookie header on every response?

In this example, the server sets the cookie on every response to refresh or update it, as seen in response headers at steps 1, 2, and 3.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'username' cookie after step 1?

A Bob

B None

C Alice

D Empty string

💡 Hint

Check the 'Cookie Stored' column at step 1 in the execution_table.

At which step does the client start sending the cookie back to the server?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Request Headers' column to see when 'Cookie: username=Alice' appears.

If the server did not send 'Set-Cookie' header in the response, what would happen to the cookie?

A Client would keep sending the old cookie

B Client would delete the cookie immediately

C Client would never send any cookie

D Server would receive empty cookie

💡 Hint

Refer to how cookies persist on the client side unless expired or deleted.

Concept Snapshot

HTTP cookies are small data sent by server in 'Set-Cookie' header.
Client stores cookies and sends them back in 'Cookie' header.
Server reads cookies to remember user info across requests.
In Flask, use request.cookies to read and response.set_cookie to set cookies.
Cookies enable session-like behavior over stateless HTTP.

Full Transcript

This visual execution shows how HTTP cookies work between a client and a Flask server. Initially, the client sends a request without cookies. The server responds with a 'Set-Cookie' header to store a cookie named 'username' with value 'Alice'. The client saves this cookie and includes it in the 'Cookie' header of the next request. The server reads this cookie and uses it to personalize the response. This cycle repeats, demonstrating how cookies help maintain state in HTTP. The execution table tracks headers and cookie values step-by-step, while the variable tracker shows how the cookie value changes from None to 'Alice'. Key moments clarify why the first greeting lacks a username and how cookies persist. The quiz tests understanding of cookie storage and transmission. This example uses Flask's request.cookies and response.set_cookie methods to handle cookies simply and clearly.

Practice

1. What is the main purpose of cookies in HTTP when using Flask?

easy

A. To store small pieces of data on the user's browser for later use

B. To increase the speed of the Flask server

C. To encrypt user data on the server

D. To manage database connections automatically

Solution

1. Step 1: Understand what cookies do in HTTP

   Cookies store small data on the user's browser to remember information between requests.

2. Step 2: Identify Flask's use of cookies

   Flask uses cookies to save user preferences or login info on the client side.

3. Final Answer:

   To store small pieces of data on the user's browser for later use -> Option A

4. Quick Check:

   Cookies store data on browser = D [OK]

Hint: Cookies save small data on browser, not server speed [OK]

Common Mistakes:

• Thinking cookies speed up the server
• Confusing cookies with encryption
• Assuming cookies manage databases

2. Which Flask method is used to set a cookie in the HTTP response?

easy

A. request.set_cookie()

B. request.cookies()

C. response.set_cookie()

D. response.cookies()

Solution

1. Step 1: Recall Flask's cookie setting method

   Cookies are set on the response object, not the request.

2. Step 2: Identify the correct method

   The method to set a cookie is set_cookie() on the response object.

3. Final Answer:

   response.set_cookie() -> Option C

4. Quick Check:

   Set cookie on response = C [OK]

Hint: Set cookies on response, read from request [OK]

Common Mistakes:

• Using request.set_cookie() instead of response.set_cookie()
• Confusing request.cookies() as a setter
• Using response.cookies() which does not exist

3. Given this Flask code snippet, what will be printed when the client sends a cookie named 'user' with value 'Alice'?

from flask import Flask, request
app = Flask(__name__)

@app.route('/')
def index():
    user = request.cookies.get('user')
    return f'Hello, {user}!'

medium

A. Hello, Alice!

B. Hello, !

C. Hello, None!

D. Hello, user!

Solution

1. Step 1: Understand how Flask reads cookies

   The code uses request.cookies.get('user') to get the cookie value named 'user'.

2. Step 2: Check the cookie value sent by client

   The client sends a cookie 'user' with value 'Alice', so user variable will be 'Alice'.

3. Final Answer:

   Hello, Alice! -> Option A

4. Quick Check:

   Cookie 'user' = Alice, output = A [OK]

Hint: request.cookies.get('name') returns cookie value or None [OK]

Common Mistakes:

• Assuming cookie value is None if present
• Forgetting to use .get() method
• Confusing cookie name with literal string

4. What is wrong with this Flask code that tries to set a cookie?

from flask import Flask, request
app = Flask(__name__)

@app.route('/')
def index():
    response = 'Hello'
    response.set_cookie('theme', 'dark')
    return response

medium

A. The cookie name 'theme' is invalid

B. You cannot set cookies on a string response object

C. The set_cookie method requires a third argument

D. Flask does not support cookies

Solution

1. Step 1: Identify the response object type

   The variable response is a string, not a Flask response object.

2. Step 2: Understand how to set cookies in Flask

   Cookies can only be set on a response object, like one created by make_response(), not on a plain string.

3. Final Answer:

   You cannot set cookies on a string response object -> Option B

4. Quick Check:

   Set cookies on response object, not string = B [OK]

Hint: Use make_response() to set cookies, not plain strings [OK]

Common Mistakes:

• Trying to set cookies on string instead of response object
• Thinking cookie names must be special
• Believing set_cookie needs extra arguments always

5. You want to create a Flask route that sets a cookie named 'visited' with value 'yes' that expires in 1 day. Which code correctly does this?

hard

A. from flask import make_response
@app.route('/')
def index():
resp = make_response('Welcome')
resp.cookies['visited'] = 'yes'
return resp

B. @app.route('/')
def index():
response = 'Welcome'
response.set_cookie('visited', 'yes', max_age=86400)
return response

C. from flask import request
@app.route('/')
def index():
request.set_cookie('visited', 'yes', max_age=86400)
return 'Welcome'

D. from flask import make_response
@app.route('/')
def index():
resp = make_response('Welcome')
resp.set_cookie('visited', 'yes', max_age=86400)
return resp

Solution

1. Step 1: Identify how to create a response object

   Use make_response() to create a response object to set cookies.

2. Step 2: Set cookie with expiration

   Use set_cookie() with max_age=86400 (seconds in 1 day) to set expiration.

3. Step 3: Check each option

   from flask import make_response @app.route('/') def index(): resp = make_response('Welcome') resp.set_cookie('visited', 'yes', max_age=86400) return resp correctly uses make_response and set_cookie with max_age. Others either set cookie on string or request or use wrong syntax.

4. Final Answer:

   resp.set_cookie('visited', 'yes', max_age=86400) -> Option D

5. Quick Check:

   Use make_response + set_cookie + max_age = A [OK]

Hint: Use make_response and set_cookie with max_age for expiry [OK]

Common Mistakes:

• Setting cookie on string instead of response object
• Trying to set cookie on request object
• Using resp.cookies dict instead of set_cookie method