Sec-Fetch-Site
General Summary
Section titled “General Summary”Indicates the relationship between a request initiator’s origin and its target’s origin. It is a Structured Header whose value is a token with possible values cross-site, same-origin, same-site, and none.
Detailed Description
Section titled “Detailed Description”The Sec-Fetch-Site HTTP header is a specialized field used to indicates the relationship between a request initiator’s origin and its target’s origin. It is a Structured Header whose value is a token with possible values cross-site, same-origin, same-site, and none. It acts as a signaling mechanism between the client and the server to enforce policies, negotiate capabilities, or provide telemetry data during the transmission of requests and responses.
Use Cases (When, Why, and How)
Section titled “Use Cases (When, Why, and How)”When to Use It
Section titled “When to Use It”This header is primarily utilized when the client or browser needs to declare its context or capabilities prior to establishing the transaction. Modern web applications rely on this to maintain state and context.
Why to Use It
Section titled “Why to Use It”It facilitates seamless programmatic integration by ensuring both the client and server agree on the terms of the transaction, greatly improving performance, security, and rendering correctness without manual user intervention.
How to Use It
Section titled “How to Use It”Implement or parse this header within your application’s network layer (such as an Express middleware or a Next.js edge function) by reading or attaching the key-value pair:
Sec-Fetch-Site: <appropriate-value>Example
Section titled “Example”Sec-Fetch-Site: <value>