Testing Cookie Scenarios - Visual Guide

This guide provides step-by-step instructions and visual flows for testing different cookie scenarios in the playground. Each scenario includes Mermaid diagrams showing the complete request/response flow.

Table of Contents

1. Basic Cookie Setting and Reading
2. SameSite Attribute Testing
3. Domain Attribute Testing
4. Cross-Domain Cookie Scenarios
5. Parent-Subdomain Cookie Sharing
6. Secure Flag Testing
7. Pixel Tracking Scenarios
8. Redirect Cookie Behavior

Basic Cookie Setting and Reading

Scenario: Set and Read a Simple Cookie

Objective: Understand basic cookie lifecycle - setting, storing, and reading.

Test Steps:

1. Navigate to cookie-playground.pun7o.click
2. Open Browser Developer Tools (F12)
3. Go to Application → Cookies
4. Fill cookie form:
   • Name: test_cookie
   • Value: test_value
   • Path: /
5. Click "Set Cookie"
6. Click "Read All Cookies"

Flow Diagram:

What to Observe:

• Cookie appears in Developer Tools → Application → Cookies
• Cookie value matches what was set
• Cookie accessible via document.cookie in Console
• Cookie persists after page refresh

SameSite Attribute Testing

Scenario 1: SameSite=Lax (Default)

Objective: Understand how SameSite=Lax cookies work with top-level navigation.

Test Steps:

1. Visit cookie-playground.pun7o.click
2. Set cookie: session=abc123; SameSite=Lax; Path=/
3. Open new tab and navigate directly to cookie-playground.pun7o.click
4. Check if cookie is sent

Flow Diagram - Top-Level Navigation:

Scenario 2: SameSite=Strict

Objective: Understand how SameSite=Strict prevents cookie sending in cross-site contexts.

Test Steps:

1. Visit site-a.cookie-playground.pun7o.click
2. Set cookie: strict_session=xyz789; SameSite=Strict; Path=/
3. From site-b.cookie-playground.pun7o.click , add an iframe pointing to site-a.cookie-playground.pun7o.click
4. Check if cookie is sent

Flow Diagram - SameSite=Strict Cross-Site:

Scenario 3: SameSite=None with Secure

Objective: Understand how SameSite=None requires Secure flag for cross-site cookies.

Test Steps:

1. Visit site-a.cookie-playground.pun7o.click
2. Set cookie: cross_site=test123; SameSite=None; Secure; Path=/
3. From site-b.cookie-playground.pun7o.click , load pixel from site-a.cookie-playground.pun7o.click
4. Check if cookie is sent

Flow Diagram - SameSite=None Cross-Site:

Domain Attribute Testing

Scenario: Parent Domain Cookie Access

Objective: Test how cookies with Domain=cookie-playground.pun7o.click are accessible from subdomains.

Test Steps:

1. Visit cookie-playground.pun7o.click
2. Set cookie: shared_session=parent123; Domain=cookie-playground.pun7o.click; Path=/
3. Navigate to site-a.cookie-playground.pun7o.click
4. Check if cookie is accessible
5. Navigate to site-b.cookie-playground.pun7o.click
6. Check if cookie is accessible

Flow Diagram - Parent Domain Cookie Sharing:

Scenario: Subdomain-Specific Cookie

Objective: Test how cookies with Domain=site-a.cookie-playground.pun7o.click are NOT accessible from parent or other subdomains.

Test Steps:

1. Visit site-a.cookie-playground.pun7o.click
2. Set cookie: subdomain_only=abc; Domain=site-a.cookie-playground.pun7o.click; Path=/
3. Navigate to cookie-playground.pun7o.click
4. Check if cookie is accessible (should NOT be)
5. Navigate to site-b.cookie-playground.pun7o.click
6. Check if cookie is accessible (should NOT be)

Flow Diagram - Subdomain-Specific Cookie:

Cross-Domain Cookie Scenarios

Scenario: Third-Party Pixel Tracking

Objective: Test how cookies work when loading a pixel from a different subdomain.

Test Steps:

1. Visit site-a.cookie-playground.pun7o.click
2. Load page containing pixel: <img src="https://site-b.cookie-playground.pun7o.click/pixel?id=123" />
3. Check Network tab for pixel request
4. Check if cookies from site-b.cookie-playground.pun7o.click are sent

Flow Diagram - Third-Party Pixel:

Parent-Subdomain Cookie Sharing

Scenario: Shared Session Across Subdomains

Objective: Test setting a cookie on parent domain and accessing it from subdomains.

Test Steps:

1. Visit cookie-playground.pun7o.click/parent-subdomain-test.html
2. Click "Set Cookie on Parent Domain"
3. Verify cookie is set with Domain=cookie-playground.pun7o.click
4. Navigate to site-a.cookie-playground.pun7o.click
5. Check if cookie is accessible
6. Navigate to site-b.cookie-playground.pun7o.click
7. Check if cookie is accessible

Flow Diagram - Shared Session:

Secure Flag Testing

Scenario: Secure Cookie on HTTPS

Objective: Verify Secure flag works correctly on HTTPS connections.

Test Steps:

1. Visit cookie-playground.pun7o.click (HTTPS)
2. Set cookie: secure_cookie=test; Secure; Path=/
3. Check in Developer Tools that cookie has Secure flag
4. Verify cookie is sent with subsequent HTTPS requests
5. Try to access via HTTP (if available) - cookie should NOT be sent

Flow Diagram - Secure Flag:

Pixel Tracking Scenarios

Scenario: Cookie Sync via Pixel

Objective: Test how pixel requests can sync cookies across domains for tracking.

Test Steps:

1. Visit site-a.cookie-playground.pun7o.click
2. Set cookie: user_id=abc123; SameSite=None; Secure; Path=/
3. Page contains pixel: <img src="https://site-b.cookie-playground.pun7o.click/pixel?user=abc123" />
4. Check Network tab for pixel request
5. Check CloudWatch logs for logged query parameters

Flow Diagram - Cookie Sync Pixel:

Redirect Cookie Behavior

Scenario: Cookie Preservation Through Redirect

Objective: Test how cookies behave when following HTTP redirects.

Test Steps:

1. Visit site-c.cookie-playground.pun7o.click
2. Observe 301 redirect to site-a.cookie-playground.pun7o.click
3. Check if cookies set on redirect domain are preserved
4. Check if cookies from target domain are accessible

Flow Diagram - Redirect with Cookies:

Testing Checklist

Use this checklist to verify each scenario:

Basic Cookie Operations

• Set cookie via form
• Read cookie via JavaScript
• Cookie persists after page refresh
• Cookie visible in Developer Tools
• Cookie accessible via document.cookie

SameSite Attributes

• SameSite=Lax allows top-level navigation
• SameSite=Strict blocks cross-site requests
• SameSite=None requires Secure flag
• SameSite=None works with cross-site pixels

Domain Attribute

• Parent domain cookie accessible from subdomains
• Subdomain cookie NOT accessible from parent
• Subdomain cookie NOT accessible from other subdomains
• Domain attribute affects cookie scope correctly

Secure Flag

• Secure cookie stored on HTTPS
• Secure cookie sent with HTTPS requests
• Secure cookie NOT sent with HTTP (if available)

Cross-Domain Scenarios

• Third-party pixel receives cookies (if SameSite allows)
• Cross-domain cookie sync works
• CloudWatch logs capture pixel requests

Redirect Behavior

• Redirect preserves cookies (if SameSite allows)
• Target domain receives redirected requests
• Cookies set on target domain work correctly

Tips for Testing

1. Use Browser Developer Tools:

   • Network tab: See all HTTP requests/responses
   • Application tab: View stored cookies
   • Console tab: Execute JavaScript cookie commands

2. Clear State Between Tests:

   • Clear cookies and cache
   • Use Incognito/Private mode
   • Start with clean browser state

3. Verify in Multiple Browsers:

   • Chrome/Edge (Chromium)
   • Firefox
   • Safari
   • Different browsers may handle cookies differently

4. Check CloudWatch Logs:

   • Pixel requests are logged
   • Query parameters captured
   • Request headers visible

5. Test Edge Cases:

   • Very long cookie values
   • Special characters in cookie names/values
   • Expired cookies (Max-Age=0)
   • Multiple cookies with same name, different paths

Next Steps

After completing these scenarios:

1. Review Cookie Fundamentals for theory
2. Check Cookie Attributes for details
3. Explore Marketing Use Cases for real-world examples
4. Read Troubleshooting if you encounter issues