Sec-Fetch-Mode header
        
        
          
                Baseline
                
                  Widely available
                
                
              
        
        
        
          
                
              
                
              
                
              
        
        
      
      This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.
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
Sec-Fetch-Mode: cors
Sec-Fetch-Mode: navigate
Sec-Fetch-Mode: no-cors
Sec-Fetch-Mode: same-origin
Sec-Fetch-Mode: websocket
Servers should ignore this header if it contains any other value.
Directives
Note:
These directives correspond to the values in Request.mode.
cors- 
The request is a CORS protocol request.
 - 
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
>Using Sec-Fetch-Mode
If a user clicks on a page link to another page on the same origin, the resulting request would have the following headers (note that the mode is navigate):
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1
A cross-site request generated by an <img> element would result in a request with the following HTTP request headers (note that the mode is no-cors):
Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site
Specifications
| Specification | 
|---|
| Fetch Metadata Request Headers> # sec-fetch-mode-header>  | 
            
Browser compatibility
Loading…
See also
Sec-Fetch-Dest,Sec-Fetch-Site,Sec-Fetch-Userfetch metadata request headers- Protect your resources from web attacks with Fetch Metadata (web.dev)
 - Fetch Metadata Request Headers playground (secmetadata.appspot.com)