Recetas de galletas propias

Obtén información para configurar cookies propias y garantizar la seguridad, la compatibilidad entre navegadores y minimizar las posibilidades de que se produzcan errores una vez que se eliminen gradualmente las cookies de terceros.

Las cookies pueden ser propias o de terceros en relación con el contexto del usuario, según el sitio en el que se encuentre en ese momento. Si el dominio registrable y el esquema 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 considera que la cookie proviene del mismo sitio que la página y, por lo general, se denomina cookie propia.

Por lo general, las cookies de dominios distintos del sitio actual se denominan cookies de terceros.

Si la cookie que estableces no se usa entre sitios, por ejemplo, se usa 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, a las que se puede acceder a través de JavaScript y enviar a través de conexiones HTTP, lo que conlleva algunos riesgos de privacidad y seguridad. Si bien se está trabajando para mejorar el comportamiento predeterminado, a través de Privacy Sandbox y otras propuestas, como las cookies vinculadas al origen, hoy puedes hacer mucho si configuras atributos adicionales en tus 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;

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

  • 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 de acuerdo con las reglas de __Host y rechazar la cookie si no es así.

Secure protege las cookies contra el robo en redes no seguras, ya que solo permite enviarlas a través de conexiones HTTPS. Si aún no migraste tu sitio a HTTPS, hazlo una 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 tienes diferentes apps que se ejecutan en diferentes subdominios, se reduce el riesgo de que un dominio comprometido permita el acceso a los 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 configuras Path=/, la cookie se enviará a todas las rutas de URL de ese dominio. La combinación de no Domain y Path=/ hace que la cookie esté vinculada al origen lo más cerca posible, por lo que se comporta de manera similar a otros almacenamientos del cliente, como LocalStorage. No hay confusión de que example.com/a pueda recibir valores diferentes a example.com/b.

El atributo HttpOnly agrega cierta protección contra secuencias de comandos de terceros maliciosas en tus sitios, ya que restringe el acceso de 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 vida de una cookie, ya que las sesiones del navegador pueden durar bastante tiempo y no quieres que las cookies inactivas permanezcan 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. Esta es una configuración predeterminada razonable que puedes cambiar según tu caso de uso.

SameSite=Lax restringe la cookie para que solo se envíe 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 está visitando actualmente y que se muestra en la barra de ubicación. SameSite=Lax es el valor predeterminado en los navegadores modernos, pero es recomendable especificarlo para garantizar la compatibilidad con los 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 en MDN.

Si tienes un sitio con subdominios y deseas tener una sesión en todos ellos, el prefijo Host puede ser demasiado restrictivo. Por ejemplo, news.site podría tener subdominios para temas, como finance.news.site y sport.news.site, y te gustaría 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;

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 SameSite=Lax no se envían en subsolicitudes entre sitios (por ejemplo, cuando se cargan imágenes o iframes incorporados en un sitio de terceros), se envían cuando un usuario navega al sitio de origen (por ejemplo, cuando sigue un vínculo desde otro sitio).

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

La receta

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