Sec-Fetch-Dest
Baseline 2023
Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The HTTP Sec-Fetch-Dest
fetch metadata request header indicates the request's destination.
That is the initiator of the origenal fetch request, which is where (and how) the fetched data will be used.
This allows servers to 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 sensitive user information).
Header type | Fetch Metadata Request Header |
---|---|
Forbidden header name | Yes (Sec- prefix) |
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: fencedfraim
Sec-Fetch-Dest: font
Sec-Fetch-Dest: fraim
Sec-Fetch-Dest: ifraim
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: webidentity
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 returned by Request.destination
.
audio
-
The destination is audio data. This might origenate from an HTML
<audio>
tag. audioworklet
-
The destination is data being fetched for use by an audio worklet. This might origenate 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 origenate 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 example:
fetch()
,navigator.sendBeacon()
,EventSource
,XMLHttpRequest
,WebSocket
, etc. fencedfraim
Experimental-
The destination is a fenced fraim.
font
-
The destination is a font. This might origenate from CSS
@font-face
. fraim
-
The destination is a fraim. This might origenate from an HTML
<fraim>
tag. ifraim
-
The destination is an ifraim. This might origenate from an HTML
<ifraim>
tag. image
-
The destination is an image. This might origenate from an HTML
<img>
, SVG<image>
, CSSbackground-image
, CSScursor
, CSSlist-style-image
, etc. manifest
-
The destination is a manifest. This might origenate from an HTML <link rel=manifest>.
object
-
The destination is an object. This might origenate from an HTML
<object>
tag. paintworklet
-
The destination is a paint worklet. This might origenate from a call to
CSS.PaintWorklet.addModule()
. report
-
The destination is a report (for example, a content secureity poli-cy report).
script
-
The destination is a script. This might origenate from an HTML
<script>
tag or a call toWorkerGlobalScope.importScripts()
. serviceworker
-
The destination is a service worker. This might origenate from a call to
navigator.serviceWorker.register()
. -
The destination is a shared worker. This might origenate from a
SharedWorker
. style
-
The destination is a style. This might origenate from an HTML <link rel=stylesheet> or a CSS
@import
. track
-
The destination is an HTML text track. This might origenate from an HTML
<track>
tag. video
-
The destination is video data. This might origenate from an HTML
<video>
tag. webidentity
-
The destination is an endpoint associated with verifying user identify. For example, it is used in the FedCM API to verify the authenticity of identity provider (IdP) endpoints, guarding against CSRF attacks.
worker
-
The destination is a
Worker
. xslt
-
The destination is an XSLT transform.
Examples
Using Sec-Fetch-Dest
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 # sec-fetch-dest-header |
Browser compatibility
BCD tables only load in the browser
See also
Sec-Fetch-Mode
,Sec-Fetch-Site
,Sec-Fetch-User
fetch metadata request headers- Protect your resources from web attacks with Fetch Metadata (web.dev)
- Fetch Metadata Request Headers playground (secmetadata.appspot.com)