Sec Fetch Mode

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 request header: Yes (Sec- prefix)

CORS-safelisted request header: No

Syntax

When making HTTP requests, the `Sec-Fetch-Mode` header indicates the mode of the fetch request, specifying how the request was initiated. Common modes include:

cors

navigate

no-cors

same-origin

websocket

Note: Servers should ignore this header if it contains an unrecognized 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

If a user clicks on a link to another page within the same website, the request will include specific headers indicating the nature of the request. For example, the header Sec-Fetch-Mode will be set to navigate, signifying a navigation request. The headers will typically look like this:

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

On the other hand, when a cross-site request is made, such as when an image is loaded from a different origin, the headers will reflect the different context. For example, the Sec-Fetch-Mode will be no-cors, and the request headers might look like this:

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

How to Modify Header using Requestly

Requestly is a powerful Chrome extension that allows you to modify HTTP headers, including the Sec-Fetch-Mode header. This can help you test how your web application responds to different fetch modes and improve security handling during development or debugging. Steps to Modify Sec-Fetch-Mode Header:

1. Install and open the Requestly Chrome extension. You can find it on the Chrome Web Store.
2. Create a new rule: Click on “Create Rule” and choose “Modify Headers” from the list of available rule types.
3. Add a new header modification:
   • Under “Action”, select “Add” or “Override”.
   • In the “Header Name” field, enter Sec-Fetch-Mode.
   • In the “Header Value” field, enter your preferred fetch mode (e.g., cors).
4. Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://your-api.com/\*).
5. Save the rule.

Once set up, Requestly will inject the Sec-Fetch-Mode header with your specified value into all matching requests, allowing you to simulate different fetch modes and verify how your server or security policies handle them.