cross-site

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").

same-origin

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

same-site

The request initiator and the server hosting the resource have the same scheme, domain and/or subdomain, but not necessarily the same port.

none

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.

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:

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:

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

• Related headers
  • Sec-Fetch-Mode
  • Sec-Fetch-User
  • Sec-Fetch-Dest
• Protect your resources from web attacks with Fetch Metadata (web.dev)
• Fetch Metadata Request Headers playground (secmetadata.appspot.com)