CAPTCHA in ein Website-Formular einbauen: Schritt für Schritt
Aktualisiert:
Kurzantwort
Um ein CAPTCHA in ein Formular einzubauen, (1) holen Sie Site-Key und Secret, (2) laden das Widget-Skript auf der Seite, (3) setzen das Widget ins Formular, damit es ein Token-Feld ergänzt, (4) senden das Token mit dem Formular an Ihren Server und (5) prüfen es dort über die API des Anbieters, bevor Sie etwas verarbeiten. Der häufigste Fehler ist, Schritt 5 auszulassen: Eine Prüfung nur im Browser lässt sich umgehen, indem man direkt an Ihren Endpunkt sendet.
Wie hängt ein CAPTCHA mit dem Formular zusammen?
Jedes moderne CAPTCHA besteht aus zwei Hälften. Die Client-Hälfte ist ein Widget (ein Skript und ein kleines Element), das im Browser des Besuchers läuft und ein einmaliges Token erzeugt. Die Server-Hälfte ist ein API-Aufruf Ihres Backends, der beim Anbieter nachfragt, ob das Token gültig ist.
Das Formular selbst muss nur das Token mittragen. Ihr Server entscheidet dann: Anfrage verarbeiten, ablehnen oder eine weitere Prüfung verlangen.
Schritt für Schritt: CAPTCHA in jedes Formular einbauen
- Legen Sie beim Anbieter ein Projekt an und notieren Sie zwei Werte: den öffentlichen Site-Key (kommt ins HTML) und den Secret-Key (bleibt auf dem Server, nie im Frontend-Code).
- Laden Sie das Widget-Skript einmal auf jeder Seite mit einem geschützten Formular.
- Setzen Sie das Widget-Element mit dem Site-Key in das Formular. Beim Absenden ergänzt es ein verstecktes Feld mit dem Token.
- Stellen Sie sicher, dass Ihr Formular-Handler dieses Feld erhält, egal ob das Formular normal oder per fetch bzw. XHR gesendet wird.
- Senden Sie auf dem Server Secret und Token an den Prüf-Endpunkt des Anbieters. Fahren Sie nur fort, wenn die Antwort das Token als gültig ausweist.
- Lehnen Sie die Anfrage mit einer klaren Meldung ab, wenn die Prüfung fehlschlägt, und protokollieren Sie den Fehler, damit Angriffe im Monitoring sichtbar werden.
Die Fehler, die den CAPTCHA-Schutz aushebeln
| Fehler | Folge | Lösung |
|---|---|---|
| Prüfung nur im Browser | Ein Bot sendet direkt an Ihren Endpunkt und sieht das Widget nie. | Das Token immer auf dem Server prüfen. |
| Secret-Key im Frontend-Code | Jeder kann ihn lesen und „gültige“ Antworten fälschen. | Das Secret in Umgebungsvariablen des Servers halten. |
| Token mehrfach verwenden | Ein abgefangenes Token wird wiederholt eingespielt. | Tokens sind einmalig: eine zweite Einsendung mit demselben Token ablehnen. |
| Keine Timeout- und Wiederholungslogik | Echte Nutzer in langsamen Netzen werden ohne Hinweis blockiert. | Eine klare Fehlermeldung zeigen und erneutes Senden ohne Datenverlust erlauben. |
| Widget auf Seiten ohne Bedarf | Mehr Skriptgewicht und Reibung überall. | Nur auf Formularen laden, die missbraucht werden. |
Wie teste ich, dass es funktioniert?
- Senden Sie das Formular normal ab und prüfen Sie, dass die Anfrage durchgeht.
- Senden Sie an denselben Endpunkt eine Anfrage ohne Token, mit leerem Token und mit erfundenem Token. Alle drei müssen abgelehnt werden.
- Senden Sie dasselbe gültige Token zweimal. Die zweite Anfrage muss scheitern.
- Testen Sie nur mit der Tastatur und mit einem Screenreader, damit Menschen mit assistiver Technik nicht ausgesperrt werden.
- Beobachten Sie nach dem Start eine Woche lang die Abschlussquote, um sicherzugehen, dass echte Besucher nicht blockiert werden.
BurgCaptcha einbauen
BurgCaptcha folgt demselben Zwei-Teile-Muster. Die API antwortet im reCAPTCHA-Antwortformat. Wenn Ihr Formular bereits reCAPTCHA-Tokens prüft, ändern Sie also nur eine Skript-URL, einen Site-Key und ein Secret, ohne Ihren Handler neu zu schreiben.
Das Widget führt im Hintergrund eine Proof-of-Work-Aufgabe aus, zeigt kein Rätsel und setzt keine Cookies. Der kostenlose Tarif umfasst 1.000 Anfragen pro Monat, auch für kommerzielle Websites.
Häufige Fragen
Wo setze ich den CAPTCHA-Code in mein Formular?
Laden Sie das Widget-Skript auf der Seite und setzen Sie das Widget-Element in das Formular-Tag. Es ergänzt ein verstecktes Token-Feld, das mit den anderen Feldern gesendet wird.
Brauche ich eine serverseitige Prüfung?
Ja. Ohne sie kann ein Bot direkt an Ihren Formular-Endpunkt senden und das Widget komplett überspringen. Der Server muss das Token vor der Verarbeitung beim Anbieter prüfen.
Ist es sicher, den Site-Key im HTML zu haben?
Ja. Der Site-Key ist von Natur aus öffentlich. Nur der Secret-Key muss auf dem Server bleiben.
Kann ich ein CAPTCHA auf einer statischen Website einsetzen?
Ja, wenn das Formular an ein Backend oder eine Serverless-Funktion sendet, die das Token prüfen kann. Eine rein statische Seite ohne Servercode kann Tokens nicht sicher prüfen.
Wie lange dauert die Integration?
Für ein typisches Formular braucht ein erfahrener Entwickler für Widget und Prüfaufruf deutlich unter einer Stunde. Tests und Fehlermeldungen kommen dazu.