Register to get access to free programming courses with interactive exercises

Cookies HTTP Protocol

HTTP is a stateless protocol. This means that each request-response pair is unrelated to the previous request-response. In real life, this often turns out to be rather inconvenient, since sometimes we need to remember the user's authentication details or, for example, store a user's shopping cart in an online store. Here, the following problem arises: How do you get the system to remember that this is a user we've only just worked with? The solution to this problem was found more than 10 years ago, when the cookie was invented.

Let's make a request to the Hexlet website and see how this mechanism works. We'll use curl. It allows you to make HTTP requests and manage their various parameters using flags. Unlike with telnet we don't need to establish a connection in advance and then type a raw request. When working with curl you can immediately define the parameters, and it'll send all the necessary request headers, including HTTPS.

Let's execute a request to get only headers, to do this, add the --head flag when running curl.

curl --head https://hexlet.io

HTTP/2 200
server: nginx/1.19.1
date: Thu, 16 Jul 2020 03:38:11 GMT
content-type: text/html; charset=utf-8
vary: Accept-Encoding
x-xss-protection: 1; mode=block
x-content-type-options: nosniff
x-download-options: noopen
x-permitted-cross-domain-policies: none
referrer-policy: strict-origin-when-cross-origin
strict-transport-security: max-age=0
x-frame-options: ALLOW-FROM http://webvisor.com
etag: W/"eb99fa0d6ee702b85ba2a5e9b0425aea"
cache-control: max-age=0, private, must-revalidate
content-security-policy:
set-cookie: _hexlet_session2=AiUPd6RFbcrnoGnZSLAYSBzdJqxsQ4sTc%2BW0xXuOKzlenyv5GwkkbpdkD6IVDybDlD8vQcOcgGax98%2FmzIBJrz9f%2BDIJxWRpknZsRSfBXuC9yRfndovBUG6w4fTql4qp7zPozd2veFDLOU4koPVYiUQxgBLM6NkyYg%2Bhs%2BQe%2FSZezleVgMBVD%2FFC070DjV7t2eN01o26kcbd0pQsf9k1LE4JN0aDzSxu8elxLyAWkIJ5l3m%2BcI%2BpgOxk87Uwh9WdTHVuDaraiRaVJz1aZq5hr%2FgzaZiK%2Bgi6ChX60nhha1an610b1v3EE7xgkEM332uFPU0w675fHEr4APTdPDVtJRa3--qQi0cqcljC8i4klD--fXTErw9bhX7%2Fd1xfPE4Gww%3D%3D; domain=.hexlet.io; path=/; expires=Sun, 16 Aug 2020 03:38:11 GMT; secure; HttpOnly; SameSite=Lax
set-cookie: GCLB=CLTE8bzdlaS6Zg; path=/; HttpOnly; expires=Thu, 16-Jul-2020 03:39:50 GMT
x-request-id: 2f554de2-a21d-4e7d-964e-085914ac3f77
x-runtime: 0.056974
access-control-allow-origin: *
via: 1.1 google
alt-svc: clear

We can see two headers that deal with setting cookies — set-cookie. Note that each cookie is sent in a separate header. As such, there may be a lot of headers. Inside the cookie is a key=value pair, separated from the additional parameters by a semicolon. Cookies are stored client-side in the browser and are sent back to the server then next time a request is made. They're not used directly in the browser in any way. A good analogy is to imagine that you were given a tag after handing your jacket in at a cloakroom, and then using it to find out which jacket is yours. Additionally, the number itself is of no value and cannot be used independently.

Cookies are divided into at least two types:

  • Session
  • Permanent

Session cookies are not set in our request, as we can see additional parameters in the set-cookie header. If they didn't exist, then cookies would be called sessions. Their main difference between session and permanent cookies is that as soon as the browser closes, the cookie is deleted. For example, on some sites, if you don't check the “remember me” box, and then close the browser, the next time you go to the site to log in, you'll have to go through the process again. This happens because a session cookie is used.

Cookie lifetime

In this case, permanent cookies are set. They're stored on the hard disk, and their storage location may vary depending on the browser. Such cookies differ from session cookies in that you can control their lifetime using the expires parameter.

expires=Thu, 16-Jul-2020 03:39:50 GMT;

The expires parameter specifies the date the cookie should be deleted, after which it won't be sent to the server. It's worth mentioning that there's another parameter that is used for the same purpose — MAX-AGE. Its value indicates the number of seconds after which the cookie will be deleted.

MAX-AGE=2592000;

Since some browsers don't support MAX-AGE, some frameworks often set both parameters at once and browsers simply ignore the one they don't need. Thus, a set-cookie, header containing two parameters, MAX-AGE and expires, is considered valid. The standard also says that cookie names are not case-sensitive.

Domain and path parameters

The domain and path parameters set the scope of the cookie, i.e., the URLs to which the cookie can be sent. If they're not set, then by default the cookie will be forwarded to the server only for the current path and domain. In our example, the root of the site is specified in path.

domain=.hexlet.io; path=/;

That is, the cookie will be sent for all pages. There is a nuance if domain=.hexlet.io, is set, and having a dot before the domain name doesn't mean anything to the domain name itself, then the cookie will work not only for all of the site's pages, but also for all subdomains. And if we don't set the domain, parameter at all, although by default its value will be hexlet.io, then the cookie won't work for the subdomains.

The uniqueness of cookies is determined by three parameters key (cookie name), domain and path. This means that if a cookie needs to be set again, for example, to change its lifetime, then these parameters must match in set-cookie when the next request is made. If at least one of them is different, a new cookie will be set.

Deleting cookies

There is no header for deleting cookies, to delete it, you need to set MAX-AGE, to zero or a negative number, or set expires in the past, then the cookie will be deleted immediately.

You may have noticed that in our example, the additional parameter HttpOnly. HttpOnly is set. HttpOnly cookies are passed with AJAX requests, but they cannot be retrieved via JavaScript on the website page. This is an additional layer of security against XSS attacks.

Sending to the server

After we refresh the page in the browser, the next header is sent:

cookie: GCLB=CLiC7uWajOOrzAE; _hexlet_session2=gu3n8MCidqZ28VfjpzJuF74d4ohla6uYq9Q%2B2XBcalsa3VUCzURBWTXvscuzSI%2BF3lnHAN%2FUt6IJnXgkH%2B6jDKgyStVb8W%2BLHwIbypoxajN3fB5ksFT3Qu28RvDQpL6hBmqq7V2eFdfLMGtkmtcpfAUYNGffwaBAlQyQKnvhkCpEf5IIWkwWfe9Nt8dG3lIueeir9fGxZP7Fpcw9IP9HfgSansgXugtFI1rw06UhgrrK%2BEnaf4EmIgVdH6KYpDBKXpUUXz8vFRvkOMX5j%2BZNMTu%2BKDBzmGlFjcm1mCZl4ozZWDCocFO4CTW7z9LmzKYbcEGkUEhRbOu%2BTvLgVo80LilK--x3y6jxx%2FjYcLp5tr--9nrQ0XmAhtGAuIFvMYvWig%3D%3D

All cookies are sent with one header in the format key=value; key=value without additional parameters.


Recommended materials

  1. HTTP Cookie / Mozilla
  2. HTTP Cookie / Wikipedia
  3. RFC 6265: Cookie Standard

Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From a novice to a developer. Get a job or your money back!

Frontend Developer icon
Profession
beginner
Development of front-end components for web applications
start anytime 10 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.