HTTP cookies are small pieces of data stored on the client side (your browser) that websites use to remember information about you.
They play a vital role in web browsing, enabling functionalities like logging in, saving preferences, and tracking analytics.
What Are Cookies?
Cookies are like bookmarks for websites, helping them remember things such as:
- Your login session
- Site preferences
- Shopping cart contents
- Analytics tracking info
Every time you revisit a site, your browser sends these cookies back to the server, allowing the site to "remember" who you are.
Anatomy of a Cookie
A cookie consists of the following parts:
- Name: The key identifying the cookie.
- Value: The data stored by the cookie.
- Domain: Specifies which domains can access the cookie.
- Path: Specifies the URL path for which the cookie is valid.
- Expiration: Determines how long the cookie lasts.
- Flags: Security and usage flags (e.g., Secure, HttpOnly).
Cookie Domain
The domain attribute restricts which domains can access the cookie. For example:
Set-Cookie: userId=12345; domain=dev.to;
This cookie is accessible only to dev.to and its subdomains (like blog.dev.to).
Cookie Path
The path attribute restricts which paths on the domain can access the cookie. For example:
Set-Cookie: theme=dark; path=/newsfeed;
This cookie is sent only for requests to /newsfeed or its subpaths (e.g., /newsfeed/articles).
How Big Can a Cookie Be?
- A single cookie can hold up to 4 KB of data.
- Browsers usually allow 20-50 cookies per domain.
- Overloading cookies can slow down requests and potentially cause storage issues.
Secure and HttpOnly Flags
These attributes enhance cookie security:
Secure
Cookies with the Secure flag are sent only over HTTPS connections:
Set-Cookie: sessionId=abc123; Secure;
This prevents attackers from intercepting cookies over insecure connections.
HttpOnly
Cookies with the HttpOnly flag cannot be accessed by JavaScript, reducing the risk of XSS (Cross-Site Scripting) attacks:
Set-Cookie: authToken=xyz789; HttpOnly;
Setting Cookies
Server-Side
Servers can set cookies by including a Set-Cookie header in the HTTP response:
HTTP/1.1 200 OK
Set-Cookie: sessionId=abc123; domain=example.com; path=/; Secure; HttpOnly;
Client-Side
On the client side, cookies can be set using JavaScript:
document.cookie = "username=JohnDoe; path=/; expires=Fri, 31 Dec 2025 23:59:59 GMT;";
Note: Avoid setting sensitive cookies (e.g., tokens) via JavaScript for security reasons.
Retrieving Cookies
Server-Side
Servers can access cookies sent by the browser through the Cookie header:
GET /profile HTTP/1.1
Host: example.com
Cookie: sessionId=abc123;
Client-Side
Cookies can be read using JavaScript:
console.log(document.cookie); // Outputs: "username=JohnDoe; sessionId=abc123"
Best Practices for Using Cookies
- Use Secure and HttpOnly Flags: Protect sensitive data.
- Limit Scope: Define appropriate domains and paths to restrict access.
- Set Expiration Dates: Avoid storing cookies indefinitely.
- Avoid Overloading Cookies: Store minimal data and use localStorage or sessionStorage for non-sensitive, client-side data.
- Encrypt Sensitive Data: If sensitive data must be stored, encrypt it.
Conclusion
HTTP cookies might seem like small bits of text, but their impact on web functionality and user experience is substantial.
By understanding their structure, limitations, and security features, developers can leverage cookies to build reliable and secure web applications.
Now that you’ve had a taste of the cookie basics, go ahead and bake better user experiences! 🍪
I’ve been working on a super-convenient tool called LiveAPI.
It’s designed to make API documentation effortless for developers.
With LiveAPI, you can quickly generate interactive API documentation that allows users to execute APIs directly from the browser.
If you’re tired of manually creating docs for your APIs, this tool might just make your life easier.
Top comments (0)