API CapMonster Cloud
Extension pour navigateurs
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 Cloudflare Turnstile, 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 Cloudflare Turnstile 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.
Lors des tests de formulaires contenant Cloudflare Turnstile, il est souvent nécessaire de vérifier que la captcha fonctionne et qu’elle est correctement intégrée.
Vous pouvez contrôler manuellement la captcha intégrée à votre site.
Pour une résolution automatique, utilisez des outils comme CapMonster Cloud qui reçoivent les paramètres de la captcha, les traitent sur leurs serveurs et renvoient un jeton prêt à l’emploi. Insérez ce jeton dans le formulaire pour passer la vérification sans interaction utilisateur.
Travailler avec CapMonster Cloud via l’API comprend généralement les étapes suivantes :
Création de la tâche
Envoyer une requête APILa requête pour résoudre Cloudflare Turnstile doit spécifier les paramètres suivants :
type - TurnstileTask;
websiteURL - adresse de la page où le CAPTCHA est résolu;
websiteKey - clé Turnstile.
https://api.capmonster.cloud/createTask{
"clientKey": "API_KEY",
"task": {
"type": "TurnstileTask",
"websiteURL": "http://tsmanaged.zlsupport.com",
"websiteKey": "0x4AAAAAAABUYP0XeMJF0xoy"
}
}{
"errorId":0,
"taskId":407533072
}
Réception du résultathttps://api.capmonster.cloud/getTaskResult{
"clientKey":"API_KEY",
"taskId": 407533072
}{
"errorId": 0,
"status": "ready",
"solution": {
"userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36",
"token": "0.iGX3xsyFCkbGePM3jP4P4khLo6TrLukt8ZzBvwuQOvbC...f61f3082"
}
}
Insertion du jeton sur la page// npm install playwright @zennolab_com/capmonstercloud-client
import { chromium } from "playwright";
import { CapMonsterCloudClientFactory, ClientOptions, TurnstileRequest } from "@zennolab_com/capmonstercloud-client";
async function main() {
// 1. Résolution de Turnstile via CapMonster Cloud
const cmcClient = CapMonsterCloudClientFactory.Create(
new ClientOptions({ clientKey: 'YOUR_CAPMONSTER_API_KEY' })
);
const turnstileRequest = new TurnstileRequest({
websiteURL: 'http://tsmanaged.zlsupport.com',
websiteKey: '0x4AAAAAAABUYP0XeMJF0xoy',
});
const result = await cmcClient.Solve(turnstileRequest);
const token = result.solution.token;
console.log('Token Turnstile reçu :', token);
// 2. Démarrage de Playwright
const browser = await chromium.launch({ headless: false });
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('http://tsmanaged.zlsupport.com');
// 3. Remplissage du login et du mot de passe
await page.fill('#username', 'your_username');
await page.fill('#password', 'your_password');
// 4. Attente de l'apparition du champ de token caché
await page.waitForSelector('#token', { state: 'attached', timeout: 60000 });
// 5. Insertion du token et rendre le champ visible
await page.evaluate((t) => {
const tokenInput = document.querySelector('#token');
if (tokenInput) {
tokenInput.type = 'text'; // rendre le champ visible
tokenInput.value = t; // insérer le token
console.log('Token inséré dans le champ token');
} else {
console.error('Champ #token non trouvé');
}
}, token);
// 6. Vérifier que le token a bien été inséré
const checkValue = await page.$eval('#token', el => el.value);
console.log('Vérification de la valeur du token :', checkValue);
// 7. Soumettre le formulaire
await page.click('button[type="submit"]');
console.log('Formulaire soumis avec le token Turnstile');
// await browser.close();
}
main().catch(err => console.error(err));1. Accédez à la page Cloudflare Turnstile, cliquez sur Commencer maintenant.
2. Inscrivez-vous au service.
3. Dans Turnstile Widgets, cliquez sur le bouton bleu Add Widget.
4. Configurez Cloudflare Turnstile, spécifiez :
5. Après avoir créé le widget, vous recevrez deux clés : Site Key et Secret Key.
6. Connecter la partie cliente
1) Connecter le script Turnstile
Rendu automatique (le widget est créé automatiquement lors du chargement de la page) :
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>Contrôle programmatique (vous créez vous-même le widget via JavaScript) :
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" defer></script>Important : le script doit être chargé à partir de l'URL exacte. Le proxy ou le cache peuvent causer des échecs.
2) Créer un conteneur pour le widget
Automatique :
<div class="cf-turnstile" data-sitekey="<YOUR_SITEKEY>"></div>Par programmation :
<div id="turnstile-container"></div>3) Configuration du widget
Via les attributs data :
<div class="cf-turnstile"
data-sitekey="<YOUR_SITEKEY>"
data-theme="light"
data-size="normal"
data-callback="onSuccess">
</div>Via JavaScript :
const widgetId = turnstile.render("#turnstile-container", {
sitekey: "<YOUR_SITEKEY>",
theme: "light",
size: "normal",
callback: token => console.log("Token:", token)
});4) Travail avec les tokens
const token = turnstile.getResponse(widgetId); // obtenir le token
const isExpired = turnstile.isExpired(widgetId); // vérifier l'expiration
turnstile.reset(widgetId); // réinitialiser
turnstile.remove(widgetId); // supprimer
turnstile.execute("#turnstile-container"); // exécution manuelle
5) Intégration avec le formulaire
<form id="my-form" method="POST">
<input type="hidden" name="cf-turnstile-response" id="cf-turnstile-response">
<button type="submit">Soumettre</button>
</form>
<script>
function onSuccess(token) {
document.getElementById("cf-turnstile-response").value = token;
}
</script>
Exemple de code<title>Turnstile Example</title>
<!-- Connecter le script Turnstile -->
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
</head>
<body>
<h1>Exemple de formulaire avec Turnstile</h1>
<form id="my-form">
<label for="username">Nom :</label>
<input type="text" name="username" id="username" required>
<!-- Conteneur pour Turnstile -->
<div class="cf-turnstile" data-sitekey="<YOUR_SITEKEY>" data-callback="onTurnstileSuccess"></div>
<button type="submit">Soumettre</button>
</form>
<script>
// Callback appelé après avoir passé le CAPTCHA
function onTurnstileSuccess(token) {
console.log("Token Turnstile reçu :", token);
// Enregistrer le token dans un champ de formulaire caché (optionnel)
document.getElementById("cf-turnstile-token")?.remove();
const input = document.createElement("input");
input.type = "hidden";
input.name = "cf-turnstile-response";
input.id = "cf-turnstile-token";
input.value = token;
document.getElementById("my-form").appendChild(input);
}
// Soumission du formulaire
document.getElementById("my-form").addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const response = await fetch("/submit-form", {
method: "POST",
body: formData
});
const result = await response.json();
if(result.success){
alert("Formulaire soumis avec succès et token vérifié !");
} else {
alert("Erreur de vérification du token Turnstile. Veuillez réessayer.");
// Réinitialiser le widget pour que l'utilisateur puisse compléter le CAPTCHA à nouveau
turnstile.reset();
}
});
</script>
</body>
</html>
6) Configurer la partie serveur
Processus de vérification côté serveur :
API Siteverify :
https://challenges.cloudflare.com/turnstile/v0/siteverifyParamètres de la requête :
Propriétés du token :
Exemple de vérification en PHP<?php
function validateTurnstile($token, $secret, $remoteip = null) {
$url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';
$data = ['secret' => $secret, 'response' => $token];
if ($remoteip) $data['remoteip'] = $remoteip;
$options = [
'http' => [
'header' => "Content-type: application/x-www-form-urlencoded
",
'method' => 'POST',
'content' => http_build_query($data)
]
];
$response = file_get_contents($url, false, stream_context_create($options));
if ($response === FALSE) {
return ['success' => false, 'error-codes' => ['internal-error']];
}
return json_decode($response, true);
}
// Utilisation
$secret_key = 'YOUR_SECRET_KEY';
$token = $_POST['cf-turnstile-response'] ?? '';
$remoteip = $_SERVER['REMOTE_ADDR'];
$result = validateTurnstile($token, $secret_key, $remoteip);
if($result['success']){
echo "Formulaire soumis avec succès !";
} else {
echo "Erreur de vérification : " . implode(', ', $result['error-codes']);
}
?>
Si vous avez récupéré un site avec un captcha ou un autre système de protection déjà installé, mais sans accès au code, pas de panique ! Il est assez simple d’identifier quelle technologie est utilisée. Pour vérifier que tout fonctionne correctement, vous pouvez utiliser le service de reconnaissance CapMonster Cloud dans un environnement de test isolé, afin de vous assurer que le mécanisme de traitement des jetons et la logique de vérification fonctionnent correctement.
Dans le cas de Cloudflare Turnstile, il suffit d’identifier le système, d’étudier son comportement et de vérifier que la protection fonctionne correctement. Dans cet article, nous avons montré comment reconnaître Cloudflare Turnstile et où trouver les instructions pour son intégration ou sa reconfiguration, afin de maintenir la protection en toute confiance et de garder son fonctionnement sous contrôle.
Documentation Cloudflare Turnstile →S'inscrire sur Cloudflare →S'inscrire sur CapMonster Cloud →Documentation CapMonster Cloud (travail avec Cloudflare Turnstile) →Qu'est-ce que le CAPTCHA Cloudflare et comment le résoudre avec CapMonster Cloud →Comment Cloudflare détecte le trafic automatisé : protection des sites web contre les bots →