Sec-Fetch-Mode header

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](https://developer.mozilla.org/en-US/docs/Glossary/Fetch%20Metadata%20Request%20Header)
[Forbidden request header](https://developer.mozilla.org/en-US/docs/Glossary/Forbidden%20request%20header)	Yes (Sec- prefix)
[CORS-safelisted request header](https://developer.mozilla.org/en-US/docs/Glossary/CORS-safelisted%20request%20header)	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.
• navigate
  • : 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

Browser compatibility

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)