HTTP Inspection Guide

How to read and understand HTTP requests and responses in the cookie playground, including status codes, URLs, and headers.

Understanding HTTP Inspection

The playground includes an HTTP inspector that displays real-time HTTP traffic, showing requests and responses with full details.

Status Codes

Common Status Codes in Playground

200 OK

301 Moved Permanently

302 Found

404 Not Found

400 Bad Request

Status Code Interpretation

In HTTP Inspector:

What to Look For:

URLs in HTTP Inspector

Request URLs

Format: Full URL including protocol, domain, path, and query parameters

Example:

URL: https://cookie-playground.pun7o.click/index.html
URL: https://cookie-playground.pun7o.click/pixel?id=123&user=test

What to Check:

Response URLs

For Redirects:

Location: https://site-a.cookie-playground.pun7o.click/index.html

Interpretation:

Request Headers

Format:

Cookie: name1=value1; name2=value2; name3=value3

What It Shows:

Example:

Cookie: session=abc123; preference=dark; cart=item1,item2

What to Look For:

User-Agent Header

Format:

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36

Purpose:

Referer Header

Format:

Referer: https://example.com/previous-page

What It Shows:

Other Request Headers

Accept:

Accept: text/html,application/xhtml+xml

Accept-Language:

Accept-Language: en-US,en;q=0.9

Response Headers

Format:

Set-Cookie: name=value; Domain=example.com; Path=/; Secure; HttpOnly; SameSite=Strict; Max-Age=3600

What to Inspect:

  1. Cookie Name and Value: Basic data
  2. Domain: Which domains can access
  3. Path: Which paths cookie applies to
  4. Secure: HTTPS-only flag
  5. HttpOnly: JavaScript access restriction
  6. SameSite: Cross-site policy
  7. Max-Age/Expires: Expiration time

Example Analysis:

Set-Cookie: session=abc123; Domain=cookie-playground.pun7o.click; Path=/; Secure; HttpOnly; SameSite=Strict; Max-Age=86400

Breakdown:

Location Header (Redirects)

Format:

Location: https://target-domain.com/path

What It Shows:

Content-Type Header

Format:

Content-Type: text/html; charset=utf-8
Content-Type: image/gif

Purpose:

Cache-Control Header

Format:

Cache-Control: no-cache, no-store, must-revalidate

Purpose:

Using the HTTP Inspector

In Playground

Location: HTTP Request/Response Inspector panel on playground pages

What It Shows:

Features:

In Browser DevTools

Network Tab:

  1. Open DevTools (F12)
  2. Go to Network tab
  3. Enable "Preserve log"
  4. Filter by domain if needed
  5. Click on any request
  6. View Headers tab

What You See:

Reading HTTP Inspector Output

Example Output

═══════════════════════════════════════════════════════════
[14:30:15] Cookie Set
───────────────────────────────────────────────────────────
Set-Cookie: test=value123; Domain=cookie-playground.pun7o.click; Path=/; SameSite=Lax
───────────────────────────────────────────────────────────

[14:30:20] FETCH Request
───────────────────────────────────────────────────────────
URL: https://cookie-playground.pun7o.click/pixel?id=123
Method: GET
Headers: {
  "Cookie": "test=value123",
  "User-Agent": "Mozilla/5.0..."
}
───────────────────────────────────────────────────────────

[14:30:20] RESPONSE
Status: 200 OK
Header: Content-Type: image/gif
───────────────────────────────────────────────────────────

How to Read

  1. Timestamp: When request/response occurred
  2. Type: REQUEST, RESPONSE, Cookie Set, etc.
  3. Details: URL, method, status, headers
  4. Separators: ─── separates entries

Inspecting Specific Scenarios

What to Look For:

[timestamp] Cookie Set
Set-Cookie: name=value; Domain=...; Path=...; ...

Verify:

What to Look For:

[timestamp] Cookies Read
Cookie: name1=value1; name2=value2

Verify:

Scenario 3: Pixel Request

What to Look For:

URL: https://domain/pixel?id=123&event=click
Method: GET
Headers: {
  "Cookie": "...",
  "Referer": "..."
}

Verify:

Scenario 4: Redirect Flow

What to Look For:

[14:30:15] REQUEST
URL: https://redirect.domain.com/
Method: GET

[14:30:15] RESPONSE
Status: 301 Moved Permanently
Header: Location: https://target.domain.com/

[14:30:15] REQUEST (redirect follow)
URL: https://target.domain.com/
Method: GET
Cookie: ... (if sent)

Verify:

Common Patterns to Recognize

Set-Cookie: name=value; Domain=...; Path=...; ...
Status: 200 OK

Indicates: Cookie set successfully

Cookie: name1=value1; name2=value2

Indicates: Browser included cookies in request

Missing Cookie header or Cookie: (empty)

Possible Causes:

Status: 301 Moved Permanently
Location: https://target.com/
Cookie: session=abc (in follow-up request)

Indicates: Cookie sent with redirect (SameSite=Lax or None)

Troubleshooting with HTTP Inspector

Check:

  1. Set-Cookie header present in response?
  2. All attributes correct?
  3. Status code 200?
  4. Any errors in console?

Check:

  1. Cookie header in request?
  2. Domain matches request domain?
  3. Path matches request path?
  4. Cookie expired?
  5. SameSite blocking?

Unexpected Behavior

Check:

  1. All headers present?
  2. Status codes correct?
  3. URLs match expectations?
  4. Compare multiple requests

Advanced Inspection

Comparing Requests

  1. Set cookie with specific attributes
  2. Make request
  3. Check Cookie header
  4. Modify attributes
  5. Repeat request
  6. Compare headers

Timing Analysis

  1. Note timestamp of cookie set
  2. Note timestamp of request
  3. Verify cookie present if timing allows
  4. Check expiration times

Cross-Domain Inspection

  1. Set cookie on domain A
  2. Load pixel from domain B
  3. Inspect pixel request headers
  4. Verify cookie behavior

Browser DevTools vs Playground Inspector

Browser DevTools Advantages

Playground Inspector Advantages

Best Practice

Next Steps