logo
bars

CAPTCHA mit Bildern (ComplexImage)
und CapMonster Cloud

CAPTCHA-Lösung, Installation auf der Website und Testen.
Sie haben eine Website mit eingebauter Captcha- oder Bot-Schutzlösung übernommen, aber keinen Zugriff auf den Quellcode? Dann stellt sich schnell die Frage: Welche Lösung ist installiert, ist sie korrekt konfiguriert und wie lässt sie sich testen?

In diesem Artikel haben wir versucht, alle wichtigen Fragen zu beantworten. Der erste Schritt bei der Lösung der Aufgabe besteht darin festzustellen, welches Schutzsystem eingesetzt wird. Dazu können Sie die Liste beliebter Captchas und Anti-Bot-Schutzsysteme heranziehen, in der visuelle Beispiele und zentrale Merkmale aufgeführt sind, die Ihnen helfen, schnell zu erkennen, womit Sie es zu tun haben.

Wenn Sie feststellen, dass auf Ihrer Website ComplexImage eingesetzt wird, besteht der nächste Schritt darin, seine Eigenschaften und Funktionsweise genauer zu untersuchen. Ebenfalls in diesem Artikel finden Sie eine Anleitung zur Integration von ComplexImage, damit Sie vollständig verstehen, wie das System auf Ihrer Website arbeitet. So können Sie nicht nur den aktuellen Schutz besser einschätzen, sondern auch seine Wartung vorausschauend planen.

Was ist eine Bild-CAPTCHA
Was ist eine Bild-CAPTCHA
Eine Bild-CAPTCHA ist eine Art visuelle CAPTCHA, bei der der Benutzer eine Aufgabe im Zusammenhang mit der Analyse von Bildern durchführen muss. Normalerweise fordert das System dazu auf, Bilder auszuwählen, die einer bestimmten Bedingung entsprechen, die Anzahl der Objekte zu zählen, die richtige Position eines Objekts zu bestimmen oder eine andere visuelle Aktion auszuführen. Im Gegensatz zu Text-CAPTCHAs, bei denen nur Zeichen von einem Bild eingegeben werden müssen, überprüft die Bild-CAPTCHA die Fähigkeit des Benutzers, visuelle Informationen zu interpretieren und logische Handlungen auszuführen. Dadurch ist sie schwerer automatisch zu erkennen und schützt Registrierungs-, Anmelde- und andere kritische Formulare wirksam vor Bot-Aktivitäten.

Wie man eine Bild-CAPTCHA über CapMonster Cloud löst

Beim Testen von Formularen mit Tencent CAPTCHA besteht oft die Notwendigkeit, die Funktionsweise der CAPTCHA zu überprüfen und sicherzustellen, dass sie korrekt integriert ist.
Sie können die CAPTCHA manuell auf Ihrer Website testen:
  • Öffnen Sie die Seite mit dem Formular und überprüfen Sie, ob die CAPTCHA angezeigt wird.
  • Versuchen Sie, das Formular ohne Lösung der CAPTCHA abzusenden — der Server sollte einen Fehler zurückgeben.
  • Nach erfolgreicher Lösung der CAPTCHA sollte das Formular fehlerfrei abgesendet werden.
Für die automatische Lösung der CAPTCHA können spezialisierte Dienste verwendet werden, z.B. CapMonster Cloud — ein Tool, das CAPTCHA-Parameter entgegennimmt, auf seinen Servern verarbeitet und eine fertige Lösung zurückgibt — z. B. Zahlen oder Koordinaten für Klicks, die zur Überprüfung ohne Benutzerinteraktion verwendet werden können.

Die Arbeit mit CapMonster Cloud über die API umfasst in der Regel folgende Schritte:

Aufgabe erstellenAufgabe erstellen
arrow
API-Anfrage sendenAPI-Anfrage senden
arrow
Ergebnis empfangenErgebnis empfangen
arrow
Token auf der Seite einsetzenToken auf der Seite einsetzen
arrow
Bild-CAPTCHA-Erkennung mit fertigen Bibliotheken
Der CapMonster Cloud-Service bietet fertige Bibliotheken zur einfachen Nutzung in Python, JavaScript (Node.js) und C#.
Python
JavaScript
C#
Lösung einfügen und Formular absenden
Beispiel in Node.js für den vollständigen Zyklus der CAPTCHA-Erkennung auf Ihrer Webseite. Mögliche Ansätze: HTTP-Anfragen zur HTML- und Parametergewinnung der Schutzsysteme, Antwort senden und Ergebnis verarbeiten. Oder wie im Beispiel mit Automatisierungstools (z.B. Playwright) — Seite öffnen, auf Überprüfung warten, Parameter über CapMonster Cloud-Client senden, Ergebnis erhalten, in das passende Feld einfügen (für Tests können korrekte oder falsche Daten verwendet werden) und Ergebnis beobachten.

// npm install playwright @zennolab_com/capmonstercloud-client
// npx playwright install chromium

import { chromium } from 'playwright';
import { CapMonsterCloudClientFactory, ClientOptions, ComplexImageTaskRecognitionRequest } from '@zennolab_com/capmonstercloud-client';

const API_KEY = "YOUR_API_KEY";
const TARGET_URL = "https://example.com/captcha-page";

async function solveComplexImageTaskPlaywright() {
    const browser = await chromium.launch({ headless: false });
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto(TARGET_URL);

    // Captcha-Bild finden
    const captchaHandle = await page.$('#captcha'); // ersetzen Sie durch den echten Selektor
    const captchaBase64 = await captchaHandle.evaluate(img => {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        return canvas.toDataURL('image/png').split(',')[1];
    });

    console.log("Captcha base64:", captchaBase64.substring(0, 50) + "...");

    const cmcClient = CapMonsterCloudClientFactory.Create(
        new ClientOptions({ clientKey: API_KEY })
    );

    // Captcha zur Erkennung senden
    const citRecognitionRequest = new ComplexImageTaskRecognitionRequest({
        imagesBase64: [captchaBase64],
        metaData: { Task: 'oocl_rotate' } // ersetzen Sie durch Ihren CAPTCHA-Typ
    });

    const result = await cmcClient.Solve(citRecognitionRequest);
    console.log("Solution received:", result);

    // Lösung verarbeiten
    const solution = result.solution;

    if (!solution) {
        console.error("No solution received");
        return;
    }

    if (solution.metadata?.AnswerType === "Coordinate") {
        // CAPTCHA mit Koordinaten
        const box = await captchaHandle.boundingBox();
        for (const point of solution.answer) {
            const clickX = box.x + point.X;
            const clickY = box.y + point.Y;
            console.log(`Clicking at: (${clickX}, ${clickY})`);
            await page.mouse.click(clickX, clickY);
        }
    } else if (solution.metadata?.AnswerType === "Grid") {
        // Grid-CAPTCHA (Array true/false)
        const box = await captchaHandle.boundingBox();
        const gridItems = await page.$$('#captcha_grid div'); // ersetzen Sie durch die Selektoren der Grid-Elemente
        const answers = solution.answer;

        for (let i = 0; i < answers.length; i++) {
            if (answers[i] && gridItems[i]) {
                const itemBox = await gridItems[i].boundingBox();
                const clickX = itemBox.x + itemBox.width / 2;
                const clickY = itemBox.y + itemBox.height / 2;
                console.log(`Clicking grid item ${i} at: (${clickX}, ${clickY})`);
                await page.mouse.click(clickX, clickY);
            }
        }
    } else {
        console.warn("Unknown captcha solution type:", solution.metadata?.AnswerType);
    }

    // Klick auf die Bestätigungsschaltfläche (falls vorhanden)
    await page.click('#submit_button'); // ersetzen Sie durch den echten Selektor der Schaltfläche

    console.log("Captcha solved.");
}

solveComplexImageTaskPlaywright().catch(console.error);
  
Wie man eine Bild-CAPTCHA in die eigene Website einbindet
Um die Funktionsweise der CAPTCHA auf Ihrer Website zu verstehen, die Logik zu prüfen oder neu zu konfigurieren, empfehlen wir diesen Abschnitt. Hier wird der allgemeine Prozess der Schutzintegration beschrieben – das erleichtert das schnelle Verständnis aller Details.

1. CAPTCHA auf dem Server generieren.

  • Ein CAPTCHA-Bild wird erstellt: Einzelbild oder Bilder-Grid.
  • Rauschen, Verzerrungen und zufällige Elemente werden hinzugefügt, um Bots zu verhindern.
  • Eine eindeutige captchaId wird generiert und die richtige Lösung gespeichert (im Speicher, in der Datenbank oder im Cache).

2. CAPTCHA an den Client senden

  • Der Server sendet dem Client captchaId und das Bild (Base64 oder URL).
  • Der Client zeigt die CAPTCHA an, z.B. mit <img> oder Grid <div> mit Anweisungen.
Beispiel Client-Teil (HTML + JS)Beispiel Client-Teil (HTML + JS)
arrow

3. Benutzerantwort eingeben

  • Benutzer gibt Text ein, klickt auf Bilder oder dreht Objekte.
  • Client formatiert die Antwort passend:
    • Text-CAPTCHA → String
    • Grid → Array true/false
    • Koordinaten → Array {X, Y}

4. Antwort an den Server senden:

  • Client sendet POST-Anfrage mit captchaId und Antwort (answer).
  • Optional kann ein Session-Token gesendet werden, um wiederholtes Lösen zu verhindern.

5. Serverprüfung

  • Server sucht CAPTCHA-Sitzung anhand der captchaId.
  • Vergleicht Benutzerantwort mit der richtigen Lösung.
  • Gibt success: true/false zurück.
  • Bei Fehlschlag kann die CAPTCHA aktualisiert werden.
Beispiel Server-TeilBeispiel Server-Teil
arrow

6. Weitere Schritte

  • Erfolgreiche CAPTCHA → geschützter Prozess (Formular, Registrierung usw.) wird erlaubt.
  • Fehlgeschlagene CAPTCHA → neue Ausgabe, ggf. Begrenzung der Versuche.

Zusätzlich

  • Verwenden Sie TTL (Lebensdauer) für CAPTCHA-Sitzungen, damit diese automatisch ablaufen.
  • Bilder cachen und temporäre URLs verwenden, um Ressourcen zu sparen.
  • Stellen Sie korrekte Klick- und Touch-Funktionen im Grid auf Mobilgeräten sicher.
  • Führen Sie Protokollierung und Analyse zur Verbesserung der Benutzererfahrung und Bot-Abwehr.
Background
Mögliche Fehler und Debugging
Bug Icon
Bild-CAPTCHA lädt nicht
(Leeres Raster, defekte Bilder, 404/500-Fehler, Probleme mit Base64) — prüfen Sie, ob der Server die Bilder korrekt generiert, die Base64-Daten nicht beschädigt sind, das Bildformat vom Browser unterstützt wird und der Client eine aktuelle captchaId erhält.
Bug Icon
Benutzerklicks werden nicht verarbeitet
(Zellen werden nicht markiert oder die Antwort ist leer) — stellen Sie sicher, dass Klickkoordinaten oder -indizes an den Server gesendet werden, die Daten korrekt serialisiert sind und Touch-Ereignisse auf mobilen Geräten unterstützt werden.
Bug Icon
Captcha besteht trotz korrekter Klicks nicht
Prüfen Sie, dass das Captcha nicht vor der Überprüfung neu erstellt wird, die richtige Antwort separat pro Sitzung gespeichert wird, das Antwortformat dem erwarteten entspricht und die Gültigkeitsdauer (TTL) des Captchas nicht abgelaufen ist.
Bug Icon
CAPTCHA-Zeit abgelaufen
Wenn der Benutzer lange braucht, erhöhen Sie die TTL, aktualisieren Sie die CAPTCHA bei erneuter Prüfung und informieren Sie den Benutzer über das Neuladen der Bilder.
Tests der Schutzstabilität
Stellen Sie nach der Integration sicher, dass das System die Website wirklich vor automatisierten Aktionen schützt.
Tipps zu Sicherheit und Optimierung
Speichern Sie die richtige CAPTCHA-Antwort <b>nur auf dem Server</b> (Speicher, Redis oder Datenbank), niemals beim Client.
Verwenden Sie einmalige CAPTCHA-IDs (<b>captchaId</b>).
Begrenzen Sie die Anzahl der Versuche pro CAPTCHA.
Verwenden Sie immer <b>HTTPS</b> für die Übertragung von Bildern und Klicks.
Bilder cachen und <b>temporäre URLs</b> verwenden, falls möglich.
Protokollieren Sie Fehler bei Generierung und Prüfung (Zeit, IP / Fingerabdruck, wenn anwendbar, Ablehnungsgrund).
Aktualisieren Sie regelmäßig die CAPTCHA-Mechanik (Bildsets, Gridgröße und -struktur, Aufgabentypen).
Fazit

Wenn Sie eine Website mit bereits installierter CAPTCHA oder einem anderen Schutzsystem vorfinden und keinen Zugriff auf den Code haben — kein Problem! Es ist einfach zu erkennen, welche Technologie verwendet wird. Zur Prüfung der Funktionsweise können Sie CapMonster Cloud in einer isolierten Testumgebung nutzen, um sicherzustellen, dass Token-Verarbeitung und Logik korrekt arbeiten.

Bei Bild-CAPTCHAs reicht es, das System zu identifizieren, dessen Verhalten zu analysieren und sicherzustellen, dass der Schutz funktioniert. In diesem Artikel haben wir gezeigt, wie man eine ComplexImage-Bild-CAPTCHA erkennt, anschließt oder neu konfiguriert, um den Schutz zuverlässig zu überwachen.

Conclusion
Nützliche Links
DocIconCapMonster Cloud-Dokumentation (ComplexImage)DocIconAnleitung zum Erstellen einer eigenen CAPTCHADocIconRegistrierung beim CapMonster Cloud-Service