Sec-Fetch-Dest header
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2023.
* 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. Dies ist der Initiator der ursprünglichen Fetch-Anfrage, 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 sie für die erwartete Nutzung geeignet ist. Beispielsweise sollte eine Anfrage mit dem Ziel audio Audiodaten anfordern, nicht einen anderen Ressourcentyp (zum Beispiel ein Dokument, das sensible Benutzerinformationen enthält).
| Header-Typ | Fetch-Metadaten-Anforderungsheader |
|---|---|
| Verbotener Anforderungsheader | Ja (Sec--Präfix) |
| CORS-safelisted Anforderungsheader | 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: 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. Dies könnte von einem HTML
<audio>-Tag stammen. audioworklet-
Das Ziel sind Daten, die für die Verwendung durch eine Audio-Worklet abgerufen werden. Dies könnte von einem Aufruf von
audioWorklet.addModule()stammen. document-
Das Ziel ist ein Dokument (HTML oder XML), und die Anfrage ist das Ergebnis einer vom Benutzer initiierten Top-Level-Navigation (z.B. durch Klicken auf einen Link).
embed-
Das Ziel ist eingebetteter Inhalt. Dies könnte von einem HTML
<embed>-Tag stammen. empty-
Das Ziel ist der leere String. Dies wird für Ziele verwendet, die keinen eigenen Wert haben. Zum Beispiel:
fetch(),navigator.sendBeacon(),EventSource,XMLHttpRequest,WebSocket, etc. fencedframeExperimentell-
Das Ziel ist ein fenced frame.
font-
Das Ziel ist eine Schriftart. Dies könnte aus einem CSS
@font-facestammen. frame-
Das Ziel ist ein Frame. Dies könnte von einem HTML
<frame>-Tag stammen. iframe-
Das Ziel ist ein Iframe. Dies könnte von einem HTML
<iframe>-Tag stammen. image-
Das Ziel ist ein Bild. Dies könnte von einem HTML
<img>, SVG<image>, CSSbackground-image, CSScursor, CSSlist-style-image, etc. stammen. json-
Das Ziel ist JSON. Dies könnte von einem Importieren eines Moduls aus JavaScript mit dem
type: "json"-Attribut stammen. manifest-
Das Ziel ist ein Manifest. Dies könnte von einem HTML <link rel=manifest> stammen.
object-
Das Ziel ist ein Objekt. Dies könnte von einem HTML
<object>-Tag stammen. paintworklet-
Das Ziel ist eine Paint-Worklet. Dies 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. Dies könnte von einem HTML
<script>-Tag oder einem Aufruf vonWorkerGlobalScope.importScripts()stammen. serviceworker-
Das Ziel ist ein Service Worker. Dies könnte von einem Aufruf von
navigator.serviceWorker.register()stammen. -
Das Ziel ist ein Shared Worker. Dies könnte von einem
SharedWorkerstammen. style-
Das Ziel ist ein Stil. Dies könnte von einem HTML <link rel=stylesheet> oder einem CSS
@importstammen. track-
Das Ziel ist ein HTML-Text-Track. Dies könnte von einem HTML
<track>-Tag stammen. video-
Das Ziel sind Videodaten. Dies könnte von einem HTML
<video>-Tag stammen. webidentity-
Das Ziel ist ein Endpunkt, der mit der Verifizierung der Benutzeridentität verbunden ist. Zum Beispiel wird es in der FedCM API verwendet, um die Authentizität von Identity Provider (IdP) Endpunkten zu überprüfen, und schützt vor CSRF-Angriffen.
worker-
Das Ziel ist ein
Worker. xslt-
Das Ziel ist eine XSLT-Transformation.
Beispiele
>Verwendung von Sec-Fetch-Dest
Eine standortübergreifende Anfrage, die durch ein <img>-Element erzeugt wird, würde eine Anfrage mit den folgenden HTTP-Anforderungsheadern ergeben (beachten Sie, dass das Ziel image ist):
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
Siehe auch
Sec-Fetch-Mode,Sec-Fetch-Site,Sec-Fetch-UserFetch-Metadaten-Anforderungsheader- Schützen Sie Ihre Ressourcen vor Webangriffen mit Fetch Metadata (web.dev)
- Fetch Metadata Request Headers Spielwiese (secmetadata.appspot.com)