GUÍA COMPLETA SOBRE COOKIES EN DESARROLLO WEB 2025

November 27, 2025

Introducción a las Cookies en el Desarrollo Web

Las cookies son un componente esencial en el desarrollo web, utilizadas para almacenar pequeñas cantidades de datos en el navegador del usuario. Estos datos permiten a los sitios web recordar información sobre los visitantes, como preferencias, estados de sesión o comportamientos de navegación. En 2025, con el aumento de las regulaciones de privacidad y la evolución de los navegadores, comprender cómo funcionan las cookies, sus tipos, usos y mejores prácticas es crucial para cualquier desarrollador web. Este tutorial explora en profundidad las cookies, desde su definición hasta su implementación segura, con ejemplos prácticos y consideraciones actuales.

Las cookies son pequeños archivos de texto que un servidor web envía al navegador del usuario, donde se almacenan y se devuelven al servidor en solicitudes posteriores. Este mecanismo permite a los sitios web mantener un estado entre solicitudes HTTP, que son inherentemente sin estado. Por ejemplo, una cookie puede recordar que un usuario ha iniciado sesión, evitando la necesidad de autenticarse en cada página. En la actualidad, las cookies enfrentan desafíos debido a regulaciones como el Reglamento General de Protección de Datos (GDPR) y la eliminación gradual de cookies de terceros en navegadores como Chrome.

¿Qué Son las Cookies y Cómo Funcionan?

Una cookie es un par clave-valor enviado por un servidor web mediante el encabezado HTTP Set-Cookie. El navegador almacena esta cookie y la incluye en solicitudes futuras al mismo dominio a través del encabezado Cookie. Este proceso permite al servidor identificar al usuario o recuperar datos específicos. Las cookies tienen atributos que controlan su comportamiento, como el tiempo de expiración, el dominio y las restricciones de acceso.

Por ejemplo, cuando un usuario inicia sesión en un sitio web, el servidor puede enviar una cookie con un identificador de sesión:

Set-Cookie: session_id=abc123; Path=/; HttpOnly; Secure

En este caso, session_id=abc123 es el dato almacenado, Path=/ indica que la cookie es válida para todo el dominio, HttpOnly impide el acceso desde JavaScript, y Secure asegura que solo se envíe en conexiones HTTPS. En la próxima solicitud, el navegador envía:

Cookie: session_id=abc123

Este intercambio permite al servidor reconocer al usuario. Las cookies son esenciales para funciones como la autenticación de usuarios, el seguimiento de carritos de compra y la personalización de contenido.

Tipos de Cookies

Las cookies se clasifican según su duración, propósito y origen. Comprender estas categorías es fundamental para utilizarlas correctamente en el desarrollo web.

Cookies de Sesión

Las cookies de sesión son temporales y se eliminan cuando el usuario cierra el navegador. Se utilizan para mantener estados durante una visita, como recordar un inicio de sesión mientras el usuario navega por el sitio. No tienen un atributo Expires o Max-Age, lo que indica al navegador que las descarte al finalizar la sesión.

Set-Cookie: user_id=12345; Path=/; Secure

Cookies Persistentes

Las cookies persistentes tienen una fecha de expiración definida mediante los atributos Expires o Max-Age. Se almacenan en el disco duro del usuario y persisten entre sesiones del navegador, lo que las hace ideales para recordar preferencias, como el idioma seleccionado.

Set-Cookie: language=es; Expires=Wed, 31 Dec 2025 23:59:59 GMT; Path=/; Secure

Cookies de Terceros

Las cookies de terceros son establecidas por un dominio diferente al del sitio que el usuario está visitando. Se usan comúnmente para publicidad y seguimiento, pero su uso está disminuyendo debido a restricciones de privacidad en navegadores modernos. Por ejemplo, una cookie de un servicio de anuncios en un sitio de noticias.

Cookies de Primera Parte

Las cookies de primera parte son establecidas por el dominio del sitio que el usuario visita. Son más seguras y ampliamente aceptadas, ya que están bajo el control directo del sitio web.

Cookies Seguras y HttpOnly

Las cookies con el atributo Secure solo se envían a través de conexiones HTTPS, mientras que las cookies HttpOnly no son accesibles desde JavaScript, lo que reduce el riesgo de ataques como el cross-site scripting (XSS).

Set-Cookie: token=xyz789; Secure; HttpOnly; Path=/

Usos Comunes de las Cookies

Las cookies tienen múltiples aplicaciones en el desarrollo web, desde la autenticación hasta la personalización. A continuación, se describen los usos más comunes en 2025.

Autenticación

Las cookies son fundamentales para la autenticación de usuarios. Al iniciar sesión, el servidor genera un token de sesión y lo almacena en una cookie. Este token se envía en cada solicitud, permitiendo al servidor verificar la identidad del usuario.

// Ejemplo en Node.js para establecer una cookie de autenticación
const express = require("express");
const app = express();

app.post("/login", (req, res) => {
    const sessionToken = generateSessionToken(); // Función ficticia
    res.cookie("session", sessionToken, {
        httpOnly: true,
        secure: true,
        path: "/",
        maxAge: 3600000, // 1 hora
    });
    res.send("Sesión iniciada");
});

app.listen(3000);

Seguimiento y Análisis

Las cookies permiten rastrear el comportamiento del usuario, como las páginas visitadas o el tiempo en el sitio. Aunque las cookies de terceros están en declive, las cookies de primera parte siguen siendo útiles para herramientas de análisis como Google Analytics.

Personalización

Las cookies almacenan preferencias del usuario, como el tema oscuro o la región geográfica, mejorando la experiencia de usuario personalizada. Por ejemplo:

Set-Cookie: theme=dark; Max-Age=31536000; Path=/; Secure

Gestión de Carritos de Compra

En sitios de comercio electrónico, las cookies mantienen los artículos en el carrito del usuario, incluso si este abandona el sitio temporalmente.

// Ejemplo en JavaScript para agregar un producto al carrito
document.cookie = "cart=product_123; max-age=86400; path=/; secure";

Atributos de las Cookies

Los atributos de las cookies definen su comportamiento y seguridad. Los más importantes son:

Expires: Especifica la fecha de expiración de la cookie.
Max-Age: Define la duración en segundos antes de que la cookie expire.
Domain: Indica los dominios para los que la cookie es válida.
Path: Limita la cookie a una ruta específica del sitio.
Secure: Restringe la cookie a conexiones HTTPS.
HttpOnly: Impide el acceso desde JavaScript.
SameSite: Controla el envío de cookies en solicitudes entre sitios, con valores Strict, Lax o None.

Un ejemplo de cookie con múltiples atributos:

Set-Cookie: user=john_doe; Max-Age=86400; Path=/; Domain=example.com; Secure; HttpOnly; SameSite=Strict

Seguridad y Mejores Prácticas

La seguridad es una preocupación clave al trabajar con cookies, especialmente en 2025, con el aumento de ciberataques y regulaciones de privacidad. A continuación, se presentan las mejores prácticas para implementar cookies de manera segura.

Usar Atributos Secure y HttpOnly

Siempre configura las cookies con Secure y HttpOnly para protegerlas contra interceptaciones y ataques XSS. Por ejemplo:

// Configuración de una cookie segura en Node.js
res.cookie("auth_token", token, {
    secure: true,
    httpOnly: true,
    sameSite: "Strict",
});

Implementar SameSite

El atributo SameSite mitiga los ataques de cross-site request forgery (CSRF). Usa SameSite=Strict para cookies sensibles, como las de autenticación, y SameSite=Lax para cookies menos críticas.

Set-Cookie: session=abc123; SameSite=Strict; Secure; HttpOnly

Limitar la Duración de las Cookies

Establece tiempos de expiración razonables con Max-Age para reducir el riesgo de uso indebido si una cookie es comprometida. Por ejemplo, una cookie de sesión podría tener:

Set-Cookie: temp_session=xyz789; Max-Age=3600; Path=/; Secure

Cumplir con Regulaciones de Privacidad

En 2025, regulaciones como el GDPR y la Ley de Privacidad del Consumidor de California (CCPA) requieren el consentimiento del usuario antes de establecer cookies no esenciales. Implementa banners de consentimiento y permite a los usuarios gestionar sus preferencias.

<!-- Ejemplo de banner de consentimiento -->
<div id="cookie-consent">
    <p>
        Usamos cookies para mejorar tu experiencia.
        <a href="/privacy">Más información</a>
    </p>
    <button onclick="acceptCookies()">Aceptar</button>
    <button onclick="rejectCookies()">Rechazar</button>
</div>

<script>
    function acceptCookies() {
        document.cookie = "consent=true; max-age=31536000; path=/; secure";
        document.getElementById("cookie-consent").style.display = "none";
    }
</script>

Evitar Almacenar Datos Sensibles

Nunca almacenes información sensible, como contraseñas o datos personales, en cookies. Usa tokens de sesión y almacena los datos sensibles en el servidor.

Alternativas a las Cookies

Con las restricciones a las cookies de terceros y las preocupaciones de privacidad, los desarrolladores están adoptando alternativas para funciones similares. Algunas opciones incluyen:

LocalStorage y SessionStorage

LocalStorage y SessionStorage son APIs de almacenamiento en el navegador que permiten guardar datos sin enviarlos automáticamente al servidor. Son útiles para datos no sensibles, pero no reemplazan las cookies para autenticación.

// Ejemplo de uso de LocalStorage
localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme")); // Salida: dark

Tokens JWT en Cabeceras

Los JSON Web Tokens (JWT) pueden almacenarse en LocalStorage o enviarse en cabeceras HTTP personalizadas, ofreciendo una alternativa para la autenticación sin depender de cookies.

// Ejemplo de envío de JWT en una solicitud
fetch("/api/protected", {
    headers: {
        Authorization: `Bearer ${localStorage.getItem("jwt")}`,
    },
});

IndexedDB

IndexedDB es una base de datos en el navegador para almacenar grandes cantidades de datos estructurados. Es adecuada para aplicaciones web progresivas (PWA) que requieren almacenamiento local complejo.

// Ejemplo básico de IndexedDB
let request = indexedDB.open("myDatabase");
request.onsuccess = function (event) {
    let db = event.target.result;
    console.log("Base de datos abierta");
};

Gestión de Cookies en el Lado del Cliente

En el lado del cliente, los desarrolladores pueden manipular cookies usando JavaScript. La propiedad document.cookie permite leer y escribir cookies, aunque su manejo requiere cuidado debido a su formato de cadena.

// Establecer una cookie
document.cookie = "username=john; max-age=86400; path=/; secure";

// Leer todas las cookies
console.log(document.cookie);
// Salida: username=john; theme=dark

// Eliminar una cookie estableciendo una fecha de expiración pasada
document.cookie = "username=; max-age=0; path=/; secure";

Para facilitar la gestión, se pueden usar bibliotecas como js-cookie:

import Cookies from "js-cookie";

// Establecer una cookie
Cookies.set("name", "value", { expires: 7, secure: true });

// Leer una cookie
console.log(Cookies.get("name")); // Salida: value

// Eliminar una cookie
Cookies.remove("name");

Gestión de Cookies en el Lado del Servidor

En el lado del servidor, las cookies se gestionan mediante frameworks o bibliotecas específicas del lenguaje. Por ejemplo, en Node.js con Express:

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

app.use(cookieParser());

app.get('/', (req, res) => {
  res.cookie('visit_count', (parseInt(req.cookies.visit_count || 0) + 1), {
    max-age: 86400,
    secure: true
  });
  res.send(`Visitas: ${req.cookies.visit_count || 1}`);
});

app.listen(3000);

En Python con Flask:

from flask import Flask, make_response, request

app = Flask(__name__)

@app.route('/')
def index():
    count = int(request.cookies.get('visit_count', 0)) + 1
    resp = make_response(f'Visitas: {count}')
    resp.set_cookie('visit_count', str(count), maxage=86400, secure=True)
    return resp

if __name__ == '__main__':
    app.run()

Consideraciones de Rendimiento

El uso excesivo de cookies puede afectar el rendimiento de un sitio web, ya que se envían en cada solicitud HTTP al dominio correspondiente. Para optimizar:

Minimiza el tamaño de las cookies, limitándolas a datos esenciales.
Usa el atributo Path para restringir las cookies a rutas específicas.
Considera alternativas como LocalStorage para datos que no necesitan enviarse al servidor.

Por ejemplo, en lugar de almacenar un objeto grande en una cookie:

Set-Cookie: user_data={"name":"John","age":30,"city":"Madrid"}; Path=/

Almacena solo un identificador y recupera los datos del servidor:

Set-Cookie: user_id=123; Path=/; Secure

Desafíos Actuales en 2025

En 2025, el panorama de las cookies está marcado por la eliminación de cookies de terceros en navegadores como Chrome, lo que impulsa el uso de tecnologías como Privacy Sandbox. Además, las regulaciones de privacidad exigen una mayor transparencia, obligando a los desarrolladores a implementar sistemas de consentimiento robustos. Los desarrolladores deben equilibrar la funcionalidad con el cumplimiento legal, asegurando que las cookies sean seguras y respetuosas con la privacidad del usuario.

Conclusiones

Las cookies siguen siendo una herramienta poderosa en el desarrollo web, esenciales para la autenticación, personalización y gestión de sesiones. Sin embargo, su uso requiere un enfoque cuidadoso para garantizar la seguridad y cumplir con las regulaciones de privacidad en 2025. Al implementar cookies, los desarrolladores deben priorizar atributos como Secure, HttpOnly y SameSite, limitar la duración y el tamaño de las cookies, y considerar alternativas como LocalStorage o JWT para casos específicos. Con las prácticas adecuadas, las cookies pueden mejorar la experiencia del usuario sin comprometer la seguridad ni la privacidad. Este tutorial proporciona una base sólida para integrar cookies de manera efectiva en tus proyectos, adaptándolas a las demandas del desarrollo web moderno.