HTTP Header verständlich erklärt

HTTP-Header (Hypertext Transfer Protocol Header) sind Metadaten, die bei jeder Anfrage (Request) eines Browsers und jeder Antwort (Response) eines Webservers übertragen werden. Sie steuern das Verhalten des Browsers, regeln Sicherheitsmechanismen, verwalten das Caching und definieren den Inhaltstyp der übertragenen Dateien.

Request vs. Response: Der HTTP-Fluss

Ein HTTP-Austausch besteht immer aus einer Anfrage und einer Antwort. Die Header spielen dabei eine zentrale Rolle:

sequenceDiagram
    participant B as Browser (Client)
    participant S as Webserver
    B->>S: 1. HTTP Request + Request-Header
    Note right of B: z. B. Accept-Language: de-CH, User-Agent
    S-->>B: 2. HTTP Response + Response-Header + Inhalt
    Note left of S: z. B. Content-Type, Cache-Control: max-age=3600

Typische Request-Header (Vom Browser gesendet)

• Host: Definiert den Domainnamen des Servers (wichtig für Shared Hosting, wo viele Domains auf einer IP liegen).
• User-Agent: Identifiziert den Browser und das Betriebssystem des Benutzers.
• Accept-Encoding: Teilt dem Server mit, welche Kompressionsverfahren (z. B. gzip, Brotli) der Browser unterstützt.
• Authorization: Übermittelt Zugangsdaten (z. B. JWT-Tokens) für geschützte Bereiche.

Typische Response-Header (Vom Server gesendet)

• Content-Type: Definiert das Dateiformat (z. B. text/html; charset=UTF-8 oder application/json).
• Content-Encoding: Gibt an, wie der Dateiinhalt komprimiert wurde (z. B. br für Brotli).
• Server: Nennt die Webserver-Software (z. B. nginx oder Apache). Aus Sicherheitsgründen sollte dieser Header minimiert werden.

---

Caching steuern mit HTTP-Headern

Die Ladezeit einer Website hängt massgeblich davon ab, wie intelligent Ressourcen im Browser gecacht werden. Folgende Header steuern dieses Verhalten:

Cache-Control

Der modernste und wichtigste Header für Caching:

• Cache-Control: max-age=31536000, immutable – Ideal für statische, gehashte Assets (CSS/JS-Dateien mit Hash im Namen). Der Browser speichert die Datei für ein Jahr, ohne jemals neu anzufragen.
• Cache-Control: no-store – Die Datei darf unter keinen Umständen gespeichert werden (wichtig für personalisierte Bankdaten).
• Cache-Control: no-cache, must-revalidate – Der Browser speichert die Datei, muss aber vor jedem Rendern die Gültigkeit prüfen.

ETags (Entity Tags)

Ein ETag ist eine eindeutige Prüfsumme (Hash) einer Datei. Ändert sich die Datei auf dem Server nicht, sendet der Server bei der erneuten Prüfung den Status 304 Not Modified zurück, was Ladezeit und Bandbreite einspart.

---

CORS (Cross-Origin Resource Sharing)

Sicherheitsmechanismen im Browser (Same-Origin-Policy) verhindern standardmässig, dass Skripte einer Domain Ressourcen von einer anderen Domain abrufen (z. B. API-Aufrufe). CORS-Header regeln diese Ausnahmen:

• Access-Control-Allow-Origin: Bestimmt, welche externen Domains auf die API zugreifen dürfen (z. B. https://allerate.dev).
• Access-Control-Allow-Methods: Gibt an, welche HTTP-Methoden erlaubt sind (z. B. GET, POST, OPTIONS).

---

Die wichtigsten HTTP-Header im Überblick

Die folgende Tabelle ordnet die häufigsten Header ihrer Richtung und Aufgabe zu und verweist auf den passenden Detail-Leitfaden:

Header	Richtung	Aufgabe	Leitfaden
Content-Type	Response	Dateiformat deklarieren	Content-Type
Cache-Control	Response	Caching steuern	Cache-Control
ETag	Response	Versionsprüfung (304)	ETag
Accept-Encoding	Request	Kompression aushandeln	Accept-Encoding
Location	Response	Ziel einer Weiterleitung	Location
Access-Control-Allow-Origin	Response	Cross-Origin erlauben	CORS
Server	Response	Server-Software (minimieren!)	Server-Header

Wer das Zusammenspiel dieser Header versteht, kann Caching, Sicherheit und Performance gezielt steuern. Sicherheitsrelevante Header behandeln wir vertieft im Cluster Security Header, die Performance-Aspekte im Cluster PageSpeed.

---

Best Practices für HTTP-Header

1. Kompression erzwingen: Senden Sie bei Textressourcen (HTML, CSS, JS) immer Content-Encoding: br oder gzip (siehe Accept-Encoding).
2. ETags aktivieren: Stellen Sie sicher, dass Ihr Server ETags generiert, um unnötige Downloads zu vermeiden (Kombination mit Cache-Control).
3. Server-Informationen verschleiern: Konfigurieren Sie Ihren Webserver so, dass Versionsnummern im Server-Header ausgeblendet werden (z. B. server_tokens off; in Nginx).
4. Immutability nutzen: Nutzen Sie für alle statischen Assets gehashte Dateinamen und vergeben Sie eine lange Cache-Laufzeit (max-age via Cache-Control).

---

Alle HTTP-Header-Leitfäden im Überblick

Hier finden Sie unsere detaillierten Fachartikel zu den einzelnen HTTP-Headern:

• Caching & Performance: Cache-Control | ETag | Accept-Encoding
• Datenaustausch & Navigation: Content-Type | Location (Redirects) | CORS | Server-Header
• Sicherheitsrelevante Steuerung: Referrer-Policy | Permissions-Policy

[!TIP] Möchten Sie sehen, welche Header Ihre Website aktuell ausliefert und ob Caching- und CORS-Einstellungen korrekt gesetzt sind? Analysieren Sie Ihre Domain live mit unserem HTTP Header Check auf balou.tools.