JavaScript
Explica cómo funcionan las cookies, sus atributos de alcance y seguridad, y cuándo usarlas para sesión, preferencias o intercambio con el servidor.
Una es un pequeño dato asociado a un sitio que el navegador puede almacenar y enviar automáticamente en solicitudes HTTP que cumplan sus reglas de dominio, ruta, seguridad y SameSite.
Set-Cookie: session=abc123; Path=/; Secure; HttpOnly; SameSite=LaxEl servidor responde:
Set-Cookie: theme=dark; Max-Age=31536000; Path=/; SameSite=LaxEl navegador decide si acepta y guarda la cookie según sus políticas.
En solicitudes posteriores puede enviar:
Cookie: theme=darkdocument.cookie = [
"theme=dark",
"Path=/",
"Max-Age=31536000",
"SameSite=Lax",
"Secure",
].join("; ");document.cookie no permite crear cookies HttpOnly; solo el servidor puede hacerlo.
console.log(document.cookie);Devuelve un string con cookies visibles para el documento.
No incluye cookies:
HttpOnly.function readCookie(name) {
const prefix = `${encodeURIComponent(name)}=`;
for (const part of document.cookie.split(";")) {
const cookie = part.trim();
if (cookie.startsWith(prefix)) {
return decodeURIComponent(
cookie.slice(prefix.length),
);
}
}
return null;
}La Cookie Store API ofrece una interfaz asíncrona más estructurada en entornos compatibles, pero su soporte debe comprobarse.
Codifica datos que puedan contener separadores:
const name = encodeURIComponent("user preference");
const value = encodeURIComponent("dark mode");Una cookie no es un contenedor JSON ilimitado. Mantén valores pequeños y simples.
Sin ambos, normalmente es una cookie de sesión.
Expires → fecha absoluta
Max-Age → segundos desde ahoraCuando ambos aparecen, Max-Age tiene prioridad en los navegadores modernos.
Set-Cookie: preference=dark; Max-Age=3600Sin Domain, la cookie es host-only y solo vuelve al host que la creó.
Set-Cookie: preference=dark; Domain=example.comPuede enviarse a subdominios compatibles. No puedes definir una cookie para un dominio que no te pertenece.
Host-only suele reducir superficie y ser una mejor opción cuando no necesitas compartir entre subdominios.
Set-Cookie: preference=dark; Path=/accountLimita cuándo se envía según la ruta.
Path no es una barrera de confidencialidad. Código del mismo origen puede realizar solicitudes hacia otras rutas y las cookies no HttpOnly pueden seguir siendo accesibles según las reglas del documento.
Set-Cookie: session=abc; SecureLa cookie solo se envía mediante conexiones seguras, salvo excepciones de desarrollo como localhost (se abre en otra pestaña).
No cifra el contenido dentro del navegador ni evita robo mediante XSS cuando no es HttpOnly.
Set-Cookie: session=abc; HttpOnlyImpide el acceso mediante document.cookie. Ayuda a reducir el robo directo del token por XSS.
No evita que un script malicioso realice acciones autenticadas desde la página. XSS sigue siendo una vulnerabilidad grave.
Controla el envío en contextos cross-site.
La política más restrictiva. Puede afectar navegación legítima desde otros sitios.
Permite ciertos casos de navegación superior y suele ofrecer un equilibrio para sesiones web.
SameSite=None; SecurePermite contextos cross-site y exige Secure en navegadores modernos.
SameSite ayuda contra CSRF, pero el diseño debe considerar el flujo exacto y posibles protecciones adicionales.
same-origin → scheme + host + port
same-site → relación basada en el sitio registrable y schemeDos subdominios pueden ser same-site, pero cross-origin.
Una cookie es first-party o third-party según el contexto donde se utiliza. Los navegadores restringen cada vez más cookies de terceros y pueden particionar o bloquear almacenamiento.
No diseñes funcionalidad esencial suponiendo disponibilidad universal de tracking cross-site.
Set-Cookie: id=abc; Secure; SameSite=None; PartitionedLas cookies particionadas se almacenan con una clave adicional relacionada con el sitio superior. Son una capacidad moderna para ciertos casos embebidos; revisa compatibilidad y requisitos actuales.
Set-Cookie: __Host-session=abc; Path=/; Secure; HttpOnlyRequiere Secure, Path=/ y ausencia de Domain. Reduce posibilidades de sobrescritura desde subdominios.
Requiere Secure y contexto seguro.
Los prefijos permiten que el navegador valide algunas propiedades del contrato.
Debes utilizar el mismo nombre, path y domain aplicables, con expiración pasada o Max-Age cero.
document.cookie = [
"theme=",
"Path=/",
"Max-Age=0",
"SameSite=Lax",
].join("; ");Borrar con un path distinto no elimina la cookie original.
Las cookies tienen límites pequeños por cookie y por dominio que varían entre navegadores. Además, se envían repetidamente con solicitudes compatibles.
No guardes grandes preferencias, documentos o caches en cookies.
Un patrón habitual:
cookie → identificador de sesión aleatorio
servidor → datos y permisos de la sesiónNo guardes contraseña ni información sensible completa dentro de una cookie legible.
Una cookie firmada detecta manipulación, pero no oculta el contenido. Una cookie cifrada añade confidencialidad bajo un diseño criptográfico correcto.
Como el navegador envía cookies automáticamente, un sitio atacante puede intentar provocar una solicitud autenticada.
Protecciones posibles:
Una cookie HttpOnly no puede leerse mediante JavaScript, pero un atacante con ejecución en la página puede:
La defensa principal sigue siendo evitar la ejecución de código no confiable.
| Aspecto | Cookies | Web Storage |
|---|---|---|
| Envío HTTP | Automático según reglas | No automático |
| Acceso JS | Excepto HttpOnly | Sí |
| Tamaño | Pequeño | Mayor, variable |
| API | Headers/document.cookie | setItem/getItem |
| Uso típico | Sesión y comunicación servidor | Preferencias y estado local |
Desde el servidor:
Set-Cookie: __Host-session=<random-id>; Path=/; Secure; HttpOnly; SameSite=Lax; Max-Age=1800La sesión real vive en el servidor y puede invalidarse sin confiar en datos del cliente.
¿Por qué una cookie HttpOnly reduce el robo del token, pero no vuelve inofensivo un ataque XSS?
Porque el script no puede leer directamente la cookie, pero todavía puede ejecutar acciones y solicitudes autenticadas desde la página comprometida.
IndexedDB explica almacenamiento estructurado, transacciones, índices y versionado dentro del navegador.