Sec-Fetch-ModeSec-Fetch-Mode is a Fetch Metadata header the browser adds automatically, telling the server the request's mode (document navigation, CORS fetch, no-cors resource load, or WebSocket). Together with Sec-Fetch-Site and Dest it helps the server precisely understand a request's nature.
The value navigate means a top-level document navigation (the user moving to a page); cors/no-cors/same-origin correspond to the mode option of fetch() for subresource requests; and websocket is a WebSocket handshake. Like its siblings this is a browser-managed forbidden header that cannot be forged.
It is a useful signal in a Resource Isolation Policy. For example, an endpoint returning an HTML document should normally be reached by a navigate request; if instead it is requested cross-site with no-cors as an <img> or <script>, that may be an XSSI (misreading as a script) or information-leak attempt and a candidate for blocking.
The recommended pattern is to combine Sec-Fetch-Site (origin relationship), Sec-Fetch-Mode (whether it is a document navigation), and Sec-Fetch-Dest (how the resource will be used) into a rule. For example, allow cross-site requests only when they are navigate mode with a document destination, and reject the rest.
Sec-Fetch-Mode: <cors | no-cors | same-origin | navigate | websocket>e.g. Sec-Fetch-Mode: navigate
navigate | A top-level document navigation (address-bar move, link click, etc.). |
cors | A cross-origin fetch/XHR request following CORS rules. |
no-cors | A subresource request loaded in no-cors (images, scripts, etc.). |
same-origin | A request restricted to the same origin. |
websocket | A request establishing a WebSocket connection. |