logo
bars

CAPTCHA met afbeeldingen (ComplexImage)
en CapMonster Cloud

CAPTCHA-oplossing, installatie op de website en testen.
Heb je een site geërfd met een ingebouwde captcha of andere bescherming, maar zonder toegang tot de broncode? Dan wil je natuurlijk weten welke oplossing draait, of die goed is ingesteld en hoe je de werking test.

In dit artikel hebben we geprobeerd antwoord te geven op alle belangrijke vragen. De eerste stap bij het oplossen van het vraagstuk is vaststellen welk beveiligingssysteem wordt gebruikt. Daarvoor kun je de lijst met populaire captcha’s en anti-botbeveiligingssystemen raadplegen, met visuele voorbeelden en kernkenmerken die je helpen snel te bepalen waarmee je te maken hebt.

Als je ontdekt dat je website ComplexImage gebruikt, is de volgende stap om de eigenschappen en werking ervan uitgebreider te bestuderen. In dit artikel vind je ook een handleiding voor het integreren van ComplexImage, zodat je volledig begrijpt hoe het systeem op je website werkt. Zo kun je niet alleen de huidige bescherming beter doorgronden, maar ook het onderhoud ervan goed plannen.

Wat is een CAPTCHA met afbeeldingen
Wat is een CAPTCHA met afbeeldingen
Een CAPTCHA met afbeeldingen is een type visuele CAPTCHA waarbij de gebruiker een taak moet uitvoeren die verband houdt met het analyseren van afbeeldingen. Meestal vraagt het systeem om afbeeldingen te selecteren die aan een bepaalde voorwaarde voldoen, objecten te tellen, de juiste positie van een object te bepalen of een andere visuele actie uit te voeren. In tegenstelling tot tekst-CAPTCHAs, waarbij alleen karakters van een afbeelding moeten worden ingevoerd, controleert een afbeelding-CAPTCHA of de gebruiker visuele informatie kan interpreteren en logische handelingen kan uitvoeren. Dit maakt het moeilijker voor automatische herkenning en effectiever in het beschermen van registratie-, aanmeldings- en andere kritieke punten op de website tegen bots.

Hoe een CAPTCHA met afbeeldingen op te lossen via CapMonster Cloud

Bij het testen van formulieren met Tencent CAPTCHA is het vaak nodig om de werking van de CAPTCHA te controleren en te zorgen dat deze correct is geïntegreerd.
U kunt de CAPTCHA handmatig testen op uw website:
  • Open de pagina met het formulier en controleer of de CAPTCHA zichtbaar is.
  • Probeer het formulier te verzenden zonder de CAPTCHA op te lossen — de server moet een fout teruggeven.
  • Na het correct oplossen van de CAPTCHA moet het formulier foutloos worden verzonden.
Voor automatische CAPTCHA-oplossing kunt u gespecialiseerde services gebruiken, zoals CapMonster Cloud — een tool die CAPTCHA-parameters ontvangt, deze op zijn servers verwerkt en een kant-en-klare oplossing terugstuurt, bijvoorbeeld getallen of klikcoördinaten die gebruikt kunnen worden om de verificatie te passeren zonder dat de gebruiker iets doet.

Werken met CapMonster Cloud via de API bestaat doorgaans uit de volgende stappen:

Taak aanmakenTaak aanmaken
arrow
API-aanvraag versturenAPI-aanvraag versturen
arrow
Resultaat ontvangenResultaat ontvangen
arrow
Token op de pagina plaatsenToken op de pagina plaatsen
arrow
Herkenning van CAPTCHA met afbeeldingen met kant-en-klare bibliotheken
CapMonster Cloud biedt kant-en-klare bibliotheken voor gebruik met Python, JavaScript (Node.js) en C#.
Python
JavaScript
C#
Oplossing invoeren en formulier verzenden
Voorbeeld in Node.js voor de volledige cyclus van CAPTCHA-herkenning op uw webpagina. Mogelijke benaderingen: HTTP-verzoeken gebruiken om HTML en systeemparameters te verkrijgen, de oplossing verzenden en het resultaat verwerken. Of, zoals in het onderstaande voorbeeld, tools voor automatisering (zoals Playwright) gebruiken — de pagina openen, wachten op verificatie, parameters via de CapMonster Cloud-client verzenden, resultaat ontvangen, invullen in het juiste veld (voor testdoeleinden kunt u correcte of incorrecte gegevens gebruiken) en het resultaat bekijken.

// 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);

    // Zoek de CAPTCHA-afbeelding
    const captchaHandle = await page.$('#captcha'); // vervang door de werkelijke selector
    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 })
    );

    // Stuur de CAPTCHA naar herkenning
    const citRecognitionRequest = new ComplexImageTaskRecognitionRequest({
        imagesBase64: [captchaBase64],
        metaData: { Task: 'oocl_rotate' } // vervang door uw CAPTCHA-type
    });

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

    // Verwerking van de oplossing
    const solution = result.solution;

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

    if (solution.metadata?.AnswerType === "Coordinate") {
        // CAPTCHA met coördinaten
        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'); // vervang door selectors van grid-elementen
        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);
    }

    // Klik op de bevestigingsknop (indien aanwezig)
    await page.click('#submit_button'); // vervang door de werkelijke knopselector

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

solveComplexImageTaskPlaywright().catch(console.error);
  
Hoe een CAPTCHA met afbeeldingen aan uw website te koppelen
Om de werking van de CAPTCHA op uw website goed te begrijpen, de logica te begrijpen of opnieuw te configureren, raden we aan deze sectie te bestuderen. Hierin wordt het algemene proces van bescherming beschreven, waardoor u snel alle nuances kunt doorgronden.

1. CAPTCHA genereren op de server.

  • Een CAPTCHA-afbeelding wordt gemaakt: een enkele afbeelding of een grid van afbeeldingen.
  • Ruis, vervormingen en willekeurige elementen worden toegevoegd ter bescherming tegen bots.
  • Een unieke captchaId wordt gegenereerd en het juiste antwoord wordt opgeslagen (in geheugen, database of cache).

2. CAPTCHA naar de client verzenden

  • De server stuurt captchaId en de afbeelding (base64 of URL) naar de client.
  • De client toont de CAPTCHA, bijvoorbeeld: <img> of een grid <div> met instructies.
Voorbeeld client-side (HTML + JS)Voorbeeld client-side (HTML + JS)
arrow

3. Antwoordinvoer door gebruiker

  • Gebruiker voert tekst in, klikt op afbeeldingen of roteert objecten.
  • De client vormt het antwoord in de juiste structuur:
    • tekst CAPTCHA → string
    • grid → array true/false
    • coördinaten → array {X, Y}

4. Antwoord naar server verzenden:

  • Client verzendt POST met captchaId en antwoord (answer).
  • U kunt sessietoken verzenden ter bescherming tegen herhaalde pogingen.

5. Controle op server

  • Server zoekt CAPTCHA-sessie op captchaId.
  • Vergelijkt het gebruikersantwoord met het juiste antwoord.
  • Geeft success: true/false terug.
  • Bij mislukking kan CAPTCHA worden vernieuwd.
Server-side voorbeeldServer-side voorbeeld
arrow

6. Verdere stappen

  • Succesvolle CAPTCHA → beveiligd proces toegestaan (formulier, registratie, enz.).
  • Mislukte CAPTCHA → nieuwe CAPTCHA, aantal pogingen kan worden beperkt.

Aanvullende aanbevelingen

  • Gebruik TTL (leeftijd) voor CAPTCHA-sessies zodat ze automatisch verlopen.
  • Cache afbeeldingen en gebruik tijdelijke URL's om middelen te besparen.
  • Zorg voor correcte werking van clicks en touch op mobiele apparaten.
  • Houd logs en analytics bij voor betere UX en bescherming tegen bots.
Background
Mogelijke fouten en debugging
Bug Icon
CAPTCHA met afbeeldingen wordt niet geladen
(Leeg raster, kapotte afbeeldingen, 404/500-fouten, base64-problemen) — controleer of de server afbeeldingen correct genereert, de base64-gegevens niet beschadigd zijn, het afbeeldingsformaat door de browser wordt ondersteund en de client een geldige captchaId ontvangt.
Bug Icon
Gebruikersklikken worden niet verwerkt
(Cellen worden niet gemarkeerd of het antwoord is leeg) — zorg ervoor dat klikcoördinaten of -indices naar de server worden verzonden, de gegevens correct worden geserialiseerd en touchgebeurtenissen op mobiele apparaten worden ondersteund.
Bug Icon
Captcha faalt ondanks correcte klikken
Controleer dat de captcha niet opnieuw wordt aangemaakt vóór validatie, dat het juiste antwoord per sessie apart wordt opgeslagen, dat het antwoordformaat overeenkomt met de verwachting en dat de captcha-TTL niet is verlopen.
Bug Icon
CAPTCHA is verlopen
Als de gebruiker te lang doet over de CAPTCHA, verhoog de TTL, vernieuw de CAPTCHA bij een nieuwe poging en informeer de gebruiker over het opnieuw laden van afbeeldingen.
Controle van de robuustheid
Controleer na de integratie of het systeem de site echt beschermt tegen geautomatiseerde acties.
Aanbevelingen voor veiligheid en optimalisatie
Sla het juiste CAPTCHA-antwoord <b>alleen op de server</b> op (geheugen, Redis, database), nooit naar de client sturen.
Gebruik eenmalige CAPTCHA-identificatoren (<b>captchaId</b>).
Beperk het aantal pogingen per CAPTCHA.
Gebruik altijd <b>HTTPS</b> voor het verzenden van afbeeldingen en clicks.
Cache afbeeldingen en gebruik <b>tijdelijke URL's</b> indien mogelijk.
Log fouten bij generatie en verificatie (tijd, IP/fingerprint, reden van weigering).
Werk regelmatig de CAPTCHA-mechanica bij (afbeeldingsset, gridgrootte/structuur, type taken).
Conclusie

Als u op een website bent met al geïnstalleerde CAPTCHA of een ander beschermingssysteem en geen toegang heeft tot de code, is dat geen probleem! Het is vrij eenvoudig om de technologie te identificeren. Voor het controleren van correcte werking kunt u CapMonster Cloud gebruiken in een geïsoleerde testomgeving om te verifiëren dat tokenverwerking en logica correct functioneren.

Voor CAPTCHA met afbeeldingen volstaat het om het systeem te herkennen, het gedrag te bestuderen en te controleren of de bescherming werkt. In dit artikel hebben we getoond hoe u een ComplexImage CAPTCHA kunt identificeren en hoe u deze kunt integreren of opnieuw instellen om de bescherming te handhaven en de werking te controleren.

Conclusion
Handige links
DocIconCapMonster Cloud-documentatie (ComplexImage)DocIconGids om uw eigen CAPTCHA te makenDocIconRegistratie bij CapMonster Cloud-service