Sec-Fetch-Mode
Baseline 2023
Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The HTTP Sec-Fetch-Mode
fetch metadata request header indicates the mode of the request.
Broadly speaking, this allows a server to distinguish between requests originating from a user navigating between HTML pages, and requests to load images and other resources.
For example, this header would contain navigate
for top level navigation requests, while no-cors
is used for loading an image.
Header type | Fetch Metadata Request Header |
---|---|
Forbidden header name | Yes (Sec- prefix) |
CORS-safelisted request header | No |
Syntax
Sec-Fetch-Mode: cors
Sec-Fetch-Mode: navigate
Sec-Fetch-Mode: no-cors
Sec-Fetch-Mode: same-origin
Sec-Fetch-Mode: websocket
Servers should ignore this header if it contains any other value.
Directives
Note:
These directives correspond to the values in Request.mode
.
cors
-
The request is a CORS protocol request.
-
The request is initiated by navigation between HTML documents.
no-cors
-
The request is a no-cors request (see
Request.mode
). same-origin
-
The request is made from the same origin as the resource that is being requested.
websocket
-
The request is being made to establish a WebSocket connection.
Examples
Using Sec-Fetch-Mode
If a user clicks on a page link to another page on the same origin, the resulting request would have the following headers (note that the mode is navigate
):
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1
A cross-site request generated by an <img>
element would result in a request with the following HTTP request headers (note that the mode is no-cors
):
Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site
Specifications
Specification |
---|
Fetch Metadata Request Headers # sec-fetch-mode-header |
Browser compatibility
BCD tables only load in the browser
See also
Sec-Fetch-Dest
,Sec-Fetch-Site
,Sec-Fetch-User
fetch metadata request headers- Protect your resources from web attacks with Fetch Metadata (web.dev)
- Fetch Metadata Request Headers playground (secmetadata.appspot.com)