Wirebook

Wirebook › Lesson 18 of 18

What is a cookie on a website?

About 7 minutes · hands-on · nothing you type leaves your browser unless a button says so

Websites have terrible memories. Every time your browser asks for a page, the website has no idea it has ever met you before. So how does a shop remember what's in your basket, or a game remember you're logged in? With a cookie: a tiny note the website asks your browser to keep and hand back next time. Here you get to watch the cookie jar fill up, then follow a sneaky tracker from site to site.

Fill the cookie jar

This is a pretend café website inside a pretend browser. Press the buttons and watch three things: what the café's page says, the notes in your browser's cookie jar, and the messages going back and forth. Nothing here is a real cookie: it all happens in this page.

pancake-cafe.example

Your browser's cookie jar is empty. Visit the café.

🍪 Your browser's cookie jar

    ✉️ The last messages

    Your browser sent:

    (nothing yet)

    The café replied:

    (nothing yet)

    How a cookie works

    1. You visit. Your browser asks for the page. The website doesn't know who you are.
    2. The website hands over a note. Its reply includes a line like Set-Cookie: basket=2-pancakes, which asks your browser to keep that note.
    3. Your browser hands it back. On every later visit to that same website, the browser adds Cookie: basket=2-pancakes to its message. Now the website "remembers" you.
    4. Some notes vanish, some stay. A session cookie is thrown away when you close the browser. A cookie with an expiry date (like "remember me for 30 days") stays until then, or until you clear it.
    The golden rule: a cookie only goes home. Your browser hands each note back only to the website that gave it. The café can't read the zoo's cookies, and the zoo can't read the café's. But there's a sneaky way round that rule…

    Follow the tracker

    Three pretend websites all show adverts from the same ad company, ads-everywhere.example. The ad is a tiny piece of that company's website tucked inside each page, so it can hand your browser its own cookie. Visit the sites and read the ad company's notebook.

      Visit a site to begin.

      📒 The ad company's notebook

        First-party and third-party cookies

        A first-party cookie comes from the website you're actually on, like the café remembering your basket. Mostly helpful. A third-party cookie comes from some other company whose bits are tucked inside the page: an advert, a "like" button, a video player. Because the same company is tucked inside thousands of websites, its one cookie can link your visits together into a list of what you're interested in. That's how an advert for penguin pancake pans can follow you from a recipe site to a zoo site.

        That's why many browsers now block third-party cookies or give the ad company a separate jar for every website, so the notes can't be joined up. The ad company sees three strangers instead of one person.

        What your browser tells every website anyway

        Even with no cookies at all, your browser shares some ordinary facts so pages can look right. These were worked out right here in your browser; this page sends them nowhere.

        Working it out…
        One moment.

        Each fact on its own is shared by millions of people. Put lots of them together, though, and the mix can be fairly unusual. Using that mix to recognise a browser without cookies is called fingerprinting, and privacy-minded browsers try to blur it.

        Should you clear your cookies? Clearing them logs you out and empties baskets, but it also wipes tracker notes. A good middle path: let websites you trust remember you, block third-party cookies in your browser's settings, and say "reject" to cookie pop-ups you don't need. Building a website yourself? Tooltern's free Set-Cookie explainer shows what every cookie setting does. This site, for the record, sets no cookies at all; your lesson stamps live in your browser's own storage and never leave it.

        Words from this lesson

        Earn your stamp

        Get all 3 right to collect the Cookies stamp. Wrong answers are fine: just try again.

        1. What is a website cookie?

        2. You add pancakes to a basket, then close the browser. The basket is empty when you come back. Why?

        3. How can one ad company know you visited a recipe site and a zoo site?

        Try another lesson

        1. 1What happens when you open a web page?6 min · interactive
        2. 2Anatomy of a web address5 min · interactive
        3. 3Can a website get tired?7 min · interactive