Sec-Fetch-Dest header
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2023 browserübergreifend verfügbar.
Want more browser support for this feature? Tell us why.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Der HTTP-Fetch-Metadata-Request-Header Sec-Fetch-Dest gibt die Destination der Anfrage an. Sie bezeichnet den Auslöser der ursprünglichen Fetch-Anfrage und damit, wo und wie die abgerufenen Daten verwendet werden.
So können Server entscheiden, ob sie eine Anfrage bearbeiten, indem sie prüfen, ob die angeforderte Ressource zur erwarteten Verwendung passt. Eine Anfrage mit der Destination audio sollte beispielsweise Audiodaten anfordern und keine andere Ressource, etwa ein Dokument mit sensiblen Benutzerinformationen.
Der Header ist nur in Anfragen an potenziell vertrauenswürdige URLs enthalten.
| Header-Typ | Fetch-Metadata-Request-Header |
|---|---|
| Verbotener Request-Header | Ja (Präfix Sec-) |
| CORS-safelisted Request-Header | Nein |
Syntax
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: json
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: text
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 Request.destination zurückgibt.
audio-
Die Destination sind Audiodaten. Die Anfrage kann von einem HTML-
<audio>-Element ausgehen. audioworklet-
Die Destination sind Daten, die zur Verwendung durch einen Audio Worklet abgerufen werden. Die Anfrage kann von einem Aufruf von
audioWorklet.addModule()ausgehen. document-
Die Destination ist ein Dokument (HTML oder XML). Die Anfrage ergibt sich aus einer vom Benutzer ausgelösten Navigation auf oberster Ebene, beispielsweise durch das Anklicken eines Links.
embed-
Die Destination sind eingebettete Inhalte. Die Anfrage kann von einem HTML-
<embed>-Element ausgehen. empty-
Die Destination ist die leere Zeichenfolge. Dieser Wert wird für Destinationen verwendet, die keinen eigenen Wert haben, beispielsweise
fetch(),navigator.sendBeacon(),EventSource,XMLHttpRequestoderWebSocket. fencedframe-
Die Destination ist ein fenced frame.
font-
Die Destination ist eine Schriftart. Die Anfrage kann von CSS
@font-faceausgehen. frame-
Die Destination ist ein Frame. Die Anfrage kann von einem HTML-
<frame>-Element ausgehen. iframe-
Die Destination ist ein iframe. Die Anfrage kann von einem HTML-
<iframe>-Element ausgehen. image-
Die Destination ist ein Bild. Die Anfrage kann beispielsweise von HTML
<img>, SVG<image>, CSSbackground-image, CSScursoroder CSSlist-style-imageausgehen. json-
Die Destination ist JSON. Die Anfrage kann von einem JavaScript-
import with { type: "json" }ausgehen. manifest-
Die Destination ist ein Manifest. Die Anfrage kann von einem HTML-<link rel=manifest> ausgehen.
object-
Die Destination ist ein Objekt. Die Anfrage kann von einem HTML-
<object>-Element ausgehen. paintworklet-
Die Destination ist ein Paint Worklet. Die Anfrage kann von einem Aufruf von
CSS.PaintWorklet.addModule()ausgehen. report-
Die Destination ist ein Bericht, beispielsweise ein Content-Security-Policy-Bericht.
script-
Die Destination ist ein Skript. Die Anfrage kann von einem HTML-
<script>-Element oder einem Aufruf vonWorkerGlobalScope.importScripts()ausgehen. serviceworker-
Die Destination ist ein Service Worker. Die Anfrage kann von einem Aufruf von
navigator.serviceWorker.register()ausgehen. -
Die Destination ist ein Shared Worker. Die Anfrage kann von einem
SharedWorkerausgehen. style-
Die Destination ist ein Stylesheet. Die Anfrage kann von HTML <link rel=stylesheet>, CSS
@importoder einem JavaScript-import with { type: "css" }ausgehen. text-
Die Destination ist Klartext. Die Anfrage kann von einem JavaScript-
import with { type: "text" }ausgehen. track-
Die Destination ist ein HTML-Texttrack. Die Anfrage kann von einem HTML-
<track>-Element ausgehen. video-
Die Destination sind Videodaten. Die Anfrage kann von einem HTML-
<video>-Element ausgehen. webidentity-
Die Destination ist ein Endpunkt, der mit der Überprüfung der Identität eines Benutzers zusammenhängt. Er wird beispielsweise in der FedCM API verwendet, um die Authentizität von Endpunkten eines Identitätsanbieters (IdP) zu überprüfen und so vor CSRF-Angriffen zu schützen.
worker-
Die Destination ist ein
Worker. xslt-
Die Destination ist eine XSLT-Transformation.
Beispiele
Sec-Fetch-Dest verwenden
Eine websiteübergreifende Anfrage, die von einem <img>-Element erzeugt wird, hätte die folgenden HTTP-Request-Header (beachten Sie, dass die Destination image ist):
Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site
Spezifikationen
| Spezifikation |
|---|
| Fetch Metadata Request Headers # sec-fetch-dest-header |
Browser-Kompatibilität
Siehe auch
- Die Fetch-Metadata-Request-Header
Sec-Fetch-Mode,Sec-Fetch-SiteundSec-Fetch-User - Schützen Sie Ihre Ressourcen mit Fetch Metadata vor Webangriffen (web.dev)
- Testumgebung für Fetch-Metadata-Request-Header (secmetadata.appspot.com)