Sec-Fetch-Mode #

Description #

The Sec-Fetch-Mode request header is a security-related HTTP header that indicates the request mode used when fetching a resource. It is part of the Fetch Metadata Request Headers set and is used to help servers understand the context of a request, allowing them to implement security measures such as restricting cross-origin requests.

This header informs the server whether a request was made as a same-origin request, a cross-origin request, or as part of a navigation or fetch operation. By analyzing Sec-Fetch-Mode, a server can determine whether to accept or reject a request based on security policies.

The Sec-Fetch-Mode header helps mitigate security threats like Cross-Site Request Forgery (CSRF) and Cross-Origin Resource Sharing (CORS) misconfigurations by enabling servers to enforce stricter access controls.

Syntax #

The Sec-Fetch-Mode header follows this syntax:

Sec-Fetch-Mode: <mode>

The <mode> value specifies the request mode, which can be one of the following:

• navigate – The request is for a top-level document or a subresource that navigates the browser (e.g., a full page load or form submission).
• same-origin – The request is restricted to the same origin as the requesting page.
• no-cors – The request is a cross-origin request that does not include credentials or other modifications.
• cors – The request is a cross-origin request that follows the CORS protocol.
• websocket – The request is for a WebSocket connection.

Examples #

Basic Usage in HTTP Requests #

When a browser sends a request for a top-level document, it may include the Sec-Fetch-Mode header as follows:

GET /index.html HTTP/2
Host: example.com
Sec-Fetch-Mode: navigate

For a fetch request made by JavaScript:

GET /api/data HTTP/2
Host: example.com
Sec-Fetch-Mode: cors

Summary #

The Sec-Fetch-Mode request header is an important security feature that helps servers determine the context of incoming requests. By analyzing this header, servers can enforce security policies to prevent malicious cross-origin requests and improve request handling. Proper use of this header enhances web security, reduces attack vectors, and ensures that resources are accessed as intended.