logo
bars

CAPTCHA con immagini (ComplexImage)
e CapMonster Cloud

Risoluzione del CAPTCHA, installazione sul sito e test.
Hai ereditato un sito con una captcha o un'altra protezione ma senza accesso al codice sorgente? È normale chiedersi quale soluzione sia installata, se sia configurata correttamente e come testarla.

In questo articolo abbiamo cercato di rispondere a tutte le domande principali. Il primo passo per risolvere il problema è capire quale sistema di protezione viene utilizzato. A questo scopo puoi consultare l’elenco dei captcha e dei sistemi di protezione antibot più diffusi, dove trovi esempi visivi e caratteristiche chiave che ti aiutano a identificare rapidamente con cosa hai a che fare.

Se scopri che sul tuo sito viene utilizzato ComplexImage, il passo successivo è analizzarne più nel dettaglio le proprietà e il funzionamento. In questo stesso articolo puoi anche studiare la guida all’integrazione di ComplexImage, per comprendere a fondo come opera sul tuo sito. Questo ti permetterà non solo di capire la protezione attuale, ma anche di pianificarne correttamente la manutenzione.

Cos'è un CAPTCHA con immagini
Cos'è un CAPTCHA con immagini
Un CAPTCHA con immagini è un tipo di CAPTCHA visivo in cui all'utente viene richiesto di completare un compito legato all'analisi delle immagini. Generalmente il sistema chiede di selezionare immagini che soddisfano una condizione, contare oggetti, determinare la posizione corretta di un elemento o svolgere un'altra azione visiva. A differenza dei CAPTCHA testuali, in cui basta inserire i caratteri mostrati nell'immagine, il CAPTCHA con immagini verifica la capacità dell'utente di interpretare le informazioni visive e compiere azioni logiche. Questo lo rende più difficile da riconoscere automaticamente e più efficace nel proteggere registrazioni, login e altri punti critici del sito dai bot.

Come risolvere un CAPTCHA con immagini tramite CapMonster Cloud

Durante il test dei form con Tencent CAPTCHA spesso è necessario verificare il corretto funzionamento del CAPTCHA e assicurarsi che sia integrato correttamente.
Puoi testare manualmente il CAPTCHA sul tuo sito:
  • Apri la pagina con il form e assicurati che il CAPTCHA sia visibile.
  • Prova a inviare il form senza risolvere il CAPTCHA — il server dovrebbe restituire un errore.
  • Dopo aver risolto correttamente il CAPTCHA, il form dovrebbe essere inviato senza errori.
Per la risoluzione automatica del CAPTCHA puoi utilizzare servizi specializzati, come CapMonster Cloud, uno strumento che riceve i parametri del CAPTCHA, li elabora sui propri server e restituisce la soluzione pronta — ad esempio numeri o coordinate dei click da usare per superare la verifica senza intervento dell'utente.

Lavorare con CapMonster Cloud via API di solito prevede i seguenti passaggi:

Creazione della taskCreazione della task
arrow
Invio della richiesta APIInvio della richiesta API
arrow
Ricezione del risultatoRicezione del risultato
arrow
Inserimento del token nella paginaInserimento del token nella pagina
arrow
Riconoscimento dei CAPTCHA con immagini usando librerie pronte
Il servizio CapMonster Cloud fornisce librerie pronte all'uso per linguaggi Python, JavaScript (Node.js) e C#.
Python
JavaScript
C#
Inserimento della soluzione e invio del form
Esempio Node.js per il ciclo completo di riconoscimento del CAPTCHA sulla tua pagina web. Possibili approcci: usare richieste HTTP per ottenere HTML e parametri del sistema di protezione, inviare la risposta e gestire il risultato. Oppure, come nell'esempio, usare strumenti di automazione (come Playwright) — aprire la pagina, attendere la verifica, inviare i parametri tramite il client CapMonster Cloud, ottenere il risultato, inserirlo nel campo corrispondente (per test puoi usare dati corretti o errati) e osservare il risultato.

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

    // Trova l'immagine del CAPTCHA
    const captchaHandle = await page.$('#captcha'); // sostituisci con il selettore reale
    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 })
    );

    // Invia il CAPTCHA per il riconoscimento
    const citRecognitionRequest = new ComplexImageTaskRecognitionRequest({
        imagesBase64: [captchaBase64],
        metaData: { Task: 'oocl_rotate' } // sostituisci con il tuo tipo di CAPTCHA
    });

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

    // Elaborazione della soluzione
    const solution = result.solution;

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

    if (solution.metadata?.AnswerType === "Coordinate") {
        // CAPTCHA con coordinate
        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 (array true/false)
        const box = await captchaHandle.boundingBox();
        const gridItems = await page.$$('#captcha_grid div'); // sostituisci con i selettori degli elementi della griglia
        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);
    }

    // Clic sul pulsante di conferma (se presente)
    await page.click('#submit_button'); // sostituisci con il selettore reale del pulsante

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

solveComplexImageTaskPlaywright().catch(console.error);
  
Come integrare un CAPTCHA con immagini nel tuo sito
Per comprendere il funzionamento del CAPTCHA sul tuo sito, verificarne la logica o riconfigurarlo, consigliamo di leggere questa sezione. Essa descrive il processo generale di integrazione della protezione, aiutandoti a comprendere rapidamente tutti i dettagli.

1. Generazione del CAPTCHA sul server.

  • Viene creata un'immagine CAPTCHA: singola o una griglia di immagini.
  • Vengono aggiunti rumore, distorsioni ed elementi casuali per proteggere dai bot.
  • Viene generato un captchaId unico e la soluzione corretta viene salvata (in memoria, DB o cache).

2. Trasmissione del CAPTCHA al client

  • Il server invia al client captchaId e immagine (base64 o URL).
  • Il client mostra il CAPTCHA, ad esempio: <img> o una griglia <div> con istruzioni.
Esempio client-side (HTML + JS)Esempio client-side (HTML + JS)
arrow

3. Inserimento della risposta da parte dell'utente

  • L'utente inserisce testo, clicca sulle immagini o ruota oggetti.
  • Il client forma la risposta nella struttura appropriata:
    • CAPTCHA testuale → stringa
    • Griglia → array true/false
    • Coordinate → array {X, Y}

4. Invio della risposta al server:

  • Il client invia POST con captchaId e risposta (answer).
  • Puoi inviare un token di sessione per protezione da tentativi multipli.

5. Verifica sul server

  • Il server cerca la sessione CAPTCHA tramite captchaId.
  • Confronta la risposta dell'utente con la soluzione corretta.
  • Restituisce success: true/false.
  • In caso di fallimento, il CAPTCHA può essere aggiornato.
Esempio server-sideEsempio server-side
arrow

6. Passi successivi

  • CAPTCHA corretta → processo protetto autorizzato (form, registrazione, ecc.).
  • CAPTCHA fallita → nuova CAPTCHA, possibile limitare i tentativi.

Ulteriori consigli

  • Usa TTL per le sessioni CAPTCHA affinché scadano automaticamente.
  • Cache immagini e usa URL temporanei per risparmiare risorse.
  • Assicurati che i click e touch funzionino correttamente su dispositivi mobili.
  • Mantieni log e analytics per migliorare UX e protezione dai bot.
Background
Possibili errori e debug
Bug Icon
Il CAPTCHA con immagini non si carica
(Griglia vuota, immagini danneggiate, errori 404/500, problemi con base64) — verifica che il server generi correttamente le immagini, che i dati base64 non siano corrotti, che il formato dell’immagine sia supportato dal browser e che il client riceva un captchaId valido.
Bug Icon
I clic dell’utente non vengono elaborati
(Le celle non vengono selezionate o la risposta è vuota) — assicurati che le coordinate o gli indici dei clic vengano inviati al server, che i dati siano serializzati correttamente e che gli eventi touch siano supportati sui dispositivi mobili.
Bug Icon
Il captcha non viene superato nonostante i clic corretti
Controlla che il captcha non venga rigenerato prima della verifica, che la risposta corretta sia memorizzata separatamente per ogni sessione, che il formato della risposta sia quello previsto e che il TTL del captcha non sia scaduto.
Bug Icon
Il CAPTCHA è scaduto
Se l'utente impiega troppo tempo, aumenta il TTL, aggiorna il CAPTCHA al nuovo tentativo e informa l'utente di ricaricare le immagini.
Verifiche della resilienza della protezione
Dopo l'integrazione assicurati che il sistema protegga davvero il sito dalle azioni automatizzate.
Suggerimenti di sicurezza e ottimizzazione
Memorizza la risposta corretta solo sul <b>server</b> (memoria, Redis o DB), mai sul client.
Usa ID CAPTCHA monouso (<b>captchaId</b>).
Limita il numero di tentativi per ogni CAPTCHA.
Usa sempre <b>HTTPS</b> per trasmettere immagini e click.
Cache immagini e usa <b>URL temporanei</b> se possibile.
Registra errori di generazione e verifica (ora, IP/fingerprint, motivo del rifiuto).
Aggiorna regolarmente la logica del CAPTCHA (set di immagini, dimensione/struttura griglia, tipi di task).
Conclusione

Se ti trovi su un sito con CAPTCHA già installato o un altro sistema di protezione senza accesso al codice — nessun problema! È facile identificare la tecnologia. Per verificarne il funzionamento puoi usare CapMonster Cloud in un ambiente di test isolato per assicurarti che la logica e il processamento dei token siano corretti.

Per i CAPTCHA con immagini, identifica il sistema, studia il comportamento e assicurati che la protezione funzioni. L'articolo mostra come riconoscere il CAPTCHA con immagini ComplexImage e come integrarlo o riconfigurarlo per mantenere la protezione e controllarne il funzionamento.

Conclusion
Link utili
DocIconDocumentazione CapMonster Cloud (ComplexImage)DocIconGuida per creare il tuo CAPTCHADocIconRegistrazione al servizio CapMonster Cloud