Welche Ansätze gibt es, um dynamisch generierte CSRF-Token aus versteckten Formularfeldern in asynchronen Requests zu extrahieren?

Zur Extraktion von CSRF-Token (Cross-Site Request Forgery) aus versteckten Formularfeldern für asynchrone Requests setzen wir je nach Architektur der Zielseite unterschiedliche technische Strategien ein.

MethodeImplementierungAnwendungsfallKomplexität
DOM-Selektiondocument.querySelectorClient-seitige Skripte / Browser-ExtensionsGering
HTML-ParsingBeautifulSoup / CheerioServer-seitiges Scraping / AutomatisierungMittel
Cookie-MappingHeader-ExtraktionFrameworks mit Double-Submit-Cookie-PatternGering
Headless BrowserPlaywright / PuppeteerSingle Page Applications (SPA) / JS-RenderingHoch

Technische Umsetzung der Ansätze

1. DOM-Selektion (Client-seitig) In einer Browser-Umgebung greifen wir direkt auf das Document Object Model (DOM) zu. Wir identifizieren das versteckte Eingabefeld über den Namen oder die ID und lesen den Wert aus: const token = document.querySelector('input[name="csrf_token"]').value; Dieser Wert wird anschließend in den Header (z. B. X-CSRF-TOKEN) oder den Body des asynchronen Requests (Fetch/Axios) injiziert.

2. Server-seitiges HTML-Parsing Bei der Automatisierung ohne Browser führen wir zuerst einen GET-Request aus, um die Seite zu laden. Wir parsen den zurückgegebenen HTML-String, um das <input type="hidden">-Element zu finden. In modernen E-Commerce Plattformen ist dieser Prozess oft mit der Verwaltung von Session-Cookies verknüpft, da das Token an die aktuelle Session gebunden ist.

3. Cookie-Extraktion (Double-Submit-Pattern) Einige Frameworks setzen das CSRF-Token in einem Cookie (z. B. XSRF-TOKEN). Wir lesen dieses Cookie aus und senden den identischen Wert in einem benutzerdefinierten HTTP-Header zurück. Der Server vergleicht dann den Cookie-Wert mit dem Header-Wert.

4. Headless Browser Wenn das Token erst durch JavaScript nach dem initialen Seitenaufruf generiert wird, nutzen wir Headless Browser. Diese rendern die Seite vollständig, führen alle Skripte aus und erlauben uns den Zugriff auf den finalen DOM-Zustand, bevor der asynchrone Request ausgelöst wird.

Wir empfehlen für stabile Automatisierungen den Verzicht auf fragile CSS-Selektoren. Wenn die API-Struktur es zulässt, ist das Double-Submit-Cookie-Pattern die sauberste Lösung. In komplexen Szenarien mit dynamischem Rendering ist der Einsatz von Playwright die einzige zuverlässige Methode, um Race-Conditions beim Token-Loading zu vermeiden.

Sergej Wiens

Sergej Wiens

Gründer & Software Architekt