Fetch Metadata request headers

Fetch Metadata is a set of several HTTP request headers that provide additional context to the server about what the browser is going to do with the response, where the request has originated, and whether the request was user-activated. Based on these headers, the server may for example implement extra access control and similar.

Sec-Fetch-Dest

Contains a request destination, tells the server what the browser is going to do with the response

Sec-Fetch-Mode

Which request mode has been set for the request

Sec-Fetch-Site

The relationship between the loaded page, if any, and the request

Sec-Fetch-User

Sent when the request was initiated by a user action

This is a live demo page, it displays exactly the headers your browser has sent. Speaking of which, your browser has sent the following Fetch Metadata headers for some of the most common request types:

1. this page
2. iframe tag
3. script tag
4. img tag
5. embed tag
6. fetch()

Sec-Fetch-* request headers for this page

Sec-Fetch-Dest: not present
Sec-Fetch-Mode: not present
Sec-Fetch-Site: not present
Sec-Fetch-User: not present
(This page was generated at 02:26:02)

Reloading the page is user-activated if it happens immediately or in less than 5 seconds,
click the buttons and watch the headers.

Sec-Fetch-* request headers for an iframe

Reloading the iframe is user-activated if it happens immediately or in less than 5 seconds,
click the buttons and watch the Sec-Fetch-User header.

Sec-Fetch-* request headers for a <script> tag

Sec-Fetch-Dest: ……
Sec-Fetch-Mode: ……
Sec-Fetch-Site: ……
Sec-Fetch-User: ……

Headers sent when downloading a script with a <script src="…"></script> tag

Sec-Fetch-* request headers for an <img> tag

Reloading the image is not a navigation request and as such is not user-activated and will not send Sec-Fetch-User. Opening the image in a new tab will send different headers, notably the Sec-Fetch-Dest header will be document.

Sec-Fetch-* request headers for an <embed> tag

Without a type attribute

The embed element sends a navigation request which means that Sec-Fetch-Mode is navigate and reloading the image will send Sec-Fetch-User in Chrome. Firefox will not send Sec-Fetch-User on reload, and will randomly change Sec-Fetch-Dest to image and Sec-Fetch-Mode to no-cors if you reload the whole page.

With type="image/png" attribute

If there's a type attribute in the embed tag, then Chrome will send the same headers as with <img>, but only on the first load. If you reload the image, then Sec-Fetch-Dest changes to embed. Firefox behaves the same way as it does when there's no type attribute.

Sec-Fetch-* request headers for fetch()

Sec-Fetch-Dest: ……
Sec-Fetch-Mode: ……
Sec-Fetch-Site: ……
Sec-Fetch-User: ……
(Generated at …)

Fetch again

Fetching again will not set Sec-Fetch-User even when the fetch() was clearly triggered by you. This is because the header is delivered only for navigation requests whose destination in Sec-Fetch-Dest is document, embed, frame, iframe, or object, and this wasn't one.