HTTP Sec-Fetch-Mode Header

Der HTTP-Header Sec-Fetch-Mode ist ein Request-Header aus der Fetch Metadata API, der den Request-Mode übermittelt. Er zeigt, ob die Anfrage als Navigation, CORS-Request, No-CORS oder Same-Origin erfolgt und ist essentiell für CORS-Policy-Enforcement und CSRF-Protection.

Typ

Request-Header

Syntax

Der Header gibt den Request-Mode als einfachen String-Wert an.

http 
Sec-Fetch-Mode: navigate
Sec-Fetch-Mode: cors

Direktiven

Die Direktiven definieren den Fetch-Mode der Request nach Fetch Standard.

navigate
Top-Level Navigation durch Nutzer-Interaktion (Link-Click, URL-Eingabe). Lädt neues Document, höchstes CSRF-Risiko.
cors
Cross-Origin Request mit CORS-Protocol. Fetch API oder XHR mit mode: 'cors'. Server muss CORS-Headers senden.
no-cors
Cross-Origin Request ohne CORS-Check. Opaque Response, nur Status-Code zugänglich. Typisch für <script> oder <img> Tags.
same-origin
Same-Origin Request, kein CORS nötig. Fetch API mit mode: 'same-origin', schlägt fehl bei Cross-Origin.
websocket
WebSocket-Upgrade-Request. Spezielle Handshake-Logik, nicht regulärer HTTP-Request.

Beispiele

Nachfolgend finden Sie praktische Anwendungsbeispiele für den Sec-Fetch-Mode-Header.

Beispiel 1 CORS API Request

http 
GET /api/data HTTP/1.1
Host: api.example.com
Origin: https://app.example.com
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
Sec-Fetch-Dest: empty

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://app.example.com
Content-Type: application/json

Fetch API macht CORS-Request, Server validiert Sec-Fetch-Mode: cors und sendet entsprechende CORS-Headers.

Beispiel 2 Navigation CSRF Protection

http 
POST /api/delete HTTP/1.1
Host: app.example.com
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: cross-site
Content-Type: application/x-www-form-urlencoded

HTTP/1.1 403 Forbidden

State-changing operations via navigate mode not allowed

CSRF-Attack via <form> wird erkannt durch Sec-Fetch-Mode: navigate kombiniert mit POST-Method, Server blockt Request.

Beispiel 3 Same-Origin Enforcement

http 
GET /internal/admin HTTP/1.1
Host: app.example.com
Sec-Fetch-Mode: same-origin
Sec-Fetch-Site: same-origin

HTTP/1.1 200 OK
Content-Type: application/json

{"secret": "data"}

Sensitive API akzeptiert nur same-origin Requests, blockt cors und no-cors Modes für Maximum Security.

Request Mode Validation Flow

Sec-Fetch-Mode Validation Ablauf

Vorteile für die Systemarchitektur

  • Granular CORS Control: Server können cors-Mode anders behandeln als no-cors-Mode, ermöglicht fein abgestimmte Access-Policies
  • Navigate-Mode Protection: State-changing Operations (POST/PUT/DELETE) können navigate-Mode ablehnen zur CSRF-Prevention ohne Token-Check
  • WebSocket Security: websocket-Mode ermöglicht spezielle Handshake-Validation vor Upgrade zu persistenter Connection

Spezifikation

Fetch Metadata Request Headers https://www.w3.org/TR/fetch-metadata/

Weitere Spezifikationen

Sec-Fetch-Dest Header, Sec-Fetch-Site Header