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.
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.
2. CAPTCHA an den Client senden
<!--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
4. Antwort an den Server senden:
5. Serverprüfung
<?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
Zusätzlich
Führen Sie Lasttests durch (z.B. mit k6 oder JMeter) — bei hoher Anfrageanzahl:
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.