Anita's Script
A Developer's Guide to Cookies

Photo by No Revisions on Unsplash

A Developer's Guide to Cookies

Anita Maduba's photo
Anita Maduba
·

4 min read

Cookies are an essential part of web development, providing a way to store small pieces of data on the client-side. As a developer, understanding how to work with cookies is crucial for implementing features like user authentication, personalization, and tracking user preferences. This guide will explore what cookies are, how they work, and how to use them effectively in your web applications.

What Are Cookies?

Cookies are small text files that websites store on a user's device. They contain key-value pairs of data and are sent back to the server with every HTTP request to the same domain. This allows websites to remember user information and maintain stateful interactions in the inherently stateless HTTP protocol.

Types of Cookies

There are several types of cookies, each serving different purposes:

  1. Session cookies: Temporary cookies that are deleted when the browser is closed.

  2. Persistent cookies: Cookies that remain on the user's device for a specified period.

  3. First-party cookies: Set by the domain the user is visiting.

  4. Third-party cookies: Set by domains other than the one the user is visiting.

Creating and Reading Cookies

Let's look at how to create and read cookies using JavaScript.

To set a cookie, you can use the document.cookie property:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

This code creates a cookie named "username" with the value "John Doe". It also sets an expiration date and a path.

Reading Cookies

To read cookies, you can access the document.cookie property:

function getCookie(name) {
  const cookieArray = document.cookie.split(';');
  for(let i = 0; i < cookieArray.length; i++) {
    let cookiePair = cookieArray[i].split('=');
    if(name == cookiePair[0].trim()) {
      return decodeURIComponent(cookiePair[1]);
    }
  }
  return null;
}

let username = getCookie("username");
console.log(username); // Outputs: John Doe

This function splits the cookie string, searches for the specified cookie name, and returns its value.

When setting cookies, you can include various attributes to control their behavior:

  1. Expires: Sets an expiration date for the cookie.

  2. Max-Age: Specifies the maximum age of the cookie in seconds.

  3. Domain: Specifies which hosts can receive the cookie.

  4. Path: Indicates the path that must exist in the requested URL for the browser to send the cookie header.

  5. Secure: Ensures the cookie is only transmitted over HTTPS.

  6. HttpOnly: Prevents access to the cookie through client-side scripts.

  7. SameSite: Controls how cookies are sent with requests from external sites.

Here's an example of setting a cookie with multiple attributes:

document.cookie = "user_id=12345; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/; secure; httpOnly; samesite=strict";

Working with Cookies in Node.js

When working with server-side JavaScript in Node.js, you can use the cookie-parser middleware for Express to handle cookies easily:

const express = require('express');
const cookieParser = require('cookie-parser');

const app = express();
app.use(cookieParser());

app.get('/', (req, res) => {
  // Read a cookie
  console.log('User ID:', req.cookies.user_id);

  // Set a cookie
  res.cookie('session_id', '1234567890', { maxAge: 900000, httpOnly: true });

  res.send('Cookie demo');
});

app.listen(3000, () => console.log('Server running on port 3000'));

This example demonstrates how to read and set cookies in an Express application.

Security Considerations

When working with cookies, keep these security considerations in mind:

  1. Use the HttpOnly flag for sensitive cookies to prevent XSS attacks.

  2. Implement the Secure flag to ensure cookies are only sent over HTTPS.

  3. Use the SameSite attribute to protect against CSRF attacks.

  4. Avoid storing sensitive information in cookies.

  5. Be aware of cookie size limitations (generally 4KB per cookie).

With the implementation of GDPR and similar regulations, it's crucial to obtain user consent before setting non-essential cookies. Implement a cookie consent mechanism that:

  1. Informs users about the types of cookies used.

  2. Allows users to accept or reject non-essential cookies.

  3. Provides a way for users to change their preferences later.

Conclusion

Cookies are a powerful tool in a developer's arsenal, enabling stateful interactions in web applications. By understanding how to create, read, and manage cookies securely, you can enhance user experiences while respecting privacy and security concerns. Remember to stay updated on best practices and regulations regarding cookie usage to ensure your applications remain compliant and user-friendly.

frontendwebdevWeb Development