Sec-Fetch-Dest
The HTTP Sec-Fetch-Dest request header tells the server how a fetched resource will be used, such as a document, image, script, or iframe.
Usage
The Sec-Fetch-Dest header is part of the Fetch Metadata Request Headers specification. Browsers attach this header automatically to every request sent to a secure (HTTPS) endpoint. 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.
text
The resource is a text module imported using
import "./notes.txt" with { type: "text" }, a
newer sibling of the json destination.
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 loading 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