Sec-Fetch-Dest

The Sec-Fetch-Dest fetch metadata request header indicates the request's destination. That is the initiator of the original fetch request, which is where (and how) the fetched data will be used.

This allows servers determine whether to service a request based on whether it is appropriate for how it is expected to be used. For example, a request with an audio destination should request audio data, not some other type of resource (for example, a document that includes senstive user information).

Header type Fetch Metadata Request Header
Forbidden header name yes (prefix Sec-)
CORS-safelisted request header no

Syntax

Sec-Fetch-Dest: audio
Sec-Fetch-Dest: audioworklet
Sec-Fetch-Dest: document
Sec-Fetch-Dest: embed
Sec-Fetch-Dest: empty
Sec-Fetch-Dest: font
Sec-Fetch-Dest: frame
Sec-Fetch-Dest: iframe
Sec-Fetch-Dest: image
Sec-Fetch-Dest: manifest
Sec-Fetch-Dest: object
Sec-Fetch-Dest: paintworklet
Sec-Fetch-Dest: report
Sec-Fetch-Dest: script
Sec-Fetch-Dest: serviceworker
Sec-Fetch-Dest: sharedworker
Sec-Fetch-Dest: style
Sec-Fetch-Dest: track
Sec-Fetch-Dest: video
Sec-Fetch-Dest: worker
Sec-Fetch-Dest: xslt

Servers should ignore this header if it contains any other value.

Directives

Note

These directives correspond to the values in RequestDestination (as returned by Request.destination).

audio
The destination is audio data. This might originate from an HTML <audio> tag.
audioworklet
The destination is data being fetched for use by an audio worklet. This might originate from a call to audioWorklet.addModule().
document
The destination is a document (HTML or XML), and the request is the result of a user-initiated top-level navigation (e.g. resulting from a user clicking a link).
embed
The destination is embedded content. This might originate from an HTML <embed> tag.
empty
The destination is the empty string. This is used for destinations that do not have their own value. For exmaple fetch(), navigator.sendBeacon(), EventSource, XMLHttpRequest, WebSocket, etc.
font
The destination is a font. This might originate from CSS @font-face.
frame
The destination is a frame. This might originate from an HTML <frame> tag.
iframe
The destination is an iframe. This might originate from an HTML <iframe> tag.
image
The destination is an image. This might originate from an HTML <image>, SVG <image>, CSS background-image, CSS cursor, CSS list-style-image, etc.
manifest
The destination is a manifest. This might originate from an HTML <link rel=manifest>).
object
The destination is an object. This might originate from an HTML <object> tag.
paintworklet
The destination is a paint worklet. This might originate from a call to CSS.PaintWorklet.addModule().
report
The destination is a report (for exmaple, a content security policy report).
script
The destination is a script. This might originate from an HTML <script> tag or a call to WorkerGlobalScope.importScripts().
serviceworker
The destination is a service worker. This might originate from a call to navigator.serviceWorker.register().
sharedworker
The destination is a shared worker. This might originate from a SharedWorker.
style
The destination is a style. This might originate from an HTML <link rel=stylesheet> or a CSS @import.
track
The destination is an HTML text track. This might originate from an HTML <track> tag.
video
The destination is video data. This might originate from an HTML <video> tag.
worker
The destination is a Worker.
xslt
The destination is an XLST transform.

Examples

A cross-site request generated by an <img> element would result in a request with the following HTTP request headers (note that the destination is image):

Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site

Specifications

Specification
Fetch Metadata Request Headers (Fetch Metadata)
# sec-fetch-dest-header

Browser compatibility

BCD tables only load in the browser

See also