🎉 Requestly joins BrowserStack to build the future of application testing. Read more

HTTP Headers

Sec Fetch Site

HTTP Header

The HTTP Sec-Fetch-Site fetch metadata request header indicates the relationship between a request initiator’s origin and the origin of the requested resource.

In other words, this header informs a server whether a resource request is originating from the same origin, a different site, or is a user-initiated request. This information helps the server determine if the request should be permitted.

Requests originating from the same site are typically allowed by default. However, requests from other origins may be subject to additional policies based on the requested resource or other fetch metadata headers. Non-accepted requests are generally rejected with a 403 response code.

Below is a summary of the fetch metadata request header properties:

  • Header type: Fetch Metadata Request Header
  • Forbidden request header: Yes (Sec- prefix)
  • CORS-safelisted request header: No

Syntax

Syntax

http
Sec-Fetch-Site: cross-site
Sec-Fetch-Site: same-origin
Sec-Fetch-Site: same-site
Sec-Fetch-Site: none

Directives

Directives

The request initiator and the server hosting the resource have a different site (i.e., a request by “potentially-evil.com” for a resource at “example.com”).

The request initiator and the server hosting the resource have the same origin (same scheme, host, and port).

The request initiator and the server hosting the resource have the same site, including the scheme.

This request is a user-originated operation. For example: entering a URL into the address bar, opening a bookmark, or dragging-and-dropping a file into the browser window.

Example

Examples

A fetch request to https://mysite.example/foo.json originating from a web page on https://mysite.example (with the same port) is a same-origin request.
The browser will generate the Sec-Fetch-Site: same-origin header as shown below, and the server will typically allow the request:

http
GET /foo.json
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin

A fetch request to the same URL from another site, for example potentially-evil.com, causes the browser to generate a different header (e.g., Sec-Fetch-Site: cross-site), which the server can choose to accept or reject:

http
GET /foo.json
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site

How to Modify Header using Requestly

Requestly is a powerful Chrome extension that allows you to modify HTTP headers, including the Sec-Fetch-Site header. This is important for developers and testers who need to simulate requests coming from different origins to understand how their web applications respond to cross-site requests and enforce security policies. Steps to Modify the Sec-Fetch-Site Header:

  1. Install and open the Requestly Chrome extension. You can find it on the Chrome Web Store.
  2. Create a new rule: Click on “Create Rule” and choose “Modify Headers” from the list of available rule types.
  3. Add a new header modification:
    • Under “Action”, select “Add” or “Override”.
    • In the “Header Name” field, enter Sec-Fetch-Site.
    • In the “Header Value” field, enter the desired value, such as same-origin, cross-site, or same-site.
  4. Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://your-website.com/*).
  5. Save the rule.

Once configured, Requestly will insert your custom Sec-Fetch-Site header into all matching requests, enabling you to test how your application or server handles requests from different origins or sites.