Third-party cookie demo

The image and iframe on this page are from a different site:
3p-site.glitch.me

A Set-Cookie header is included with the response to the request for both the image and the iframe:

• Image: 3p-site.glitch.me/images/kittens.jpg
  Response header:
  Set-Cookie: cat=tabby; Path=/; Max-Age=86400; Secure; HTTPOnly
  This header has no SameSite attribute, so the default SameSite=Lax is applied. The Lax default blocks cross-site cookies except in response to following a link to a web page, so cross-site requests for this image will not include the cookie.
• Iframe: 3p-site.glitch.me/iframe/index.html
  Response header:
  Set-Cookie: cat=tabby; Path=/; Max-Age=86400; Secure; HTTPOnly SameSite=None
  This header has a SameSite=None attribute, so the cookie will be included in response to cross-site requests to this iframe.

Find out more: Cookie SameSite attribute

See how it works

1. Open the Chrome DevTools Network panel
2. Click on index.html (from the iframe) or kittens.jpg
3. In the Headers tab, view Set-Cookie in the Response Headers.
4. The first time you open the page, no cookies have been set yet, so there won't be a Cookie entry in the Request Headers.
5. Subsequent requests will include Cookie headers. A request for the image will include both the cat=tabby and iframe-seen=true cookies. Other requests will only include iframe-seen=true.
6. You can also view cookies from the Application panel. Try Ctrl-Alt-click to clear cookies, and then reopen the page.

You can view the backend Node code that sets the cookies in server.js.