logo
bars

CAPTCHA avec images (ComplexImage)
et CapMonster Cloud

Résolution de CAPTCHA, installation sur le site et tests.
Vous avez hérité d’un site doté d’une captcha ou d’une autre couche de protection mais sans accès au code source ? Il est alors naturel de se demander quelle solution est installée, si elle est correctement configurée et comment la tester.

Dans cet article, nous avons essayé de répondre à toutes les questions essentielles. Pour commencer à résoudre le problème, il faut d’abord déterminer quel système de protection est utilisé. Pour cela, vous pouvez consulter la liste des captchas et systèmes de protection antibot les plus populaires, qui présente des exemples visuels et des caractéristiques clés permettant d’identifier rapidement avec quoi vous avez affaire.

Si vous constatez que votre site utilise ComplexImage, l’étape suivante consiste à étudier plus en détail ses propriétés et son fonctionnement. Dans cet article, vous pouvez également consulter le guide d’intégration de ComplexImage afin de comprendre pleinement la façon dont il fonctionne sur votre site. Cela vous permettra non seulement de mieux connaître la protection en place, mais aussi de planifier correctement sa maintenance.

Qu'est-ce qu'un CAPTCHA d'images
Qu'est-ce qu'un CAPTCHA d'images
Un CAPTCHA d'images est un type de CAPTCHA visuel où l'utilisateur doit effectuer une tâche liée à l'analyse d'images. Généralement, le système demande de sélectionner des images correspondant à une condition, de compter des objets, d'identifier la position correcte d'un élément ou d'effectuer une autre action visuelle. Contrairement aux CAPTCHAs textuels, où il suffit de saisir les caractères d'une image, les CAPTCHAs d'images vérifient la capacité de l'utilisateur à interpréter l'information visuelle et à effectuer des actions logiques. Cela les rend plus difficiles à reconnaître automatiquement et plus efficaces pour protéger les formulaires d'inscription, de connexion et autres points critiques du site contre les bots.

Comment résoudre un CAPTCHA d'images avec CapMonster Cloud

Lors du test des formulaires avec Tencent CAPTCHA, il est souvent nécessaire de vérifier le fonctionnement du CAPTCHA et de s'assurer qu'il est correctement intégré.
Vous pouvez tester manuellement le CAPTCHA sur votre site :
  • Ouvrez la page contenant le formulaire et assurez-vous que le CAPTCHA s'affiche.
  • Essayez de soumettre le formulaire sans résoudre le CAPTCHA — le serveur doit renvoyer une erreur.
  • Après avoir résolu correctement le CAPTCHA, le formulaire doit être soumis sans erreur.
Pour la résolution automatique du CAPTCHA, vous pouvez utiliser des services spécialisés tels que CapMonster Cloud, un outil qui reçoit les paramètres du CAPTCHA, les traite sur ses serveurs et renvoie une solution prête — par exemple, des chiffres ou des coordonnées de clic pouvant être utilisés pour passer la vérification sans intervention de l'utilisateur.

Travailler avec CapMonster Cloud via l’API comprend généralement les étapes suivantes :

Création de la tâcheCréation de la tâche
arrow
Envoyer une requête APIEnvoyer une requête API
arrow
Réception du résultatRéception du résultat
arrow
Insertion du jeton sur la pageInsertion du jeton sur la page
arrow
Reconnaissance de CAPTCHA d'images avec des bibliothèques prêtes à l'emploi
Le service CapMonster Cloud fournit des bibliothèques prêtes à l'emploi pour faciliter l'utilisation en Python, JavaScript (Node.js) et C#.
Python
JavaScript
C#
Insertion de la solution et soumission du formulaire
Exemple Node.js pour un cycle complet de reconnaissance de CAPTCHA sur votre page web. Approches possibles : utiliser des requêtes HTTP pour récupérer le HTML et les paramètres du système de protection, envoyer la réponse et traiter le résultat. Ou, comme dans l'exemple, utiliser des outils d'automatisation (comme Playwright) : ouvrir la page, attendre la vérification, soumettre les paramètres via le client CapMonster Cloud, récupérer le résultat, l'insérer dans le champ correspondant (pour les tests, vous pouvez utiliser des données correctes ou incorrectes) et observer le résultat.

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

    // Localiser l'image du CAPTCHA
    const captchaHandle = await page.$('#captcha'); // remplacez par le sélecteur réel
    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 })
    );

    // Envoyer le CAPTCHA pour reconnaissance
    const citRecognitionRequest = new ComplexImageTaskRecognitionRequest({
        imagesBase64: [captchaBase64],
        metaData: { Task: 'oocl_rotate' } // remplacez par votre type de CAPTCHA
    });

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

    // Traitement de la solution
    const solution = result.solution;

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

    if (solution.metadata?.AnswerType === "Coordinate") {
        // CAPTCHA avec coordonnées
        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") {
        // CAPTCHA Grid (tableau true/false)
        const box = await captchaHandle.boundingBox();
        const gridItems = await page.$$('#captcha_grid div'); // remplacez par les sélecteurs des éléments de la grille
        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);
    }

    // Cliquez sur le bouton de confirmation (si présent)
    await page.click('#submit_button'); // remplacez par le sélecteur réel du bouton

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

solveComplexImageTaskPlaywright().catch(console.error);
  
Comment intégrer un CAPTCHA d'images sur votre site
Pour comprendre le fonctionnement du CAPTCHA sur votre site, vérifier sa logique ou le reconfigurer, nous recommandons cette section. Elle décrit le processus général d'intégration de la protection, ce qui permet de comprendre rapidement tous les détails.

1. Génération du CAPTCHA sur le serveur.

  • Une image CAPTCHA est créée : une image unique ou une grille d'images.
  • Du bruit, des distorsions et des éléments aléatoires sont ajoutés pour protéger contre les bots.
  • Un captchaId unique est généré et la solution correcte est stockée (en mémoire, base de données ou cache).

2. Transmission du CAPTCHA au client

  • Le serveur envoie au client le captchaId et l'image (Base64 ou URL).
  • Le client affiche le CAPTCHA, par exemple avec <img> ou une grille <div> avec instructions.
Exemple côté client (HTML + JS)Exemple côté client (HTML + JS)
arrow

3. Saisie de la réponse par l'utilisateur

  • L'utilisateur saisit du texte, clique sur les images ou fait pivoter des objets.
  • Le client formate la réponse dans la structure appropriée :
    • CAPTCHA textuel → chaîne
    • Grille → tableau true/false
    • Coordonnées → tableau {X, Y}

4. Envoi de la réponse au serveur :

  • Le client envoie une requête POST avec captchaId et la réponse (answer).
  • Un token de session peut être envoyé pour éviter les résolutions répétées.

5. Vérification côté serveur

  • Le serveur recherche la session CAPTCHA via captchaId.
  • Compare la réponse utilisateur avec la solution correcte.
  • Retourne success: true/false.
  • En cas d'échec, le CAPTCHA peut être renouvelé.
Exemple côté serveurExemple côté serveur
arrow

6. Étapes suivantes

  • CAPTCHA réussie → le processus protégé (formulaire, inscription, etc.) est autorisé.
  • CAPTCHA échouée → générer un nouveau CAPTCHA, éventuellement limiter les tentatives.

En complément

  • Utilisez le TTL (durée de vie) pour les sessions CAPTCHA afin qu'elles expirent automatiquement.
  • Cachez les images et utilisez des URL temporaires pour économiser les ressources.
  • Assurez le bon fonctionnement des clics et touches sur mobiles.
  • Conservez des logs et analyses pour améliorer l'expérience utilisateur et la protection contre les bots.
Background
Erreurs possibles et débogage
Bug Icon
Le CAPTCHA d'images ne se charge pas
(Grille vide, images cassées, erreurs 404/500, problèmes de base64) — vérifiez que le serveur génère correctement les images, que les données base64 ne sont pas corrompues, que le format d’image est pris en charge par le navigateur et que le client reçoit un captchaId valide.
Bug Icon
Les clics de l’utilisateur ne sont pas traités
(Les cellules ne sont pas sélectionnées ou la réponse est vide) — assurez-vous que les coordonnées ou indices des clics sont envoyés au serveur, que les données sont correctement sérialisées et que les événements tactiles sont pris en charge sur les appareils mobiles.
Bug Icon
Le captcha échoue malgré des clics corrects
Vérifiez que le captcha n’est pas recréé avant la validation, que la bonne réponse est stockée séparément pour chaque session, que le format de la réponse est conforme à celui attendu et que la durée de vie (TTL) du captcha n’a pas expiré.
Bug Icon
Le CAPTCHA a expiré
Si l'utilisateur prend trop de temps, augmentez le TTL, rafraîchissez le CAPTCHA en cas de nouvelle tentative et informez l'utilisateur de recharger les images.
Tests de robustesse de la protection
Après l’intégration, vérifiez que le système protège réellement le site contre les actions automatisées.
Conseils de sécurité et d’optimisation
Stockez la réponse correcte du CAPTCHA <b>uniquement sur le serveur</b> (mémoire, Redis ou base de données), jamais sur le client.
Utilisez des identifiants CAPTCHA à usage unique (<b>captchaId</b>).
Limitez le nombre de tentatives par CAPTCHA.
Utilisez toujours <b>HTTPS</b> pour transmettre les images et clics.
Cachez les images et utilisez des <b>URL temporaires</b> si possible.
Enregistrez les erreurs de génération et de vérification (heure, IP/fingerprint, raison du rejet).
Mettez régulièrement à jour la mécanique du CAPTCHA (ensembles d'images, taille/structure de la grille, types de tâches).
Conclusion

Si vous tombez sur un site avec un CAPTCHA déjà installé ou un autre système de protection sans accès au code — pas de panique ! Il est facile d'identifier la technologie utilisée. Pour vérifier son fonctionnement, vous pouvez utiliser CapMonster Cloud dans un environnement de test isolé afin de vous assurer que le traitement des tokens et la logique fonctionnent correctement.

Pour les CAPTCHAs d'images, il suffit d'identifier le système, d'étudier son comportement et de s'assurer que la protection fonctionne. Cet article montre comment reconnaître le CAPTCHA d'images ComplexImage et comment l'intégrer ou le reconfigurer pour maintenir la protection et contrôler son fonctionnement de manière fiable.

Conclusion
Liens utiles
DocIconDocumentation CapMonster Cloud (ComplexImage)DocIconGuide pour créer votre propre CAPTCHADocIconInscription au service CapMonster Cloud