Wissen › HTTP, Requests & DevTools
HTTP, Requests & DevTools
Wie Browser und Server miteinander sprechen – und wie du jede Anfrage mit den Entwickler-Werkzeugen deines Browsers sichtbar machst.
Lies den Artikel und beantworte am Ende 9 Fragen. Erst wenn alle richtig beantwortet sind, ist die Lektion im Training erledigt und du bekommst 50 Punkte.
Jede Webseite, jedes Formular und jeder Login ist am Ende ein Gespräch zwischen Browser und Server – geführt in HTTP-Nachrichten. Wer Web-Sicherheit verstehen will, muss diese Nachrichten lesen können. Die gute Nachricht: Dein Browser zeigt sie dir, mit den Entwickler-Werkzeugen (DevTools).
Anfrage und Antwort
HTTP ist ein textbasiertes Protokoll mit einem einfachen Muster: Der Browser schickt eine Anfrage (Request), der Server antwortet (Response). Jede Nachricht besteht aus einer Startzeile, mehreren Kopfzeilen (Headern) und optional einem Inhalt (Body).
So sieht eine einfache Suche aus – oben die Anfrage, unten die Antwort:
GET /suche?q=manta HTTP/1.1
Host: www.example.org
Cookie: session=3f1c9a…
User-Agent: Mozilla/5.0 …
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Set-Cookie: session=3f1c9a…; Secure; HttpOnly; SameSite=Lax
<!doctype html> … Methoden: Was soll passieren?
| Methode | Zweck | Worauf achten |
|---|---|---|
| GET | Daten abrufen – Seiten, Bilder, Suchergebnisse | Parameter stehen in der URL und landen in Server-Logs, Browser-Verlauf und Referer. Ein GET sollte nie etwas verändern. |
| POST | Daten senden – Formulare, Logins, Uploads | Parameter stehen im Body. Zustandsändernde Aktionen brauchen einen Schutz gegen CSRF. |
| PUT, PATCH, DELETE | Ressourcen anlegen, ändern oder löschen – typisch für APIs | Jede Methode braucht eine eigene Berechtigungsprüfung. |
| HEAD, OPTIONS | Nur Kopfzeilen abrufen bzw. erlaubte Methoden erfragen (u. a. für CORS) | Verraten manchmal mehr über den Server, als nötig wäre. |
Statuscodes: Was ist passiert?
| Bereich | Bedeutung | Beispiele |
|---|---|---|
| 2xx | Erfolg | 200 OK, 201 Created, 204 No Content |
| 3xx | Umleitung – das Ziel steht im Header Location | 301 dauerhaft, 302/303 vorübergehend (z. B. nach einem Login) |
| 4xx | Fehler auf Seite des Clients | 400 ungültig, 401 nicht angemeldet, 403 verboten, 404 nicht gefunden, 429 zu viele Anfragen |
| 5xx | Fehler auf Seite des Servers | 500 interner Fehler, 502/503 Server nicht erreichbar |
Für Angreifer sind schon Unterschiede in den Antworten eine Information: Liefert ein Login bei unbekannten Nutzern eine andere Meldung als bei einem falschen Passwort, lässt sich herausfinden, welche Konten existieren.
Header, die du kennen solltest
- Host – für welche Website die Anfrage gedacht ist. Er kommt vom Client und kann gefälscht werden.
- Cookie / Set-Cookie – der Browser schickt gespeicherte Cookies mit, der Server setzt neue.
- Content-Type – welches Format der Body hat (HTML, JSON, Formulardaten …).
- Location – Ziel einer Umleitung.
- Referer und User-Agent – woher die Anfrage kommt und welcher Browser sie stellt. Beides ist frei wählbar und taugt nicht als Sicherheitsmerkmal.
- Sicherheits-Header wie Content-Security-Policy, Strict-Transport-Security oder X-Content-Type-Options – sie weisen den Browser an, bestimmte Angriffe zu blockieren.
Cookies und Sitzungen
HTTP ist zustandslos: Jede Anfrage steht für sich. Damit ein Server weiß, dass du angemeldet bist, gibt er dir nach dem Login ein Cookie mit einer zufälligen Sitzungs-ID. Bei jeder weiteren Anfrage schickt der Browser es automatisch mit. Daraus folgt: Wer dieses Cookie besitzt, ist für den Server du.
Darum sind die Attribute eines Sitzungs-Cookies so wichtig:
- Secure – das Cookie wird nur über HTTPS übertragen.
- HttpOnly – JavaScript kann es nicht auslesen. Das bremst Sitzungsdiebstahl über XSS.
- SameSite (Strict, Lax oder None) – ob das Cookie auch bei Anfragen mitgeschickt wird, die von fremden Websites ausgelöst werden. Ein wichtiger Baustein gegen CSRF.
- Domain, Path und Ablaufzeit – für welche Adressen das Cookie gilt und wie lange.
HTTPS – verschlüsselt, aber nicht automatisch sicher
HTTPS verschlüsselt den Transport mit TLS: Niemand im WLAN oder beim Provider kann mitlesen oder Inhalte unbemerkt verändern. Der Header Strict-Transport-Security (HSTS) sorgt dafür, dass der Browser die Seite künftig nur noch verschlüsselt aufruft.
Wichtig: HTTPS schützt den Weg, nicht die Anwendung. Eine SQL-Injection funktioniert über HTTPS genauso gut.
Die DevTools: dein Röntgenblick
Alle gängigen Browser bringen Entwickler-Werkzeuge mit. Öffnen mit F12 bzw. Strg+Umschalt+I – auf dem Mac mit Cmd+Option+I.
- 1Netzwerk (Network)
Zeigt jede Anfrage der Seite. Ein Klick darauf öffnet Header, gesendete Daten (Payload), Antwort und Cookies. Aktiviere „Log beibehalten“ (Preserve log), damit Umleitungen nach einem Formular-Absenden sichtbar bleiben.
- 2Anfrage nachbauen
Rechtsklick auf eine Anfrage → „Als cURL kopieren“ (Copy as cURL). Im Terminal lässt sie sich dann beliebig verändern und erneut senden. Firefox kann Anfragen direkt im Browser bearbeiten und erneut senden.
- 3Speicher (Application/Storage)
Hier siehst du Cookies samt Attributen sowie Local und Session Storage – und kannst sie zum Testen ändern oder löschen.
- 4Elemente (Elements/Inspector)
Zeigt das HTML so, wie es gerade im Browser ist. Versteckte Formularfelder, deaktivierte Buttons oder eine maximale Eingabelänge lassen sich hier mit zwei Klicks ändern.
- 5Konsole (Console)
Fehlermeldungen von Skripten und eine JavaScript-Eingabe. Praktisch, um zu prüfen, was eine Seite im Browser preisgibt.
Die wichtigste Lektion: Der Browser gehört dem Nutzer
Alles, was im Browser passiert, kann verändert werden: versteckte Felder, JavaScript-Prüfungen, ausgegraute Buttons, Preise oder IDs in der URL. Eine Anfrage muss nicht einmal aus einem Browser kommen – ein Werkzeug wie curl reicht.
Deshalb gilt: Prüfungen im Browser sind Komfort, keine Sicherheit. Ob jemand etwas sehen oder tun darf und ob eine Eingabe gültig ist, muss der Server entscheiden – bei jeder einzelnen Anfrage.
# Dieselbe Formular-Anfrage – ohne Browser, mit veränderten Werten
curl -X POST https://www.example.org/bestellung \
-H 'Cookie: session=3f1c9a…' \
-d 'artikel=42&menge=1&preis=0'
Worauf du in TYPO3 achten musst
TYPO3 bringt für die wichtigsten HTTP-Themen eigene Einstellungen mit. Sie lohnen einen Blick in jedem Projekt.
trustedHostsPattern: dem Host-Header nicht blind trauen
Der Host-Header kommt vom Client. TYPO3 nutzt den Hostnamen unter anderem, um absolute Links zu erzeugen – etwa in Mails zum Zurücksetzen von Passwörtern. Die Einstellung legt fest, welche Hostnamen gültig sind. Standard ist SERVER_NAME (Abgleich mit der Webserver-Konfiguration). Das Muster .* schaltet die Prüfung ab und gilt als unsicher.
// config/system/additional.php (TYPO3 v12+)
$GLOBALS['TYPO3_CONF_VARS']['SYS']['trustedHostsPattern'] = '(www\\.)?example\\.org'; Sitzungs-Cookies und SameSite
TYPO3 verwaltet Sitzungen über eigene Cookies für Frontend und Backend. Das SameSite-Verhalten lässt sich getrennt einstellen ($GLOBALS['TYPO3_CONF_VARS']['FE']['cookieSameSite'] und ['BE']['cookieSameSite'] mit strict, lax oder none). Standard ist lax im Frontend und strict im Backend – none nur, wenn es wirklich nötig ist.
Content-Security-Policy
Seit TYPO3 12.3 gibt es eine eingebaute CSP-API für Frontend und Backend. Im Backend ist die Policy seit TYPO3 13 immer aktiv. Im Frontend musst du sie bewusst einschalten – über das Feature-Flag security.frontend.enforceContentSecurityPolicy oder eine csp.yaml je Site.
Lektion abschließen: 9 Fragen beantworten
Diese Lektion („HTTP, Requests & DevTools“) gilt im Training erst als erledigt, wenn du alle 9 Fragen zu diesem Artikel richtig beantwortet hast – von leicht bis knifflig. Dafür gibt es 50 Punkte. Dafür brauchst du ein Konto, damit dein Fortschritt gespeichert wird.
Weiter im Wissen
Interaktiv üben
In der Lernplattform probierst du das an einer echten, isolierten TYPO3-Instanz aus: