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 sensitive user information).

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

Syntax
------


```http
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 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 example: `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 `<img>`, 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 example, 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 XSLT 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`):


```http
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 with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Related headers
    + `Sec-Fetch-Mode`
    + `Sec-Fetch-Site`
    + `Sec-Fetch-User`
* Protect your resources from web attacks with Fetch Metadata (web.dev)
* Fetch Metadata Request Headers playground (secmetadata.appspot.com)