Using the Playground

This guide explains how to use the cookie playground infrastructure.

Accessing the Playground

After deployment, access the playground at:

Available Pages

Main Playground Page (/index.html)

Interactive cookie testing interface with:

Parent-Subdomain Test Page (/parent-subdomain-test.html)

Dedicated testing for parent-subdomain cookie relationships:

Cross-Domain Test Page (/cross-domain.html) - Subdomains Only

Testing cross-domain cookie scenarios:

  1. Fill in Cookie Details:

    • Name: Cookie identifier
    • Value: Cookie data
    • Domain: Leave empty for current domain, or specify parent/subdomain
    • Path: URL path where cookie is valid
    • SameSite: Cookie same-site policy
    • Secure: HTTPS-only flag
    • HttpOnly: JavaScript access restriction
    • Max-Age: Cookie lifetime in seconds

  2. Set Cookie: Click "Set Cookie" button

  3. Observe:

    • HTTP inspector shows Set-Cookie header
    • Cookie display updates
    • Status code and headers visible

HTTP Inspector

The HTTP inspector shows:

Pixel Endpoints

Each domain has a pixel endpoint at /pixel:

Example:

<img src="https://cookie-playground.pun7o.click/pixel?id=123&user=test" />

Testing Workflows

  1. Visit main playground page
  2. Set a cookie with default attributes
  3. Read cookies to verify
  4. Check HTTP inspector for Set-Cookie header

Sequence Diagram:

sequenceDiagram participant User participant Playground as Playground
(cookie-playground.pun7o.click) participant Browser participant Inspector as HTTP Inspector User->>Playground: Visit cookie-playground.pun7o.click Playground->>Browser: HTML page with cookie form Browser->>User: Display cookie playground User->>Playground: Fill form: name=test, value=123
Click Set Cookie Browser->>Browser: "Execute JavaScript
document.cookie = test=123#59; Path=/" Browser->>Inspector: Log: Cookie Set
Set-Cookie: test=123
Path=/ Inspector-->>Browser: Display in HTTP inspector User->>Playground: Click Read All Cookies Browser->>Browser: Read document.cookie Browser->>Inspector: Log: Cookies Read
Cookie: test=123 Browser->>User: Display: test=123 Inspector-->>Browser: Show HTTP details

Workflow 2: Parent-Subdomain Testing

  1. Visit parent domain test page
  2. Set cookie with Domain=cookie-playground.pun7o.click
  3. Navigate to subdomain A
  4. Verify cookie is accessible
  5. Set cookie with Domain=site-a.cookie-playground.pun7o.click
  6. Return to parent domain
  7. Verify parent cannot access subdomain cookie

Sequence Diagram:

sequenceDiagram participant User participant Parent as Parent Domain
(cookie-playground.pun7o.click) participant SubA as Subdomain A
(site-a.cookie-playground.pun7o.click) participant Browser User->>Parent: Visit parent-subdomain-test.html User->>Browser: Click Set Cookie with Domain=cookie-playground.pun7o.click Browser->>Browser: "document.cookie = parent_cookie=value#59; Domain=cookie-playground.pun7o.click" Browser->>Browser: Store cookie User->>SubA: Navigate to site-a.cookie-playground.pun7o.click/parent-subdomain-test.html User->>Browser: Click Read Cookies Browser->>Browser: Check cookies for site-a.cookie-playground.pun7o.click Browser->>Browser: Find parent_cookie (Domain=cookie-playground.pun7o.click matches) Browser->>User: Display: parent_cookie=value Note over Browser: Subdomain can access parent cookie ✓ User->>Browser: Click Set Cookie with Domain=site-a.cookie-playground.pun7o.click Browser->>Browser: "document.cookie = subdomain_cookie=value#59; Domain=site-a.cookie-playground.pun7o.click" User->>Parent: Navigate to cookie-playground.pun7o.click/parent-subdomain-test.html User->>Browser: Click Read Cookies Browser->>Browser: Check cookies for cookie-playground.pun7o.click Browser->>Browser: subdomain_cookie NOT found (Domain mismatch) Browser->>User: Display: parent_cookie=value (subdomain_cookie NOT shown) Note over Browser: Parent cannot access subdomain cookie ✗

Workflow 3: Cross-Domain Pixel Testing

  1. Visit subdomain A
  2. Load pixel from parent domain
  3. Check HTTP inspector for request/response
  4. Verify CloudWatch logs for pixel activity

Sequence Diagram:

sequenceDiagram participant User participant SubA as Subdomain A
(site-a.cookie-playground.pun7o.click) participant Parent as Parent Domain
(cookie-playground.pun7o.click) participant Browser participant CloudWatch as CloudWatch Logs User->>SubA: Visit site-a.cookie-playground.pun7o.click SubA->>Browser: HTML page with pixel tag Browser->>Browser: Set cookie: user_id=test123
(first-party cookie on subdomain A) Browser->>Parent: GET /pixel?id=123&user=test123 HTTP/1.1
Cookie: (parent cookies if any) Parent->>Parent: Lambda: pixel-handler executes
Extract query params: id=123, user=test123
Extract headers: Cookie, User-Agent, Referer Parent->>CloudWatch: PutLogEvents
{timestamp, params, headers, IP} CloudWatch-->>Parent: Log entry created Parent->>Browser: HTTP 200 OK
Content-Type: image/gif
1x1 transparent GIF Browser->>Browser: Render pixel (invisible) User->>CloudWatch: Check logs (AWS Console) CloudWatch-->>User: Display log entry with pixel request details

CloudWatch Logs

Pixel endpoint requests are logged to CloudWatch:

View logs in AWS Console or CLI:

aws logs tail /aws/lambda/cookie-playground-pixel-main --follow

Browser Developer Tools

For deeper inspection:

  1. Open Browser DevTools (F12)
  2. Go to Network tab
  3. Filter by domain
  4. Inspect requests/responses
  5. View Cookies tab for all stored cookies

Tips

Next Steps