Cookies de SameSite explicadas

Browser Support

  • Chrome: 51.
  • Edge: 16.
  • Firefox: 60.
  • Safari: 13.

Source

Cada cookie contiene un par clave-valor junto con una cantidad de atributos que controlan cuándo y dónde se usa esa cookie.

La introducción del atributo SameSite (definido en RFC6265bis) te permite declarar si tu cookie está restringida a un contexto de origen o del mismo sitio. Es útil comprender exactamente qué significa "sitio" en este contexto. El sitio es la combinación del sufijo de dominio y la parte del dominio que lo precede. Por ejemplo, el dominio www.web.dev forma parte del sitio web.dev.

Término clave: Si el usuario está en www.web.dev y solicita una imagen de static.web.dev, se trata de una solicitud de mismo sitio.

La lista de sufijos públicos define qué páginas se consideran en el mismo sitio. No solo depende de dominios de nivel superior, como .com, sino que también puede incluir servicios como github.io. Esto permite que your-project.github.io y my-project.github.io se consideren sitios independientes.

Término clave: Si el usuario está en your-project.github.io y solicita una imagen de my-project.github.io, se trata de una solicitud de varios sitios.

Usa el atributo SameSite para declarar el uso de cookies

El atributo SameSite en una cookie proporciona tres formas diferentes de controlar este comportamiento. Puedes optar por no especificar el atributo o usar Strict o Lax para limitar la cookie a las solicitudes del mismo sitio.

Si configuras SameSite como Strict, tu cookie solo se puede enviar en un contexto de origen; es decir, si el sitio de la cookie coincide con el sitio que se muestra en la barra de direcciones del navegador. Por lo tanto, si la cookie promo_shown se establece de la siguiente manera:

Set-Cookie: promo_shown=1; SameSite=Strict

Cuando el usuario está en tu sitio, la cookie se envía con la solicitud según lo previsto. Sin embargo, si el usuario sigue un vínculo a tu sitio desde otro, la cookie no se envía en esa solicitud inicial. Esto es adecuado para las cookies relacionadas con funciones que siempre están detrás de una navegación inicial, como cambiar una contraseña o realizar una compra, pero es demasiado restrictivo para una cookie como promo_shown. Si el lector sigue el vínculo al sitio, querrá que se envíe la cookie para que se aplique su preferencia.

SameSite=Lax permite que el navegador envíe la cookie con estas navegaciones de nivel superior. Por ejemplo, si otro sitio hace referencia al contenido de tu sitio, en este caso, usando tu foto de gato y proporcionando un vínculo a tu artículo de la siguiente manera:

<p>Look at this amazing cat!</p>
<img src="https://blog.example/blog/img/amazing-cat.png" />
<p>Read the <a href="https://blog.example/blog/cat.html">article</a>.</p>

Con una cookie establecida en Lax de la siguiente manera:

Set-Cookie: promo_shown=1; SameSite=Lax

Cuando el navegador solicita amazing-cat.png para el blog de la otra persona, tu sitio no envía la cookie. Sin embargo, cuando el lector sigue el vínculo a cat.html en tu sitio, esa solicitud sí incluye la cookie.

Recomendamos usar SameSite de esta manera, configurar las cookies que afectan la visualización del sitio web en Lax y las cookies relacionadas con las acciones del usuario en Strict.

También puedes establecer SameSite en None para indicar que deseas que la cookie se envíe en todos los contextos. Si proporcionas un servicio que consumen otros sitios, como widgets, contenido incorporado, programas de afiliados, publicidad o acceso en varios sitios, usa None para asegurarte de que tu intención sea clara.