logo
bars

CAPTCHA com imagens (ComplexImage)
e CapMonster Cloud

Solução de CAPTCHA, instalação no site e testes.
Herdou um site com captcha ou outra proteção mas sem acesso ao código-fonte? É natural perguntar qual solução está instalada, se está configurada corretamente e como testá-la.

Neste artigo procurámos responder a todas as questões importantes. Para começar a resolver o problema, o primeiro passo é identificar que sistema de proteção está a ser utilizado. Para isso, pode consultar a lista de captchas e sistemas de proteção antibot mais populares, onde encontrará exemplos visuais e sinais principais que ajudam a perceber rapidamente com o que está a lidar.

Se verificar que o seu site utiliza ComplexImage, o passo seguinte é analisar mais detalhadamente as suas características e o seu funcionamento. Neste mesmo artigo também pode consultar o guia de integração de ComplexImage, para compreender totalmente como o sistema funciona no seu site. Isto permitirá não só entender a proteção atual, como também planear corretamente a sua manutenção.

O que é CAPTCHA com imagens
O que é CAPTCHA com imagens
CAPTCHA com imagens é um tipo de CAPTCHA visual em que o usuário deve realizar uma tarefa relacionada à análise de imagens. Normalmente, o sistema solicita selecionar imagens que atendam a uma condição específica, contar objetos, determinar a posição correta de um objeto ou executar outra ação visual. Ao contrário do CAPTCHA textual, em que o usuário apenas digita caracteres da imagem, o CAPTCHA com imagens verifica a capacidade do usuário de interpretar informações visuais e executar ações lógicas. Isso torna mais difícil para reconhecimento automático e protege de forma mais eficaz formulários de registro, login e outros pontos críticos do site contra bots.

Como resolver CAPTCHA com imagens via CapMonster Cloud

Ao testar formulários com Tencent CAPTCHA, muitas vezes é necessário verificar o funcionamento do CAPTCHA e garantir que ele esteja corretamente integrado.
Você pode testar manualmente o CAPTCHA inserido no seu site:
  • Abra a página com o formulário e certifique-se de que o CAPTCHA está visível.
  • Tente enviar o formulário sem resolver o CAPTCHA — o servidor deve retornar um erro.
  • Após resolver corretamente o CAPTCHA, o formulário deve ser enviado sem erros.
Para resolução automática de CAPTCHA, você pode usar serviços especializados, como CapMonster Cloud — uma ferramenta que recebe os parâmetros do CAPTCHA, processa em seus servidores e retorna a resposta pronta, por exemplo, números ou coordenadas de clique que podem ser usadas para passar na verificação sem a participação do usuário.

Trabalhar com o CapMonster Cloud através da API normalmente envolve os passos seguintes:

Criação da tarefaCriação da tarefa
arrow
Envio do pedido APIEnvio do pedido API
arrow
Receção do resultadoReceção do resultado
arrow
Aplicação do token na páginaAplicação do token na página
arrow
Reconhecimento de CAPTCHA com imagens usando bibliotecas prontas
O serviço CapMonster Cloud fornece bibliotecas prontas para uso em Python, JavaScript (Node.js) e C#.
Python
JavaScript
C#
Inserir resposta e enviar formulário
Exemplo em Node.js para o ciclo completo de reconhecimento de CAPTCHA em sua página web. Abordagens possíveis: usar requisições HTTP para obter o HTML e parâmetros do sistema de proteção, enviar a resposta e processar o resultado. Ou, como no exemplo abaixo, usar ferramentas de automação (como Playwright) — abrir a página, aguardar a verificação, enviar os parâmetros via cliente CapMonster Cloud, obter o resultado, inserir no campo apropriado (para testes você pode usar dados corretos ou incorretos) e verificar o resultado.

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

    // Localize a imagem do CAPTCHA
    const captchaHandle = await page.$('#captcha'); // substitua pelo seletor real
    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 })
    );

    // Envie o CAPTCHA para reconhecimento
    const citRecognitionRequest = new ComplexImageTaskRecognitionRequest({
        imagesBase64: [captchaBase64],
        metaData: { Task: 'oocl_rotate' } // substitua pelo seu tipo de CAPTCHA
    });

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

    // Processamento da solução
    const solution = result.solution;

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

    if (solution.metadata?.AnswerType === "Coordinate") {
        // CAPTCHA com coordenadas
        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'); // substitua pelos seletores dos elementos da grade
        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);
    }

    // Clique no botão de confirmação (se houver)
    await page.click('#submit_button'); // substitua pelo seletor real do botão

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

solveComplexImageTaskPlaywright().catch(console.error);
  
Como conectar CAPTCHA com imagens ao seu site
Para entender com segurança o funcionamento do CAPTCHA em seu site, compreender a lógica de verificação ou reconfigurá-lo, recomendamos estudar esta seção. Ela descreve o processo geral de integração da proteção — ajudando a entender rapidamente todos os detalhes.

1. Geração do CAPTCHA no servidor.

  • Uma imagem de CAPTCHA é criada: uma única imagem ou uma grade de imagens.
  • São adicionados ruído, distorções e elementos aleatórios para proteger contra bots.
  • Um captchaId único é gerado e a solução correta é armazenada (na memória, banco de dados ou cache).

2. Envio do CAPTCHA ao cliente

  • O servidor envia ao cliente captchaId e a imagem (base64 ou URL).
  • O cliente exibe o CAPTCHA, por exemplo: <img> ou uma grade <div> com instruções.
Exemplo do lado do cliente (HTML + JS)Exemplo do lado do cliente (HTML + JS)
arrow

3. Entrada de resposta pelo usuário

  • O usuário digita texto, clica nas imagens ou gira o objeto.
  • O cliente forma a resposta na estrutura adequada:
    • CAPTCHA de texto → string
    • grade → array true/false
    • coordenadas → array {X, Y}

4. Envio da resposta ao servidor:

  • O cliente envia POST com captchaId e resposta (answer).
  • Pode enviar token de sessão para proteção contra repetição.

5. Verificação no servidor

  • O servidor busca a sessão CAPTCHA pelo captchaId.
  • Compara a resposta do usuário com a solução correta.
  • Retorna success: true/false.
  • Em caso de falha, pode-se atualizar o CAPTCHA.
Exemplo do lado do servidorExemplo do lado do servidor
arrow

6. Próximos passos

  • CAPTCHA bem-sucedida → processo protegido (formulário, registro etc.) permitido.
  • CAPTCHA falhada → gerar nova, número de tentativas pode ser limitado.

Adicional

  • Use TTL (tempo de vida) para sessões CAPTCHA para que expirem automaticamente.
  • Cacheie imagens e use URLs temporários para economizar recursos.
  • Garanta o funcionamento correto de cliques e toques em dispositivos móveis.
  • Mantenha logs e analytics para melhorar a experiência do usuário e a proteção contra bots.
Background
Possíveis erros e depuração
Bug Icon
CAPTCHA com imagens não carrega
(Grade vazia, imagens corrompidas, erros 404/500, problemas com base64) — verifique se o servidor gera corretamente as imagens, se os dados base64 não estão corrompidos, se o formato da imagem é suportado pelo navegador e se o cliente recebe um captchaId válido.
Bug Icon
Os cliques do usuário não são processados
(As células não são selecionadas ou a resposta está vazia) — certifique-se de que as coordenadas ou índices dos cliques são enviados ao servidor, que os dados são serializados corretamente e que eventos de toque são suportados em dispositivos móveis.
Bug Icon
O captcha não passa mesmo com cliques corretos
Verifique se o captcha não é recriado antes da validação, se a resposta correta é armazenada separadamente por sessão, se o formato da resposta corresponde ao esperado e se o TTL do captcha não expirou.
Bug Icon
Tempo de vida da CAPTCHA expirou
Se o usuário demorar muito para resolver, aumente o TTL, atualize a CAPTCHA em nova tentativa e informe o usuário sobre a necessidade de recarregar as imagens.
Verificações de robustez
Depois da integração, certifique-se de que o sistema protege efetivamente o site contra ações automatizadas.
Recomendações de segurança e otimização
Armazene a resposta correta da CAPTCHA <b>apenas no servidor</b> (memória, Redis ou banco), nunca envie ao cliente.
Use identificadores únicos de CAPTCHA (<b>captchaId</b>).
Limite o número de tentativas de resolução de uma CAPTCHA.
Sempre use <b>HTTPS</b> para envio de imagens e cliques.
Cacheie imagens e use <b>URLs temporários</b> se possível.
Registre erros de geração e verificação (tempo, IP/fingerprint, motivo da rejeição).
Atualize regularmente a mecânica da CAPTCHA (conjunto de imagens, tamanho/estrutura da grade, tipos de tarefas).
Conclusão

Se você encontrou um site com CAPTCHA ou outro sistema de proteção já instalado e não tem acesso ao código — não há problema! É relativamente fácil identificar a tecnologia. Para verificar o funcionamento correto, você pode usar o serviço CapMonster Cloud em ambiente de teste isolado para garantir que o processamento de tokens e a lógica de verificação funcionam corretamente.

No caso do CAPTCHA com imagens, basta reconhecer o sistema, estudar seu comportamento e garantir que a proteção funciona. Neste artigo mostramos como identificar CAPTCHA com imagens (ComplexImage) e como integrá-la ou reconfigurá-la para manter a proteção e controlar seu funcionamento.

Conclusion
Links úteis
DocIconDocumentação CapMonster Cloud (ComplexImage)DocIconGuia para criar seu próprio CAPTCHADocIconRegistro no serviço CapMonster Cloud