Una cookie es un bloque de datos almacenados en el navegador que se utiliza 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 se traslada entre el navegador y el sitio web.
Cada cookie es un par clave-valor junto con varios atributos que controlan cuándo y dónde se utiliza esa cookie. Estos atributos se usan para establecer fechas de vencimiento o indicar que la cookie solo se debe enviar a través de HTTPS. Puedes configurar 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 un estado persistente a los sitios web. Con el paso del tiempo, sus capacidades crecieron y evolucionaron, pero dejaron a la plataforma con algunos problemas heredados problemáticos. Para solucionar este problema, los navegadores (incluidos Chrome, Firefox y Edge) cambiarán su comportamiento para aplicar más opciones predeterminadas que preserven la privacidad.
Cookies en acción
Supongamos que tienes un blog en el que quieres mostrar una promoción de "Novedades" a los 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, configurarla para 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 ve una página que cumple con esos requisitos (está en una conexión segura y la cookie tiene menos de un mes de antigüedad), el navegador enviará este encabezado en la solicitud:
Cookie: promo_shown=1
Cookie.
También puedes agregar y leer las cookies disponibles para ese sitio en JavaScript con document.cookie. Si realizas una asignación a document.cookie, se creará o anulará una cookie con esa clave. Por ejemplo, puedes probar lo siguiente en la Consola de JavaScript del 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 a las que se puede acceder 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 lo pruebas en una selección de sitios populares, notarás que la mayoría de ellos configuran considerablemente 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 los usuarios, de manera que la sobrecarga de todas las solicitudes salientes agrega un retraso en el tiempo hasta el primer byte. Sé conservador en cuanto a la cantidad y el tamaño de las cookies que establezcas. Usa el atributo Max-Age para asegurarte de que las cookies no duren más de lo necesario.
¿Qué son las cookies propias y de terceros?
Si regresas a esa misma selección de sitios que estabas viendo antes, es probable que hayas notado que había cookies presentes para varios dominios, no solo el que estabas visitando. Las cookies que coinciden con el dominio del sitio actual, es decir, lo que se muestra en la barra de direcciones del navegador, se denominan cookies propias. Del mismo modo, las cookies de dominios que no sean del sitio actual se denominan cookies de terceros. Esta no es una etiqueta absoluta, sino que se relaciona con el 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.
Para continuar con el ejemplo anterior, supongamos que una de tus entradas de blog tiene una foto de un gato particularmente increíble y está alojada en /blog/img/amazing-cat.png. Como es una imagen increíble, otra persona
la utiliza directamente en su sitio. Si un visitante visitó tu blog y tiene la cookie promo_shown, cuando vea amazing-cat.png en el sitio de la otra persona, esa cookie se enviará en esa solicitud para la imagen. Esto no es particularmente útil para nadie, ya que promo_shown no se usa para nada en el sitio del otro usuario; solo agrega una sobrecarga a la solicitud.
Si esto es un efecto no deseado, ¿por qué querrías hacerlo? Es este mecanismo el que permite que los sitios mantengan el estado cuando se usan en un contexto de terceros. Por ejemplo, si incorporas un video de YouTube a tu sitio, los visitantes verán la opción "Ver más tarde" en el reproductor. Si el visitante ya accedió a YouTube, esa sesión estará disponible en el reproductor incorporado a través de una cookie de terceros. Esto quiere decir que el botón "Ver más tarde" simplemente guardará el video de una sola vez en lugar de solicitarle que acceda o que tenga que navegar fuera de tu página y volver a YouTube.
Una de las propiedades culturales de la Web es que suele estar abierta de forma predeterminada. Esto es parte de lo que permitió que muchas personas crearan su propio contenido y apps allí. Sin embargo, esto también generó una serie de 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 la inicie. Por ejemplo, si visitas evil.example, se podrán activar las solicitudes a your-blog.example, y el navegador adjuntará las cookies asociadas. Si tu blog no tiene cuidado con la forma en que valida esas solicitudes, entonces 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 rastrear su actividad en varios sitios. Sin embargo, hasta ahora no había una manera de indicar explícitamente tu intent con la cookie. La cookie promo_shown solo debe enviarse en un contexto propio, mientras que una cookie de sesión para un widget que se incorpora en otros sitios está intencionalmente allí 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 atributos adecuados, consulta las recetas de galletas propias.