Sec-Fetch-Dest
The HTTP Sec-Fetch-Dest request header indicates the destination of the request, describing how the fetched resource will be used.
Baseline: Limited availability
Supported in Chromium-based browsers (Chrome, Edge, Opera), Firefox, and Safari. webstatus.dev
Usage
The Sec-Fetch-Dest header is part of the Fetch Metadata Request Headers specification. Browsers attach this header automatically to every request. The value tells the server what type of resource the browser expects, enabling server-side policies to reject mismatched or unexpected resource requests.
A server handling an endpoint meant to serve images
verifies the Sec-Fetch-Dest value is image. When the
value does not match the expected destination, the server
returns a 403 response to block the request. This
pattern forms the basis of resource isolation policies
protecting against cross-site data leaks and speculative
execution attacks.
The header works alongside Sec-Fetch-Mode, Sec-Fetch-Site, and Sec-Fetch-User to give servers a complete picture of request context without relying on heuristics.
Directives
audio
The resource will be used as audio data, typically from
an <audio> element.
audioworklet
The resource is loaded as an audio worklet module.
document
The resource is loaded as an HTML or XML document, resulting from a top-level navigation such as clicking a link.
embed
The resource will be embedded through an <embed>
element.
empty
An empty string indicates a destination not covered by
other values. Fetch API calls, WebSocket
connections, and XMLHttpRequest operations use this
value.
font
The resource is a font file, typically referenced from
a CSS @font-face rule.
frame
The resource loads into a <frame> element.
iframe
The resource loads into an <iframe> element.
image
The resource is an image, loaded through <img>, CSS
background-image, or similar mechanisms.
json
The resource is a JSON module imported using
import data from "./data.json" with { type: "json" }
or the import() function with an import attribute.
manifest
The resource is a web app manifest file.
object
The resource loads into an <object> element.
paintworklet
The resource is loaded as a CSS paint worklet module.
report
The resource is a reporting endpoint receiving violation reports from Content Security Policy or similar reporting mechanisms.
script
The resource is a JavaScript file loaded through
<script> or importScripts().
serviceworker
The resource is registered as a service worker.
sharedworker
The resource is loaded as a shared worker.
style
The resource is a stylesheet loaded through <link rel="stylesheet"> or a CSS @import rule.
track
The resource is a WebVTT text track loaded through a
<track> element.
video
The resource is video data, typically from a <video>
element.
worker
The resource is loaded as a dedicated web worker.
fencedframe
The resource loads into a <fencedframe> element,
used by the Privacy Sandbox APIs for isolated ad
rendering.
webidentity
The resource is a FedCM (Federated Credential
Management) identity assertion fetched through the
navigator.credentials.get() API.
xslt
The resource is an XSLT stylesheet applied to transform an XML document.
Example
A browser navigating to a page sends document as the
fetch destination. The full set of fetch metadata headers
provides complete context.
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1
A cross-origin image request sends image as the
destination with no-cors mode because image elements
do not require CORS by default.
Sec-Fetch-Dest: image
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: no-cors
A fetch API call to a same-origin JSON endpoint sends
empty because the Fetch API has no predefined
destination type.
Sec-Fetch-Dest: empty
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: cors
Takeaway
The Sec-Fetch-Dest header reveals the intended use of a requested resource, allowing servers to enforce resource isolation policies and reject requests where the destination does not match expectations.