HTTP Headers
Sec Fetch Mode
HTTP 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
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
Directives
Directives
Note:
These directives correspond to the values in Request.mode.
- Name=”cors”>cors
The request is a CORS protocol request.
- Name=”navigate”>navigate
The request is initiated by navigation between HTML documents.
- Name=”no-cors”>no-cors
The request is a no-cors request (see
Request.mode).- Name=”same-origin”>same-origin
The request is made from the same origin as the resource that is being requested.
- Name=”websocket”>websocket
The request is being made to establish a WebSocket connection.
Example
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:
http
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:
http
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:
- Install and open the Requestly Chrome extension. You can find it on the Chrome Web Store.
- Create a new rule: Click on “Create Rule” and choose “Modify Headers” from the list of available rule types.
- 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).
- Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://your-api.com/*).
- 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.
Table of Contents
- No headings found.
