Una cookie es un fragmento de datos que se almacena en el navegador y se usa para conservar el estado y otra información que un sitio web necesita para ejecutar sus funciones.
Una cookie es un pequeño archivo que los sitios web almacenan en la máquina de sus usuarios. La información que almacena viaja de un lado a otro entre el navegador y el sitio web.
Cada cookie es un par clave-valor junto con una cantidad de atributos que controlan cuándo y dónde se usa esa cookie. Estos atributos se usan para establecer aspectos como las fechas de vencimiento o indicar que la cookie solo se debe enviar a través de HTTPS. Puedes establecer una cookie en un encabezado HTTP o a través de la interfaz de JavaScript.
Las cookies son uno de los métodos disponibles para agregar estado persistente a los sitios web. Con el paso de los años, sus capacidades crecieron y evolucionaron, pero dejaron en la plataforma algunos problemas heredados. Para abordar este problema, los navegadores (incluidos Chrome, Firefox y Edge) están cambiando su comportamiento para aplicar más valores predeterminados que preserven la privacidad.
Cookies en acción
Supongamos que tienes un blog en el que deseas mostrar una promoción de "Novedades" a tus usuarios. Los usuarios pueden descartar la promoción y no la volverán a ver por un tiempo. Puedes almacenar esa preferencia en una cookie, establecer que venza en un mes (2,600,000 segundos) y enviarla solo a través de HTTPS. Ese encabezado se vería así:
Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
Set-Cookie.
Cuando el lector vea una página que cumpla con esos requisitos (esté en una conexión segura y la cookie tenga menos de un mes), su navegador enviará este encabezado en su solicitud:
Cookie: promo_shown=1
Cookie.
También puedes agregar y leer las cookies disponibles para ese sitio en JavaScript con document.cookie. Asignar un valor a document.cookie creará o anulará una cookie con esa clave. Por ejemplo, puedes probar lo siguiente en la consola de JavaScript de tu navegador:
→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
← "promo_shown=1; Max-Age=2600000; Secure"
La lectura de document.cookie generará todas las cookies accesibles en el contexto actual, con cada cookie separada por un punto y coma:
→ document.cookie;
← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"
document.cookie.
Si pruebas esto en una selección de sitios populares, notarás que la mayoría de ellos establecen significativamente más de tres cookies. En la mayoría de los casos, esas cookies se envían en cada solicitud a ese dominio, lo que tiene varias implicaciones. El ancho de banda de carga suele ser más restringido que el de descarga para tus usuarios, por lo que la sobrecarga en todas las solicitudes salientes agrega una demora en el tiempo hasta el primer byte. Sé conservador con la cantidad y el tamaño de las cookies que establezcas. Usa el atributo Max-Age para garantizar que las cookies no permanezcan más tiempo del necesario.
¿Qué son las cookies propias y de terceros?
Si vuelves a la misma selección de sitios que estabas viendo antes, probablemente notaste que había cookies presentes para una variedad de dominios, no solo el que estabas visitando en ese momento. Las cookies que coinciden con el dominio del sitio actual, es decir, lo que se muestra en la barra de direcciones del navegador, se conocen como cookies propias. Del mismo modo, las cookies de dominios distintos del sitio actual se denominan cookies de terceros. No es una etiqueta absoluta, sino que es relativa al contexto del usuario. La misma cookie puede ser propia o de terceros según el sitio en el que se encuentre el usuario en ese momento.
Continuando con el ejemplo anterior, supongamos que una de tus entradas de blog tiene una foto de un gato particularmente asombroso y está alojada en /blog/img/amazing-cat.png. Como es una imagen tan increíble, otra persona la usa directamente en su sitio. Si un visitante estuvo en tu blog y tiene la cookie promo_shown, cuando vea amazing-cat.png en el sitio de otra persona, esa cookie se enviará en la solicitud de la imagen. Esto no es particularmente útil para nadie, ya que promo_shown no se usa para nada en el sitio de esta otra persona, solo agrega sobrecarga a la solicitud.
Si ese es un efecto no deseado, ¿por qué querrías hacer esto? Este mecanismo permite que los sitios mantengan el estado cuando se usan en un contexto de terceros. Por ejemplo, si incorporas un video de YouTube en tu sitio, los visitantes verán la opción "Ver más tarde" en el reproductor. Si el visitante ya accedió a YouTube, una cookie de terceros pondrá a disposición esa sesión en el reproductor incorporado, lo que significa que el botón "Ver más tarde" guardará el video de inmediato en lugar de pedirle que acceda o tener que navegar fuera de tu página y volver a YouTube.
Una de las propiedades culturales de la Web es que tiende a ser abierta de forma predeterminada. Esto es parte de lo que ha permitido que tantas personas creen su propio contenido y apps allí. Sin embargo, esto también generó varias inquietudes sobre la seguridad y la privacidad. Los ataques de falsificación de solicitudes entre sitios (CSRF) se basan en el hecho de que las cookies se adjuntan a cualquier solicitud a un origen determinado, sin importar quién inicie la solicitud. Por ejemplo, si visitas evil.example, se pueden activar solicitudes a your-blog.example, y tu navegador adjuntará sin problemas las cookies asociadas. Si tu blog no tiene cuidado con la forma en que valida esas solicitudes, evil.example podría activar acciones como borrar publicaciones o agregar su propio contenido.
Los usuarios también son cada vez más conscientes de cómo se pueden usar las cookies para hacer un seguimiento de su actividad en varios sitios. Sin embargo, hasta ahora no había una forma de indicar explícitamente tu intención con la cookie. Tu cookie promo_shown solo debe enviarse en un contexto propio, mientras que una cookie de sesión para un widget que se incorporará en otros sitios está allí intencionalmente para proporcionar el estado de acceso en un contexto de terceros.
Puedes indicar explícitamente tu intención con una cookie configurando el atributo SameSite adecuado.
Para identificar tus cookies propias y establecer los atributos adecuados, consulta las recetas de cookies propias.