First-party cookie demo

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

• Image: 1pc.glitch.me/images/kittens.jpg
  Response header: Set-Cookie: cat=tabby; Max-Age=86400; Secure; HTTPOnly
  This header has no Path attribute, so the cookie will only be included with requests to the /images directory.
• Iframe: 1pc.glitch.me/iframe/index.html
  Response header: Set-Cookie: iframe-seen=true; Path=/; Secure; HTTPOnly
  This header has a Path=/ attribute, so the cookie will be included with requests to this site. No Max-Age or Expires attribute is set, so this cookie will be deleted at the end of the browser session.

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.

Cookie blocking

In Chrome, try out cookie blocking by selecting "Don't allow sites to save data on your device" from chrome://settings/content/siteData.

With cookies blocked, you can check from the Chrome DevTools Network panel that no Cookie header is included in Request Headers. Try turning the setting on and off again.