diagram.mmd — flowchart
Secure Cookie Flow flowchart diagram

A secure cookie is an HTTP cookie configured with specific attributes that prevent it from being accessed by client-side JavaScript, transmitted over unencrypted connections, or sent in cross-origin requests — reducing the risk of session hijacking and cross-site attacks.

The four critical cookie security attributes are HttpOnly, Secure, SameSite, and Path/Domain scoping. Setting all of them correctly is the minimum baseline for any cookie holding session data or authentication tokens.

HttpOnly prevents JavaScript from reading the cookie via document.cookie. This eliminates the most common XSS attack vector: even if an attacker injects malicious script into your page, they cannot steal the session cookie. The cookie is still sent in HTTP requests automatically by the browser — it just cannot be read programmatically.

Secure instructs the browser to only transmit the cookie over HTTPS connections. On HTTP, the browser silently withholds the cookie. This prevents the cookie from being transmitted in plaintext if a user accidentally visits an HTTP URL.

SameSite controls whether the browser sends the cookie in cross-site requests. SameSite=Strict blocks the cookie on all cross-site requests, including navigations. SameSite=Lax (the default in modern browsers) allows the cookie on top-level navigations (clicking a link) but blocks it on subresource loads and XHR/fetch requests from other origins. SameSite=None allows cross-site sending but requires Secure. Lax or Strict provides strong CSRF protection without requiring a separate CSRF token for most flows.

Domain and Path scope the cookie to specific subdomains and URL paths, minimizing exposure. For authentication cookies, restricting to the exact domain and / path (or a more specific path) is appropriate.

See CSRF Protection Flow for how SameSite interacts with anti-CSRF tokens, and Secure Session Storage for the server-side session management that cookies reference.

Free online editor
Edit this diagram in Graphlet
Fork, modify, and export to SVG or PNG. No sign-up required.
Open in Graphlet →

Frequently asked questions

A secure cookie is an HTTP cookie configured with attributes that restrict how it is transmitted and accessed. The `HttpOnly`, `Secure`, and `SameSite` attributes together ensure the cookie cannot be read by JavaScript, cannot be sent over plain HTTP, and cannot be sent in cross-site requests — making it significantly harder to steal or misuse.
`HttpOnly` prevents JavaScript from accessing the cookie via `document.cookie`. Even if an attacker successfully executes a script on your page via XSS, they cannot exfiltrate the session cookie. The browser still sends the cookie automatically in HTTP requests — it just becomes invisible to scripts.
`SameSite=Strict` blocks the cookie on all cross-site requests, including top-level navigations like clicking a link from an external page. `SameSite=Lax` (the browser default) allows the cookie on top-level GET navigations but blocks it on cross-site subresource requests and XHR/fetch calls. `Strict` is safer; `Lax` balances security with usability for sites that need external links to preserve session state.
mermaid
flowchart TD A[User authenticates successfully] --> B[Server generates session token\nor signed cookie value] B --> C[Server sets cookie in response\nSet-Cookie header] C --> D["Cookie attributes applied:\nHttpOnly — no JS access\nSecure — HTTPS only\nSameSite=Lax — CSRF protection\nPath=/ — scoped to site"] D --> E[Browser stores cookie\nin cookie jar] E --> F[Browser makes subsequent request\nto same origin] F --> G{SameSite check:\nIs request same-site?} G -- Yes or Lax navigation --> H[Browser attaches cookie\nin Cookie header] G -- Cross-site POST or XHR --> I[Browser withholds cookie\nSameSite=Lax blocks it] H --> J{Secure check:\nIs connection HTTPS?} J -- Yes --> K[Cookie sent in request] J -- No --> L[Browser withholds cookie\nSecure flag blocks HTTP] K --> M[Server validates cookie value\nvia session lookup or signature] M --> N{Valid session?} N -- Yes --> O[Return authenticated response] N -- No --> P[Redirect to login]
Copied to clipboard