쿠키(Cookie)의 개념과 실전 예제Cookies: Concepts and Hands-On Examples

HTTP Is Stateless

The HTTP protocol is stateless by design. Each request is independent, and the server doesn’t remember anything about previous requests. That caused problems like these:

• After a user logs in, the login isn’t kept when they move to the next page
• Items added to a shopping cart vanish when you move between pages
• User preferences can’t be saved

Cookies are the key mechanism that lets you keep state on top of this stateless protocol.

Cookies

A cookie is a small piece of text data that a web server stores in the user’s browser. This data plays an important role in keeping state information between the server and the client.

Where the Name “Cookie” Comes From

In 1994, Lou Montulli, a programmer at Netscape Communications, needed a mechanism to store and keep information between web browsers and servers, and he introduced the concept of cookies for the first time.

The name “cookie” comes from the resemblance to a fortune cookie: just as a fortune cookie holds a message inside, a cookie is a small piece of data that carries information.

> Lou Montull – the inventor of the browser cookie

What Cookies Do

Cookies are small amounts of data that websites use to remember user activity, stored in the user’s browser. Their main jobs are:

• Keeping users logged in
• Saving user preferences (language, theme, etc.)
• Keeping shopping cart contents
• Tracking and analyzing user behavior

How Cookies Work

Cookies work like this:

1. The server sets a cookie through the Set-Cookie field of the HTTP response header.
2. The browser stores the cookie.
3. From then on, every time it sends a request to the same server, the browser includes the value in the Cookie field of the HTTP request header.

Example Server Response Header

HTTP/1.1 200 OK
Set-Cookie: user_id=12345; Max-Age=3600; Path=/

Example Client Request Header

GET /profile HTTP/1.1
Host: example.com
Cookie: user_id=12345

How to Follow Along

Using your browser’s Dev Tools, you can check the information below to see a cookie’s settings, and edit or delete it. Press F12 on your keyboard to open the Dev Tools window.

• Server response header
• Client request header
• Cookies

Dev Tools: Network Tab

In the Network tab, you can see the server response headers and client request headers. Watch how the values below travel back and forth in each header.

• Server response header - set-cookie
• Client request header - cookie

> Check the headers in Chrome's Network tab

Dev Tools: Application Tab

In the Application tab, you can view cookies and change or delete their values. Let’s watch how cookies change with their various attribute values.

> Check the cookies in Chrome's Application tab

Hands-On Example

Here we’ll inspect and test cookies with FastAPI and the browser’s Dev Tools. First, install the packages you need with the command below.

Installing Packages

$ pip install fastapi "uvicorn[standard]"

Source Code

FastAPI sets cookies with the Response.set_cookie() method, which lets you configure the various cookie options.

from datetime import datetime, UTC
from fastapi import FastAPI, Response, Request
from fastapi.responses import HTMLResponse

app = FastAPI()

# endpoint that sets the cookie
@app.get("/set_cookie")
async def set_cookie(response: Response):
    response.set_cookie(
        key="user_id",
        value="tiaz",
    )
    return {"message": "Cookie has been set!"}

# endpoint that reads the cookie
@app.get("/get_cookie")
async def get_cookie(request: Request):
    user_id = request.cookies.get("user_id", "none")  # read the cookie
    theme = request.cookies.get("theme", "none")
    return {"user_id": user_id, "theme": theme}

# HTML page for testing
@app.get("/", response_class=HTMLResponse)
async def home():
    return """
    <html>
        <body>
            <h1>FastAPI Cookie Test</h1>
            <a href="/set_cookie">Set cookie</a><br>
            <a href="/get_cookie">Check cookie</a>
        </body>
    </html>
    """

Running the Server

Start the server with the code you wrote. Then open the address below in your web browser.

$ uvicorn main:app --reload

http://127.0.0.1:8000/

Now let’s try out the various cookie settings and see what each attribute does.

Key Cookie Settings

The key cookie settings are:

• Cookie name and value (key-value)
• Expiration and lifetime (Expires, Max-Age)
• Domain and path restrictions (Domain, Path)
• Security attributes (Secure, HttpOnly, SameSite)

key-value (required)

• The cookie’s name (string)
• The value stored in the cookie (string)

response.set_cookie(
    key="user_id",
    value="tiaz",
)

max_age

• How long the cookie is valid (in seconds, integer)
• Without a value, the cookie is deleted when the browser session ends (session cookie)

response.set_cookie(
    key="user_id",
    value="tiaz",
    max_age=30,
)

expires

• The exact date/time the cookie expires
• When used together with max_age, max_age takes precedence

response.set_cookie(
    key="user_id",
    value="tiaz",
    expires=datetime(2025, 12, 31, tzinfo=UTC),
)

Session Cookies

A persistent cookie is one that has an Expires or Max-Age attribute and lasts for a set amount of time. Conversely, a cookie without Expires or Max-Age is called a ‘session cookie’.

path

• The URL path where the cookie is valid
• Default: “/” (usable on every path)
• Example)
  • path=”/get_cookie” (the cookie is used only on that path)
  • On path=”/”, the cookie isn’t set in the Request header

response.set_cookie(
    key="user_id",
    value="tiaz",
    path="/get_cookie",  # path where the cookie is valid
)

domain

• A domain restriction: specifies the domains the cookie can be sent to
• “Only include this cookie when the browser sends a request to this domain”
• Default: the current hostname of the server setting the cookie (excluding subdomains) → “127.0.0.1”
• Example)
  • With domain=”localhost”
  • When you visit “localhost” in the browser, the cookie is stored
  • When you visit “127.0.0.1” in the browser, the cookie is not stored (treated as a different domain)
  • This happens because of the browser’s security policy restricting cookie sharing across domains

response.set_cookie(
    key="user_id",
    value="tiaz",
    domain="localhost", # the browser stores the cookie only when visiting localhost
)

Cookie Security Settings

Cookie security settings are especially important. Even in real-world projects, people frequently make mistakes when setting and using these attributes. Let’s understand exactly what each attribute means and how it behaves, and try them out.

secure

• When set to True, the cookie is sent only over HTTPS connections
• A must in production environments for stronger security

response.set_cookie(
    key="user_id",
    value="tiaz",
    secure=True
)

• Local development exception: for convenience during development, most browsers (Chrome, Firefox, Edge, etc.) allow cookies with the Secure attribute on localhost and 127.0.0.1 even without HTTPS.

• Production: on real internet domains, a cookie with Secure=True won’t be set unless you use HTTPS.

httponly

• When set to True, JavaScript can’t access the cookie
• Prevents XSS (Cross-site scripting) attacks

response.set_cookie(
    key="user_id",
    value="tiaz",
    httponly=False
)

With httponly=False, you can access and even change the cookie value from the browser console. When it’s True, you can’t.

document.cookie = 'user_id=test1234'

samesite

This setting controls whether the browser sends the cookie along with requests made from other sites.

• Values
  • “strict”: send the cookie only on same-domain requests
  • “lax”: allow some cross-site requests (e.g. clicking a link)
  • “none”: send the cookie on every request (requires secure=True)
• A setting for preventing CSRF attacks

response.set_cookie(
    key="user_id",
    value="tiaz",
    samesite="strict",
)

Wrapping Up

We’ve covered the concept of cookies as a way around HTTP’s stateless nature, how they work, and how to implement them in practice. A cookie is just simple text data, but it plays an important role in keeping the user experience going in web applications.

Besides cookies, there are many other ways to keep state in web applications. Next time, let’s look at the approaches below! Thanks for reading. 😊

• Server Session
• Web Storage
• JWT (JSON Web Token)
• IndexedDB
• URL parameters/query strings

References

• precisionreach.com - Cookie-Less Advertising: What’s Coming and How Should You Prepare?
• mdn web docs - Using HTTP cookies