The HTTPSec-Fetch-Modefetch metadata request header indicates themode 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 containnavigate for top level navigation requests, whileno-cors is used for loading an image.

Syntax

Sec-Fetch-Mode: corsSec-Fetch-Mode: navigateSec-Fetch-Mode: no-corsSec-Fetch-Mode: same-originSec-Fetch-Mode: websocket

Servers should ignore this header if it contains any other value.

Directives

cors

The request is aCORS protocol request.

navigate

The request is initiated by navigation between HTML documents.

no-cors

The request is a no-cors request (seeRequest.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 aWebSocket 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 isnavigate):

Sec-Fetch-Dest: documentSec-Fetch-Mode: navigateSec-Fetch-Site: same-originSec-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 isno-cors):

Sec-Fetch-Dest: imageSec-Fetch-Mode: no-corsSec-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)