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

http
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):

http
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):

http
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