Sec-Fetch-Dest header

Baseline 2023 *

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

Der HTTP-Sec-Fetch-Dest-Fetch-Metadaten-Anforderungsheader gibt das Ziel der Anfrage an. Er zeigt den Initiator der ursprünglichen Fetch-Anfrage an, das heißt, wo und wie die abgerufenen Daten verwendet werden.

Dies ermöglicht es Servern zu bestimmen, ob eine Anfrage bedient werden soll, basierend darauf, ob die Anfrage für den erwarteten Verwendungszweck geeignet ist. Zum Beispiel sollte eine Anfrage mit einem audio-Ziel Audiodaten anfordern und keine andere Art von Ressource (zum Beispiel ein Dokument mit sensiblen Benutzerinformationen).

Header-Typ	Fetch-Metadaten-Anforderungsheader
Verbotener Anforderungsheader	Ja (`Sec-` Präfix)
CORS-gesicherter Anforderungsheader	Nein

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: fencedframe
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: webidentity
Sec-Fetch-Dest: worker
Sec-Fetch-Dest: xslt

Server sollten diesen Header ignorieren, wenn er einen anderen Wert enthält.

Direktiven

Hinweis: Diese Direktiven entsprechen den Werten, die von Request.destination zurückgegeben werden.

audio: Das Ziel sind Audiodaten. Diese könnten von einem HTML-<audio>-Tag stammen.
audioworklet: Das Ziel sind Daten, die für die Verwendung durch einen Audioworklet abgerufen werden. Diese könnten von einem Aufruf von audioWorklet.addModule() stammen.
document: Das Ziel ist ein Dokument (HTML oder XML), und die Anfrage ist das Ergebnis einer durch den Nutzer initiierten Top-Level-Navigation (z. B. durch Klicken auf einen Link).
embed: Das Ziel ist eingebetteter Inhalt. Dieser könnte von einem HTML-<embed>-Tag stammen.
empty: Das Ziel ist die leere Zeichenfolge. Dies wird für Ziele verwendet, die keinen eigenen Wert haben. Zum Beispiel: fetch(), navigator.sendBeacon(), EventSource, XMLHttpRequest, WebSocket, etc.
fencedframe Experimentell: Das Ziel ist ein fenced frame.
font: Das Ziel ist eine Schriftart. Diese könnte von CSS @font-face stammen.
frame: Das Ziel ist ein Rahmen. Dieser könnte von einem HTML-<frame>-Tag stammen.
iframe: Das Ziel ist ein iframe. Dieser könnte von einem HTML-<iframe>-Tag stammen.
image: Das Ziel ist ein Bild. Dieses könnte von einem HTML-<img>, SVG-<image>, CSS-background-image, CSS-cursor, CSS-list-style-image, etc. stammen.
manifest: Das Ziel ist ein Manifest. Dieses könnte von einem HTML-<link rel=manifest> stammen.
object: Das Ziel ist ein Objekt. Dieses könnte von einem HTML-<object>-Tag stammen.
paintworklet: Das Ziel ist ein Paint Worklet. Dieses könnte von einem Aufruf von CSS.PaintWorklet.addModule() stammen.
report: Das Ziel ist ein Bericht (zum Beispiel ein Bericht zur Content Security Policy).
script: Das Ziel ist ein Skript. Dieses könnte von einem HTML-<script>-Tag oder einem Aufruf von WorkerGlobalScope.importScripts() stammen.
serviceworker: Das Ziel ist ein Service Worker. Dieses könnte von einem Aufruf von navigator.serviceWorker.register() stammen.
sharedworker: Das Ziel ist ein Shared Worker. Dieses könnte von einem SharedWorker stammen.
style: Das Ziel ist ein Stil. Dieser könnte von einem HTML-<link rel=stylesheet> oder einem CSS-@import stammen.
track: Das Ziel ist ein HTML-Texttrack. Dieser könnte von einem HTML-<track>-Tag stammen.
video: Das Ziel sind Videodaten. Diese könnten von einem HTML-<video>-Tag stammen.
webidentity: Das Ziel ist ein Endpunkt, der mit der Überprüfung der Benutzeridentität verbunden ist. Zum Beispiel wird es in der FedCM API verwendet, um die Authentizität von Identitätsanbieterendpunkten (IdP) zu überprüfen und gegen CSRF-Angriffe zu schützen.
worker: Das Ziel ist ein Worker.
xslt: Das Ziel ist eine XSLT-Transformation.

Beispiele

Verwendung von Sec-Fetch-Dest

Eine cross-site-Anfrage, die von einem <img>-Element generiert wird, würde zu einer Anfrage mit den folgenden HTTP-Headern führen (beachten Sie, dass das Ziel image ist):

http

Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site

Spezifikationen

Specification
Fetch Metadata Request Headers # sec-fetch-dest-header

Browser-Kompatibilität

Weitere Informationen

Sec-Fetch-Mode, Sec-Fetch-Site, Sec-Fetch-User Fetch-Metadaten-Anforderungsheader
Schützen Sie Ihre Ressourcen vor Webangriffen mit Fetch Metadata (web.dev)
Fetch Metadata Request Headers playground (secmetadata.appspot.com)