Sec-Fetch-DestSec-Fetch-Dest is a Fetch Metadata header the browser adds automatically, telling how the requested resource will ultimately be used (document, image, script, style, font, worker, empty fetch, etc.). Servers can detect misuse from a mismatch between the destination and the actual content type.
Values include document, image, script, style, font, audio, video, worker, embed, object, empty, and more. empty means a request with no specific consumption destination, such as fetch()/XHR. The header exposes to the server 'what the browser intends to treat this response as' — whether the request was triggered by an <img src> or a <script src>, for instance.
The security crux is detecting contradictions between destination and resource nature. For example, if a request to a JSON API endpoint has Sec-Fetch-Dest of script, that may signal an attacker trying to load the response as a <script> to steal data via XSSI. The server can reject it with a rule like 'this endpoint must not be loaded for script/style destinations'.
Also, together with X-Content-Type-Options: nosniff, the browser refuses execution when the response's actual Content-Type conflicts with the request destination (e.g. text/html but dest=script). Sec-Fetch-Dest gives the server material to make this judgment pre-emptively too.
Sec-Fetch-Dest: <document | image | script | style | font | empty | audio | video | worker | ...>e.g. Sec-Fetch-Dest: image
document | A request destined to be a top-level document (navigation). |
image / audio / video / font | Loaded as an image, audio, video, or font resource respectively. |
script / style / worker | A resource to be executed/applied as a script, stylesheet, or worker. |
empty | A request with no specific destination, such as fetch()/XHR. |