Sec-Fetch-Mode HTTP Header: Syntax, Directive, Examples

The Sec-Fetch-Mode HTTP Header fetches metadata request header specifies the request mode. In general, this enables a server to differentiate between requests originating from a user moving between HTML pages and requests to load graphics and other resources. For example, navigate is used for top-level navigation requests, while no-cors is used to load an image. There are multiple values for the Sec-Fetch-Mode HTTP Header. The syntax values for the Sec-Fetch-Mode HTTP Header are cors, navigate, no-cors, same-origin, and WebSocket. The example of a Sec-Fetch-Mode HTTP Header is written below.

Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1

The Sec-Fetch-Mode HTTP Header Request Header can be seen above. In this article, the Sec-Fetch-Mode HTTP Header Syntax, Directives and Uses example will be processed.

What is Sec-Fetch-Mode HTTP Header?

The Sec-Fetch-Mode is a special mode of retrieval. The Sec-Fetch-Mode HTTP Header is used to specify the type of request being made. As a rule, this allows a server to distinguish between requests originating from a user who is switching between HTML pages and requests to load graphics and other resources. 

What is the Syntax of Sec-Fetch-Mode HTTP Header?

The Sec-Fetch-Mode HTTP Header contains five values in its syntax. The syntax for using Sec-Fetch-Mode HTTP Header is written below.

Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1

What are the Directives of Sec-Fetch-Mode HTTP Header?

There are multiple directives that can be put in the Sec-Fetch-Mode HTTP Header. The directives for using the Sec-Fetch-Mode HTTP Header are given below.

  • cors: The request is made over the CORS protocol.
  • navigate: The request is triggered by navigating across HTML documents on the same page.
  • no-cors: No-cors requests are those that do not require a response.
  • same-origin: The request is made from the same origin as the resource that is being sought, which ensures that the request is successful.
  • websocket: A WebSocket connection request is being made.

An example of a directive for the Sec-Fetch-Mode HTTP Header is written below.

Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1

How to use Sec-Fetch-Mode HTTP Header?

The Sec-Fetch-Mode is a special mode of retrieval. When making a request, the HTTP header is used to describe what sort of request is being made. A server can distinguish between requests coming from users who are switching between HTML pages and requests to load graphics and other resources, as a rule, as a result of using this technique.

Examples of Sec-Fetch-Mode HTTP Header Use

The examples of the Sec-Fetch-Mode HTTP Header used are listed below. 

If a user clicks on a page link to another page of the same origin, the succeeding request will include the headers shown below. Take note that the mode is navigating.

Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1

 A cross-site request made by an <img> element would make a request with these HTTP request headers. The mode is no-cors.

Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site

What is the Specification Document for Sec-Fetch-Mode HTTP Header?

There is only one specification document for the Sec-Fetch-Mode HTTP Header which is the Fetch Metadata Request Headers. The Fetch Metadata Request Headers (Fetch Metadata) Article 1.1 mentions the Sec-Fetch-Mode HTTP Header example of users using multiple directive values. Additionally, this article discusses the Sec-Fetch-Mode HTTP Header’s definition and usage.

What is the type of Sec-Fetch-Mode HTTP Header?

The Sec-Fetch-Mode HTTP Header Type is Request Header only that indicates the mode of the request. It also contains more information about the resource to be fetched, or about the client requesting the resource.

What are the similar HTTP Headers to the Sec-Fetch-Mode HTTP Header?

The similar HTTP Headers to the Sec-Fetch-Mode HTTP Header are listed below.

  • Sec-Fetch-Dest HTTP Header: The Sec-Fetch-Dest specifies the destination of the request. This HTTP Header is comparable to the Sec-Fetch-Mode HTTP Header in that they both have the same HTTP Header Type, which is the Fetch Metadata Request Header.
  • Sec-Fetch-User HTTP Header: The Sec-Fetch-User HTTP Header Type is similar to the Sec-Fetch-Mode HTTP Header Type in that it is a fetch metadata request header. User-activated requests are the only ones for which this HTTP Header is sent, and the value it contains is always the same.
  • Sec-Fetch-Site HTTP Header: The Sec-Fetch-Site HTTP Header establishes the connection between the origin of the request initiator and the origin of the requested resource. This HTTP Header is comparable to the Sec-Fetch-Mode HTTP Header in that they both have the same HTTP Header Type, which is the Fetch Metadata Request Header.

Which Browsers Support Sec-Fetch-Mode HTTP Header? 

There are multiple browsers that support Sec-Fetch-Mode HTTP Headers. The following browsers are listed below.

  • Chrome Browser is compatible e with the Sec-Fetch-Mode HTTP Headers
  • Edge Browser is compatible e with the Sec-Fetch-Mode HTTP Headers
  • Firefox Browser is compatible e with the Sec-Fetch-Mode HTTP Headers
  • Opera Browser is compatible e with the Sec-Fetch-Mode HTTP Headers
  • WebView Android Browser is compatible e with the Sec-Fetch-Mode HTTP Headers
  • Chrome Android Browser is compatible e with the Sec-Fetch-Mode HTTP Headers
  • Firefox Android Browser is compatible e with the Sec-Fetch-Mode HTTP Headers
  • Opera Android Browser is compatible e with the Sec-Fetch-Mode HTTP Headers
  • Samsung Internet Browser is compatible e with the Sec-Fetch-Mode HTTP Headers

You can see an image that shows cross-browsers compatibility of Sec-Fetch-Mode HTTP Headers below. 

Sec-Fetch-Mode HTTP Headers
Holistic SEO
Follow SEO

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.