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.
Wie man eine Bild-CAPTCHA über CapMonster Cloud löst
- Ö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.
Die Arbeit mit CapMonster Cloud über die API umfasst in der Regel folgende Schritte:
type - ComplexImageTask
class - recognition
imagesBase64 - ein Array von Bildern im Base64-Format. Beispiel: [ “/9j/4AAQSkZJRgABAQEAAAAAAAD…”];
Task (innerhalb von metadata) - Name der Aufgabe (z.B. dli).
https://api.capmonster.cloud/createTask{
"clientKey": "API_KEY",
"task": {
"type": "ComplexImageTask",
"class": "recognition",
"imagesBase64": [
"base64"
],
"metadata": {
"Task": "dli" // ersetzen Sie durch die gewünschte Aufgabe, eine Liste verfügbarer Module finden Sie unter https://docs.capmonster.cloud/docs/captchas/ComplexImageTask-Recognition/
}
}
}
{
"errorId":0,
"taskId":407533072
}https://api.capmonster.cloud/getTaskResult{
"clientKey":"API_KEY",
"taskId": 407533072
}
{
"solution":
{
"answer": "1",
"metadata": {
"AnswerType": "Text"
}
},
"cost": 0.0003,
"status": "ready",
"errorId": 0,
"errorCode": null,
"errorDescription": null
}
// 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);
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.
<!--Grid-Bild-CAPTCHA-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid CAPTCHA Demo</title>
<style>
#captchaGrid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 10px;
margin-bottom: 10px;
}
.grid-item {
width: 100px;
height: 100px;
background-color: #eee;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 2px solid transparent;
}
.grid-item.selected {
border-color: blue;
}
</style>
</head>
<body>
<h1>Grid CAPTCHA Demo</h1>
<div id="captchaGrid"></div>
<button id="submitBtn">Submit</button>
<button id="refreshBtn">Refresh CAPTCHA</button>
<p id="result"></p>
<script>
let captchaId;
let answers = []; // Array true/false für Klicks
async function loadCaptcha() {
const res = await fetch('/captcha'); // Server gibt JSON mit captchaId und Array der Base64-Bilder zurück
const data = await res.json();
captchaId = data.captchaId;
answers = new Array(data.images.length).fill(false);
const grid = document.getElementById('captchaGrid');
grid.innerHTML = '';
data.images.forEach((imgBase64, i) => {
const div = document.createElement('div');
div.className = 'grid-item';
div.style.backgroundImage = `url('data:image/png;base64,${imgBase64}')`;
div.style.backgroundSize = 'cover';
div.addEventListener('click', () => {
answers[i] = !answers[i];
div.classList.toggle('selected', answers[i]);
});
grid.appendChild(div);
});
document.getElementById('result').textContent = '';
}
document.getElementById('refreshBtn').addEventListener('click', loadCaptcha);
document.getElementById('submitBtn').addEventListener('click', async () => {
const res = await fetch('/captcha/verify', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ captchaId, answer: answers })
});
const data = await res.json();
document.getElementById('result').textContent = data.success ? 'Captcha passed!' : 'Captcha failed, try again.';
if (!data.success) loadCaptcha();
});
// CAPTCHA beim Start laden
loadCaptcha();
</script>
</body>
</html>
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.
<?php
session_start();
// CAPTCHA-TTL in Sekunden
define('CAPTCHA_TTL', 300); // 5 Minuten
// Zufälliges Bild generieren
function generateCaptchaImage($text = null) {
$width = 100;
$height = 100;
if (!$text) {
$text = substr(str_shuffle('ABCDEFGHJKLMNPQRSTUVWXYZ23456789'), 0, 2);
}
$image = imagecreatetruecolor($width, $height);
// Hintergrund
$bgColor = imagecolorallocate($image, rand(180, 255), rand(180, 255), rand(180, 255));
imagefilledrectangle($image, 0, 0, $width, $height, $bgColor);
// Text
$textColor = imagecolorallocate($image, 0, 0, 0);
$fontSize = 15;
$fontFile = __DIR__ . '/Arial.ttf'; // Pfad zur TTF-Schrift
if (file_exists($fontFile)) {
imagettftext($image, $fontSize, rand(-20,20), 10, 50, $textColor, $fontFile, $text);
} else {
imagestring($image, 5, 10, 40, $text, $textColor);
}
ob_start();
imagepng($image);
$imgData = ob_get_clean();
imagedestroy($image);
return base64_encode($imgData);
}
// Grid-CAPTCHA erstellen
function generateGridCaptcha() {
$numImages = 9; // 3x3
$images = [];
$solution = [];
for ($i = 0; $i < $numImages; $i++) {
// Zufällige Lösung, richtiges Bild oder nicht (Beispiel)
$isCorrect = rand(0,1) === 1;
$solution[] = $isCorrect;
// Bild generieren (verschiedene Objekte für echte CAPTCHA hinzufügen)
$text = $isCorrect ? 'OK' : 'NO';
$images[] = generateCaptchaImage($text);
}
return ['images' => $images, 'solution' => $solution];
}
// Endpunkt CAPTCHA-Generierung
if ($_SERVER['REQUEST_METHOD'] === 'GET' && $_SERVER['REQUEST_URI'] === '/captcha') {
$captchaId = uniqid('captcha_', true);
$gridCaptcha = generateGridCaptcha();
$_SESSION['captchas'][$captchaId] = [
'solution' => $gridCaptcha['solution'],
'timestamp' => time()
];
header('Content-Type: application/json');
echo json_encode([
'captchaId' => $captchaId,
'images' => $gridCaptcha['images']
]);
exit;
}
// Endpunkt CAPTCHA-Prüfung
if ($_SERVER['REQUEST_METHOD'] === 'POST' && $_SERVER['REQUEST_URI'] === '/captcha/verify') {
$data = json_decode(file_get_contents('php://input'), true);
$captchaId = $data['captchaId'] ?? '';
$answer = $data['answer'] ?? [];
if (!isset($_SESSION['captchas'][$captchaId])) {
echo json_encode(['success' => false, 'message' => 'Captcha expired or not found']);
exit;
}
$captcha = $_SESSION['captchas'][$captchaId];
// TTL prüfen
if (time() - $captcha['timestamp'] > CAPTCHA_TTL) {
unset($_SESSION['captchas'][$captchaId]);
echo json_encode(['success' => false, 'message' => 'Captcha expired']);
exit;
}
// Array true/false prüfen
$success = $captcha['solution'] === $answer;
// CAPTCHA nach Prüfung löschen
unset($_SESSION['captchas'][$captchaId]);
echo json_encode(['success' => $success]);
exit;
}
// 404
http_response_code(404);
echo 'Not found';
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.
Führen Sie Lasttests durch (z.B. mit k6 oder JMeter) — bei hoher Anfrageanzahl:
- Bilder müssen korrekt generiert werden;
- Server darf Antworten der Benutzer nicht vertauschen;
- Klickprüfung muss stabil bleiben.
Unterstützte Captchas
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.