Saltar al contenido principal

¿Qué es una Cookie? 🍪

Cuando accedes a un sitio web, a menudo ves el mensaje "¿Aceptas el uso de cookies?". Te explicaré qué es exactamente una cookie y por qué es necesaria, de manera simple para que incluso los principiantes puedan entenderlo!

¿Comparar las cookies con la vida cotidiana?​

Comparemos las cookies con un recibo.

La historia del recibo de café ☕​

Primera visita:
Cliente: "Un café americano por favor"
Cafetería: "Aquí está tu café y tu recibo"
      [Recibo: número de cliente #123, menú favorito: café americano]

Siguiente visita:
Cliente: [Muestra el recibo]
Cafetería: "¡Ah, cliente #123! ¿Un café americano para ti?"

¡Las cookies funcionan igual!

Primera visita:
Navegador: "Es mi primera vez en este sitio"
Sitio web: "Aquí tienes una cookie"
         [Cookie: ID de usuario, preferencias, etc.]

Siguiente visita:
Navegador: [Muestra la cookie]
Sitio web: "¡Ah, has vuelto! Mantendré tu sesión"

Cookie (Cookie)

  • Pequeño archivo de texto que el sitio web almacena en el navegador
  • La forma en que el sitio web te "recuerda"
  • Tamaño: generalmente menos de 4KB

¿Dónde se almacenan las cookies?​

Mi ordenador/smartphone
└── Navegador (Chrome, Safari, etc.)
    └── Almacenamiento de cookies
        ├── Cookie de google.com
        ├── Cookie de elmundo.es
        └── Cookie de github.com

Qué hacen las cookies​

1. Mantener la sesión iniciada 🔐​

Sin cookie:

1. Iniciar sesión
2. Ir a otra página
3. Sesión cerrada... 😭
4. Iniciar sesión de nuevo
5. Ir a otra página otra vez
6. Sesión cerrada de nuevo... 😭

Usando cookie:

1. Iniciar sesión
2. Cookie guarda la información de sesión
3. ¡La sesión se mantiene al ir a otras páginas! ✅
4. ¡La sesión se mantiene incluso al cerrar el navegador! ✅

2. Recordar el carrito 🛒​

En una tienda online:
1. Añadir el producto A al carrito
2. Ir a ver otros productos
3. ¡El producto A sigue en el carrito! ✅

3. Configuración personalizada ⚙️​

Configuración del sitio web:
- Idioma: Español
- Tema: Modo oscuro
- Tamaño de fuente: Grande

→ ¡Aplicado automáticamente en la próxima visita! ✅

4. Seguimiento y publicidad 📊​

Productos que has visto:
- Zapatos A
- Bolso B

→ Mostrar publicidad relacionada en otros sitios

Las cookies se almacenan en formato nombre=valor:

Nombre: user_id
Valor: 12345
Dominio: example.com
Ruta: /
Expiración: 2025-12-31
Seguridad: Secure, HttpOnly
session_id=abc123xyz; Domain=example.com; Path=/; Expires=Fri, 31 Dec 2025 23:59:59 GMT; Secure; HttpOnly

Tipos de cookies​

1. Cookie de sesión (Session Cookie) 🕐​

Cookie que se elimina al cerrar el navegador

Ciclo de vida: Solo mientras el navegador está abierto
Uso: Inicio de sesión temporal, carrito
Característica: Sin fecha de expiración

Ejemplo:

Abrir navegador → Comprar → Cerrar navegador → Carrito vacío

2. Cookie persistente (Persistent Cookie) 📅​

Cookie que se mantiene hasta una fecha especificada

Ciclo de vida: Hasta la fecha de expiración o eliminación manual
Uso: "Mantener sesión iniciada", configuración personalizada
Característica: Fecha de expiración especificada

Ejemplo:

Marcar "Mantener sesión iniciada"
→ Inicio de sesión automático durante 30 días ✅

3. Cookie de primera parte (First-party Cookie) 🏠​

Cookie creada directamente por el sitio web visitado

Visitar example.com
→ Cookie establecida por example.com
→ Usada solo en example.com

Usos:

  • Mantener sesión
  • Carrito
  • Configuración del sitio

Cookie creada por otro sitio web (principalmente para publicidad)

Visitar example.com
→ Script de empresa publicitaria en la página se ejecuta
→ ads.com establece una cookie
→ Te rastrea en múltiples sitios

Usos:

  • Seguimiento publicitario
  • Análisis de comportamiento del usuario
  • Publicidad personalizada
advertencia

¡Las cookies de terceros están siendo bloqueadas gradualmente por problemas de privacidad! Chrome, Safari, etc. están bloqueando las cookies de terceros.

Proceso de funcionamiento de las cookies​

Navegador → Solicitud al sitio web
Sitio web → Respuesta + envío de cookie

Respuesta HTTP:
Set-Cookie: user_id=12345; Expires=...
El navegador guarda la cookie en su almacenamiento
Navegador → Nueva solicitud al sitio web + envío de cookie

Solicitud HTTP:
Cookie: user_id=12345
El sitio web lee la cookie e identifica al usuario
→ "¡Ah, es el usuario 12345!"

Atributos de las cookies​

Domain (Dominio)​

La cookie de example.com
solo se usa en example.com

Path (Ruta)​

Path=/shop
→ Cookie enviada solo en la ruta /shop

Expires/Max-Age (Expiración)​

Expires=2025-12-31
→ Mantener hasta esta fecha

Max-Age=3600
→ Eliminar después de 3600 segundos (1 hora)

Secure (Seguridad)​

Bandera Secure
→ Cookie enviada solo por HTTPS
No enviada por HTTP

HttpOnly​

Bandera HttpOnly
→ No accesible mediante JavaScript
Defensa contra ataques XSS

SameSite​

SameSite=Strict
→ Cookie enviada solo en el mismo sitio
Defensa contra ataques CSRF

Ventajas de las cookies​

✅ Mejora de la experiencia del usuario​

  • Mantener sesión
  • Contenido personalizado
  • Compra conveniente

✅ Mantener el estado​

  • HTTP no tiene estado (Stateless)
  • Las cookies permiten mantener el estado

✅ Implementación simple​

  • Fácil de usar tanto en servidor como en cliente
  • Casi no requiere configuración adicional

Desventajas de las cookies​

❌ Riesgos de seguridad​

  • Posibilidad de robo (ataques XSS, CSRF)
  • Inadecuada para almacenar información sensible

❌ Problemas de privacidad​

  • Posibilidad de rastrear usuarios
  • Seguimiento publicitario con cookies de terceros

❌ Límite de tamaño​

  • Límite de 4KB por cookie
  • Límite de número de cookies por dominio (generalmente 20~50)

❌ Enviada en cada solicitud​

  • Todas las solicitudes HTTP incluyen cookies
  • Aumento del tráfico
CaracterísticaCookieLocal StorageSession Storage
Tamaño4KB5-10MB5-10MB
Ciclo de vidaConfigurar expiraciónPermanenteEliminar al cerrar pestaña
Envío al servidor✅ Cada vez❌ No enviado❌ No enviado
AccesoServidor/JSSolo JSSolo JS
UsoAutenticación, seguimientoDatos grandesDatos temporales

¿Cuándo usar qué?​

Cookie: Token de inicio de sesión, información que el servidor necesita saber
Local Storage: Configuración del usuario, datos sin conexión
Session Storage: Datos temporales de formulario, información de un solo uso

Seguridad de las cookies​

1. Usar bandera Secure 🔒​

Set-Cookie: token=abc; Secure
→ Enviada solo por HTTPS

2. Usar bandera HttpOnly 🛡️​

Set-Cookie: session=xyz; HttpOnly
→ Bloquear acceso de JavaScript
→ Defensa contra ataques XSS

3. Usar bandera SameSite 🚫​

Set-Cookie: id=123; SameSite=Strict
→ Defensa contra ataques CSRF

4. Prohibir almacenamiento de información sensible ⚠️​

❌ Contraseñas
❌ Números de tarjeta de crédito
❌ Números de identificación

✅ ID de sesión (token cifrado)
✅ Configuración del usuario

Gestionar cookies​

Ver cookies en el navegador​

Chrome:

Configuración → Privacidad y seguridad → Cookies y otros datos de sitios
→ Ver todas las cookies y datos de sitios

Herramientas de desarrollador:

F12 → Pestaña Application → Storage → Cookies

Eliminar cookies​

1. Eliminar solo las cookies de un sitio específico
2. Eliminar todas las cookies
3. Configurar eliminación automática de cookies (al cerrar el navegador)

Manejar cookies con JavaScript​

Establecer cookie:

document.cookie = "username=Juan García; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

Leer cookie:

console.log(document.cookie);
// "username=Juan García; theme=dark; ..."

Eliminar cookie:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Ejemplos de uso real​

Ejemplo 1: Mantener sesión iniciada 🔐​

// Al iniciar sesión con éxito
Set-Cookie: auth_token=eyJhbGc...;
            Expires=Mon, 31 Jan 2025 23:59:59 GMT;
            Secure;
            HttpOnly;
            SameSite=Strict

// Automáticamente en cada solicitud siguiente:
Cookie: auth_token=eyJhbGc...

Ejemplo 2: Configuración de tema 🎨​

// El usuario selecciona modo oscuro
document.cookie = "theme=dark; max-age=31536000; path=/";

// Al cargar la página
if (document.cookie.includes("theme=dark")) {
  enableDarkMode();
}

Ejemplo 3: Configuración de idioma 🌏​

// Selección de idioma
Set-Cookie: lang=es; Max-Age=31536000; Path=/

// El servidor lee la cookie y proporciona contenido en español

¿Por qué pedir consentimiento para cookies?​

RGPD (Reglamento General de Protección de Datos):

Los sitios web deben obtener
el consentimiento del usuario antes de usar cookies

Cookies esenciales vs cookies opcionales:

Esenciales: Inicio de sesión, carrito (no requiere consentimiento)
Opcionales: Seguimiento publicitario, análisis (requiere consentimiento)

Preguntas frecuentes (FAQ)​

P1: ¿Qué pasa si bloqueo las cookies?​

R: Muchos sitios web no funcionarán correctamente.

  • No se puede iniciar sesión
  • No se puede usar el carrito
  • La configuración no se guarda

P2: ¿Son seguras las cookies?​

R: Sí, si se usan correctamente.

  • Usar banderas Secure, HttpOnly
  • No almacenar información sensible
  • Usar HTTPS

P3: ¿Pueden las cookies infectar con virus?​

R: ¡No! Las cookies son simples archivos de texto.

  • No pueden ejecutar código
  • No pueden contener virus

P4: ¿Debo eliminar las cookies con frecuencia?​

R: Es una elección personal.

  • Ventaja: Mejora de la privacidad
  • Desventaja: Cierre de sesión, reinicio de configuración

P5: ¿Cookies en modo incógnito?​

R: Se usan temporalmente.

  • Todo se elimina al cerrar la ventana de incógnito
  • Mejora de la prevención de seguimiento

El futuro de las cookies​

1. Eliminación de cookies de terceros​

Chrome, Safari, etc. bloquean cookies de terceros
→ Las empresas publicitarias buscan alternativas

2. Tecnologías alternativas​

- Privacy Sandbox (Google)
- FLoC (Federated Learning of Cohorts)
- Nuevos estándares con privacidad mejorada

Siguientes pasos 🚀​

Si has entendido las cookies:

  1. ✅ ¿Qué es el Caché? - Otra forma de cargar datos rápidamente
  2. ✅ ¿Qué es una VPN? - Protección de la privacidad en línea
  3. ✅ Entender solicitud/respuesta HTTP - Cómo se envían las cookies

Conclusión​

¡Las cookies son la forma en que los sitios web te recuerdan! 🍪

Puntos a recordar:

  • Cookie = Pequeño archivo de texto
  • Almacenada en el navegador
  • Mantener sesión, carrito, guardar configuración
  • Cuidado con la seguridad (usar Secure, HttpOnly)
  • Las cookies de terceros son para seguimiento (se pueden bloquear)

Gracias a las cookies podemos usar la web de manera conveniente, ¡pero también debemos tener cuidado con la privacidad! 🔐