Sec-Fetch-Dest 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.
* Some parts of this feature may have varying levels of support.
The HTTPSec-Fetch-Destfetch metadata request header indicates the request'sdestination.That is the initiator of the original 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 isexpected to be used. For example, a request with anaudio 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 request header | Yes (Sec- prefix) |
| CORS-safelisted request header | No |
Syntax
Sec-Fetch-Dest: audioSec-Fetch-Dest: audioworkletSec-Fetch-Dest: documentSec-Fetch-Dest: embedSec-Fetch-Dest: emptySec-Fetch-Dest: fencedframeSec-Fetch-Dest: fontSec-Fetch-Dest: frameSec-Fetch-Dest: iframeSec-Fetch-Dest: imageSec-Fetch-Dest: manifestSec-Fetch-Dest: objectSec-Fetch-Dest: paintworkletSec-Fetch-Dest: reportSec-Fetch-Dest: scriptSec-Fetch-Dest: serviceworkerSec-Fetch-Dest: sharedworkerSec-Fetch-Dest: styleSec-Fetch-Dest: trackSec-Fetch-Dest: videoSec-Fetch-Dest: webidentitySec-Fetch-Dest: workerSec-Fetch-Dest: xsltServers should ignore this header if it contains any other value.
Directives
Note:These directives correspond to the values returned byRequest.destination.
audioThe destination is audio data. This might originate from an HTML
<audio>tag.audioworkletThe destination is data being fetched for use by an audio worklet. This might originate from a call to
audioWorklet.addModule().documentThe 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).
embedThe destination is embedded content. This might originate from an HTML
<embed>tag.emptyThe 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.fencedframeExperimentalThe destination is afenced frame.
fontThe destination is a font. This might originate from CSS
@font-face.frameThe destination is a frame. This might originate from an HTML
<frame>tag.iframeThe destination is an iframe. This might originate from an HTML
<iframe>tag.imageThe destination is an image. This might originate from an HTML
<img>, SVG<image>, CSSbackground-image, CSScursor, CSSlist-style-image, etc.manifestThe destination is a manifest. This might originate from an HTML<link rel=manifest>.
objectThe destination is an object. This might originate from an HTML
<object>tag.paintworkletThe destination is a paint worklet. This might originate from a call to
CSS.PaintWorklet.addModule().reportThe destination is a report (for example, a content security policy report).
scriptThe destination is a script. This might originate from an HTML
<script>tag or a call toWorkerGlobalScope.importScripts().serviceworkerThe destination is a service worker. This might originate from a call to
navigator.serviceWorker.register().sharedworkerThe destination is a shared worker. This might originate from a
SharedWorker.styleThe destination is a style. This might originate from an HTML<link rel=stylesheet> or a CSS
@import.trackThe destination is an HTML text track. This might originate from an HTML
<track>tag.videoThe destination is video data. This might originate from an HTML
<video>tag.webidentityThe destination is an endpoint associated with verifying user identify. For example, it is used in theFedCM API to verify the authenticity of identity provider (IdP) endpoints, guarding againstCSRF attacks.
workerThe destination is a
Worker.xsltThe 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 isimage):
Sec-Fetch-Dest: imageSec-Fetch-Mode: no-corsSec-Fetch-Site: cross-siteSpecifications
| Specification |
|---|
| Fetch Metadata Request Headers # sec-fetch-dest-header |
Browser compatibility
See also
Sec-Fetch-Mode,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)