Recetas de galletas propias

Aprende a configurar cookies propias para garantizar la seguridad, la compatibilidad entre navegadores y minimizar las posibilidades de fallas una vez que se eliminen gradualmente las cookies de terceros.

Las cookies pueden ser de origen o de terceros según el contexto del usuario. según el sitio en el que se encuentre el usuario en ese momento. Si el dominio y el esquema registrables de la cookie coinciden con la página de nivel superior actual, es decir, lo que se muestra en la barra de direcciones del navegador, se considerará que la cookie proviene del mismo sitio que la página y, por lo general, se denomina cookie propia.

Las cookies de dominios distintos del sitio actual por lo general se denominan cookies de terceros.

Si la cookie que estableces no se usa en los sitios, por ejemplo, para administrar sesiones en tu sitio y nunca se usa en un iframe entre sitios, esa cookie siempre se usa en un contexto propio.

De forma predeterminada, las cookies se pueden compartir entre sitios, se puede acceder a ellas con JavaScript y se pueden enviar a través de conexiones HTTP, lo que conlleva algunos riesgos de privacidad y seguridad. Si bien todavía estamos trabajando para mejorar el comportamiento predeterminado, a través de Privacy Sandbox y otras propuestas como las cookies vinculadas al origen, actualmente hay muchas acciones que se pueden realizar si se configuran atributos adicionales en sus cookies.

La siguiente configuración es una práctica recomendada que garantiza la seguridad y la compatibilidad entre navegadores para la mayoría de las cookies propias. Te proporcionará una base segura que puedes ajustar para abrir permisos solo cuando sea necesario. En este artículo, también se abordan las variaciones de recetas para algunos casos de uso específicos.

La receta

Set-Cookie:
__Host-cookie-name=cookie-value;
Secure;
Path=/;
HttpOnly;
Max-Age=7776000;
SameSite=Lax;
Detalles

Host es un prefijo opcional que hace que algunos atributos sean obligatorios y otros no lo son:

  • Secure debe estar presente
  • Se debe omitir Domain
  • Path debe ser /

Con Host agregado, puedes confiar en el navegador para verificar si estos atributos están configurados según las reglas __Host y, de lo contrario, rechazar la cookie.

Secure protege las cookies contra el robo en redes no seguras porque solo permite el envío de cookies a través de conexiones HTTPS. Si aún no migraste tu sitio a HTTPS por completo, establécelo como prioridad.

El atributo Domain especifica qué hosts pueden recibir una cookie. Si se omite, se restringe la cookie al host del documento actual, sin incluir los subdominios: la cookie para example.com se enviará en todas las solicitudes a example.com, pero no en las solicitudes a images.example.com. Si ejecutas apps distintas en subdominios diferentes, esto reduce el riesgo de que un dominio comprometido permita el acceso a las demás.

Path indica la ruta de acceso que debe existir en la URL solicitada para que el navegador envíe el encabezado Cookie. Si estableces Path=/, la cookie se enviará a todas las rutas de URL de ese dominio. La combinación de que no haya Domain y Path=/ hace que la cookie se vincule al origen lo más cerca posible, por lo que se comporta de manera similar a otro almacenamiento del cliente, como LocalStorage. No hay confusión de que example.com/a pueda recibir valores diferentes para example.com/b.

El atributo HttpOnly agrega protección contra secuencias de comandos maliciosas de terceros en tus sitios restringiendo el acceso a JavaScript. Permite enviar una cookie solo en encabezados de solicitud y hace que no estén disponibles para JavaScript mediante document.cookie.

Max-Age limita la duración de una cookie, ya que las sesiones del navegador pueden durar bastante tiempo y no querrás que las cookies inactivas permanezcan en el tiempo para siempre. Es adecuado para las cookies de corto plazo, como las sesiones de usuario, o incluso para las más cortas, como los tokens para el envío de formularios. Max-Age se define en segundos y, en el ejemplo anterior, se establece en 7776000 segundos, que es 90 días. Este es un valor predeterminado razonable, que puedes cambiar según tu caso de uso.

SameSite=Lax restringe la cookie para que se envíe solo en solicitudes del mismo sitio. Es decir, cuando la solicitud coincide con el contexto de navegación actual (el sitio de nivel superior que el usuario visita actualmente y que se muestra en la barra de ubicación). SameSite=Lax es la opción predeterminada en los navegadores modernos, pero se recomienda especificarla para que sea compatible con otros navegadores que pueden tener valores predeterminados diferentes. Si marcas explícitamente la cookie como solo para el mismo sitio, la restringirás a tus contextos propios y no deberías tener que realizar cambios en esa cookie cuando desaparezcan las de terceros.

Para obtener más información sobre los diferentes atributos de cookies, consulta la documentación de Set-Cookie sobre MDN.

Si tienes un sitio con subdominios y deseas tener una sola sesión para todos ellos, es posible que el prefijo Host sea demasiado restrictivo. Por ejemplo, news.site podría tener subdominios para temas, como finance.news.site y sport.news.site, y quisieras tener una sesión de usuario en todos ellos. En ese caso, usa el prefijo __Secure en lugar de __Host y especifica Domain.

La receta

Set-Cookie:
__Secure-cookie-name=cookie-value;
Secure;
Domain=news.site;
Path=/;
HttpOnly;
Max-Age=7776000;
SameSite=Lax;
Detalles

Secure es un prefijo opcional que establece menos requisitos que Host: solo requiere que la cookie se configure con el atributo Secure.

Si bien las cookies de SameSite=Lax no se envían en las solicitudes secundarias entre sitios (por ejemplo, cuando se cargan imágenes incorporadas o iframes en un sitio de terceros), se envían cuando un usuario navega al sitio de origen (por ejemplo, cuando sigue un vínculo de un sitio diferente).

Puedes restringir aún más el acceso a las cookies e inhabilitar su envío junto con solicitudes iniciadas desde sitios web de terceros con SameSite=Strict. Esto es útil cuando tiene cookies relacionadas con funciones que siempre estarán detrás de una navegación inicial, como cambiar una contraseña o hacer una compra.

La receta

Set-Cookie:
__Host-cookie-name=cookie-value;
Secure;
Path=/;
HttpOnly;
Max-Age=7776000;
SameSite=Strict;