Comment contourner les CAPTCHA avec Cypress

Découvrez comment gérer les CAPTCHA dans Cypress, y compris les méthodes efficaces pour les contourner et ce qu’il faut faire lorsque les CAPTCHA persistent, afin de garantir une automatisation transparente du navigateur.
10 min de lecture
How to Bypass CAPTCHAs With Cypress blog image

Dans cet article, vous apprendrez :

  • Ce que sont les CAPTCHA et s’ils peuvent être contournés
  • La relation entre Cypress et les CAPTCHA
  • Comment implémenter la logique de contournement des CAPTCHA de Cypress
  • Que faire si le CAPTCHA s’affiche toujours

C’est parti !

Qu’est-ce qu’un CAPTCHA et est-il possible de l’automatiser ?

Un CAPTCHA, qui signifie « test de Turing public complètement automatisé pour distinguer les ordinateurs des humains », est une méthode utilisée pour différencier les utilisateurs réels des robots automatisés. Il s’agit d’un défi conçu pour être simple à résoudre pour les humains, mais difficile pour les machines. En général, les CAPTCHAs sont utilisés dans des parties spécifiques d’une page web pour éloigner les robots.

Google reCAPTCHA, hCaptcha et BotDetect sont les fournisseurs de CAPTCHA les plus populaires. Ils prennent en charge un ou plusieurs des défis suivants :

  • CAPTCHAs textuels: les utilisateurs doivent saisir une séquence de lettres et/ou de chiffres déformés.
  • CAPTCHA basés sur des images: les utilisateurs doivent identifier des objets spécifiques dans une grille d’images.
  • CAPTCHAs audio: les utilisateurs doivent saisir les mots qu’ils entendent.
  • CAPTCHAs sous forme de puzzle: les utilisateurs doivent répondre à une question simple ou résoudre un mini-jeu simple, par exemple en cliquant sur la bonne entité.
Puzzle CAPTCHA example

Les CAPTCHA peuvent être intégrés à des flux utilisateur spécifiques afin d’empêcher les robots de les remplir, par exemple lors de la soumission d’un formulaire :

captcha as a step of a form submission process example

Dans ces cas, le CAPTCHA est toujours affiché et ne peut pas être facilement contourné par une logique automatisée. Vous pouvez intégrer votre logiciel à des bibliothèques de Résolution de CAPTCHA ou utiliser des services qui s’appuient sur des opérateurs humains pour résoudre ces défis en temps réel. Cependant, les CAPTCHAs codés en dur sont rares car ils sont ennuyeux et dégradent l’expérience utilisateur.

Plus couramment, les CAPTCHA font partie de solutions anti-bots plus avancées, telles que les WAF (Web Application Firewalls) :

Example-of-a-Web-Application-Firewall

Ces solutions affichent dynamiquement un CAPTCHA lorsqu’elles soupçonnent que l’utilisateur actuel est un bot. Dans ce cas, les CAPTCHA peuvent être évités en faisant en sorte que votre bot se comporte comme un humain et utilise un navigateur réel. Néanmoins, il s’agit d’une bataille permanente qui nécessite de mettre à jour en permanence votre script automatisé pour faire face à des mesures de détection des bots en constante évolution.

Une solution plus efficace pour contourner les CAPTCHA consiste à utiliser un outil basé sur l’émulation utilisateur qui est toujours à jour, tel que le CAPTCHA Solver de Bright Data.

CAPTCHAs et Cypress : une mauvaise relation

Cypress est un outil de test front-end conçu pour le Web moderne. Bien qu’il puisse être utilisé pour des tâches générales d’automatisation des navigateurs, telles que le Scraping web, son objectif principal est le test de bout en bout(E2E). Cela signifie qu’il est conçu pour interagir principalement avec les sites et les pages web que vous contrôlez.

Utilisez Cypress pour cibler des sites externes ou tiers et des problèmes commencent à surgir. Comme le souligne la documentation officielle, la meilleure pratique consiste à éviter autant que possible d’interagir avec des sites tiers. L’une des principales raisons mises en avant dans la documentation est précisément le risque d’être détecté comme un bot et d’obtenir un CAPTCHA.

Pourquoi est-ce un problème ? Eh bien, parce que les CAPTCHA sont conçus pour bloquer les scripts automatisés. Ils peuvent donc entraver le fonctionnement de l’automatisation du navigateur Cypress. Dans le même temps, il est important de noter que contourner les CAPTCHA dans Cypress est délicat, mais possible. Pour en savoir plus, consultez les sections suivantes !

Comment gérer les CAPTCHA dans Cypress

Comme vous venez de l’apprendre, les CAPTCHA constituent l’un des principaux défis de Cypress, comme le reconnaît l’outil lui-même dans sa documentation. Cependant, il n’est pas encore temps de baisser les bras. Explorons quelques approches possibles pour mettre en œuvre la logique de contournement des CAPTCHA dans Cypress !

Approche n° 1 : désactiver les CAPTCHAs

Les fournisseurs de CAPTCHA proposent généralement un moyen de désactiver ou d’ignorer les défis dans un environnement de test. Si vous contrôlez le site sur lequel vous devez effectuer l’automatisation, vous devez alors désactiver complètement le mécanisme CAPTCHA ou le remplacer par une version plus simple.

Par exemple, avec reCAPTCHA v3, vous pouvez créer une clé distincte pour les environnements de test. Pour reCAPTCHA v2, vous pouvez utiliser les clés de test suivantes :

  • Clé du site : 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
  • Clé secrète : 6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe

Lorsque vous utilisez ces clés, vous obtiendrez toujours un widget reCAPTCHA « No CAPTCHA » comme ci-dessous :

Un message d’avertissement spécial s’affichera pour garantir qu’il n’est pas utilisé en production. Automatisez le clic sur cette case et la vérification anti-bot sera toujours réussie. Pour en savoir plus, consultez la documentation reCAPTCHA.

Notez que d’autres fournisseurs de CAPTCHA proposent des mécanismes similaires.

Approche n° 2 : automatiser l’interaction CAPTCHA

Certains CAPTCHA ne nécessitent que des actions simples, comme cocher une case, comme dans le widget reCAPTCHA « No CAPTCHA » :

Simple clicking CAPTCHA example

Ces défis peuvent sembler simples, mais ils peuvent en réalité être sophistiqués, analysant les mouvements de votre souris pour déterminer si vous êtes un humain. Cependant, tous les CAPTCHA ne sont pas aussi complexes. Certains sont conçus pour bloquer les bots basiques et sont plus faciles à contourner. Dans ce cas, vous pouvez essayer de les automatiser à l’aide d’une logique Cypress.

Si vous inspectez l’élément CAPTCHA de l’exemple ci-dessus, vous verrez qu’il s’agit d’un iframe :

Inspecting the CAPTCHA element

Il s’agit d’un comportement courant chez la plupart des fournisseurs de CAPTCHA.

Gardez à l’esprit que Cypress ne peut pas traiter automatiquement les iframes interdomaines. Pour contourner cette limitation, définissez la propriété chromeWebSecurity sur false dans le fichier cypress.json:

{

"chromeWebSecurity": false

}

Vous pouvez ensuite sélectionner l’élément de case à cocher CAPTCHA et cliquer dessus. Dans le cas d’un widget reCAPTCHA « No CAPTCHA », le code d’automatisation pour effectuer cette opération sera le suivant :

cy.get('iframe[src*=recaptcha]')

.its('0.contentDocument')

.should(d => d.getElementById('recaptcha-token').click())

N’oubliez pas qu’il s’agit seulement d’une solution de contournement qui ne fonctionnera pas dans la plupart des cas. Les CAPTCHA sont désormais suffisamment sophistiqués pour distinguer les clics d’un robot de ceux d’un humain. En fin de compte, c’est exactement le but d’un CAPTCHA.

L’automatisation des CAPTCHA est un jeu du chat et de la souris, et ce qui fonctionne aujourd’hui ne fonctionnera peut-être plus demain. Pour connaître les approches les plus récentes, consultez le GitHub gist d’où provient cette approche.

Approche n° 3 : intégrer un navigateur antibot

Les deux approches précédentes de contournement des CAPTCHA Cypress nécessitent trop d’hypothèses pour être utilisées contre une cible réelle. Une solution plus efficace consiste à configurer Cypress pour contrôler un navigateur anti-détection. Si vous ne connaissez pas cet outil, un navigateur anti-détection est un navigateur spécialisé conçu pour empêcher les sites web de détecter les comportements automatisés.

Par défaut, Cypress donne accès à l’un des navigateurs installés localement dans la liste suivante:

  • Chrome
  • Chrome Beta
  • Chrome Canary
  • Chromium
  • Edge
  • Edge bêta
  • Edge Canary
  • Edge Dev
  • Electron
  • Firefox
  • Firefox Developer Edition
  • Firefox Nightly
  • WebKit (expérimental)

En plus de ceux-ci, il prend en charge tous les navigateurs basés sur Chromium. Choisissez donc un navigateur basé sur Chromium parmi la liste des meilleurs navigateurs anti-détection du marché, achetez-le, téléchargez-le et installez-le sur votre ordinateur.

Vous pouvez ensuite demander à Cypress de lancer un script avec le navigateur spécifié comme ci-dessous :

cypress open --browser <chemin_vers_votre_navigateur>

<chemin_vers_votre_navigateur> est le chemin absolu vers le dossier contenant le fichier binaire de votre navigateur anti-détection.

De même, vous pouvez configurer l’interface utilisateur de Cypress pour afficher votre navigateur anti-détection comme une option sélectionnable en ajoutant le code suivant dans cypress.config.js:

import { defineConfig } from 'cypress'

export default defineConfig({

e2e: {

setupNodeEvents(on, config) {

const antidetectBrowser = {

name: '<ANTIDETECT_BROWSER_NAME>',

channel: 'stable',

family: 'chromium',

displayName: '<ANTIDETECT_BROWSER_DISPLAY_NAME>',

version,

path: '<path_to_your_browser>',

majorVersion,

}

return {

browsers: config.browsers.concat(antidetectBrowser),

}

},

},

})

Notez que demander à Cypress d’exécuter votre code automatisé dans un navigateur anti-détection ne fera que réduire le risque d’être détecté comme un bot. Si les systèmes anti-bot comprennent que vous exécutez un code automatisé, ils peuvent toujours appliquer certains CAPTCHA pour vous arrêter.

Les solutions de contournement des CAPTCHA de Cypress présentées ci-dessus ne fonctionnent pas : que faire maintenant ?

Les trois méthodes présentées ci-dessus présentent des inconvénients majeurs :

  • Approche n° 1: elle nécessite que vous ayez accès au code du site cible, ce qui n’est pas le cas lorsqu’il s’agit de sites en ligne externes.
  • Approche n° 2: elle ne fonctionne que contre des CAPTCHAs très simples et n’est pas une technique fiable.
  • Approche n° 3: elle nécessite l’achat d’un service externe, vous devrez peut-être dépenser de l’argent supplémentaire pour l’intégration d’un Proxy, et elle permet uniquement d’éviter les CAPTCHA, sans les résoudre.

Bien qu’elles valent toutes la peine d’être essayées, aucune d’entre elles ne vous permet de contourner les CAPTCHA par programmation dans votre automatisation Cypress.

Vous recherchez un véritable contourneur de CAPTCHA Cypress ? Essayez les solutions de Scraping web de Bright Data !

Celles-ci offrent des capacités de déverrouillage supérieures grâce à une fonctionnalité dédiée à la Résolution de CAPTCHA qui gère automatiquement reCAPTCHA, hCaptcha, px_captcha, SimpleCaptcha, GeeTest CAPTCHA, FunCaptcha, Cloudflare Turnstile, AWS WAF Captcha, KeyCAPTCHA et bien d’autres.

L’intégration du CAPTCHA Solver de Bright Data à votre script est simple, car il fonctionne avec n’importe quel client HTTP ou outil d’automatisation de navigateur, y compris Cypress.

Découvrez comment utiliser le Web Unlocker de Bright Data. Consultez également la documentation pour obtenir tous les détails relatifs à l’intégration et à la configuration.

Conclusion

Dans cet article, vous avez découvert les CAPTCHA et pourquoi ils constituent un défi de taille pour Cypress. Vous avez également exploré trois méthodes différentes pour les contourner, mais chacune de ces approches présente de sérieuses limites.

Quelle que soit la sophistication de votre logique de contournement des CAPTCHA avec Cypress, les systèmes sophistiqués de détection des bots peuvent toujours identifier votre script comme étant automatisé. La meilleure solution consiste à vous connecter à votre site cible via une API de déverrouillage capable de renvoyer le code HTML sans CAPTCHA de n’importe quelle page web.

Une telle API existe et s’appelle Web Unlocker. Elle fait automatiquement tourner l’IP de sortie à chaque requête via l’intégration d’un Proxy, gère les empreintes digitales du navigateur, effectue des réessais automatiques et résout les CAPTCHA pour vous. Les mesures anti-bots ne sont plus un casse-tête !

Inscrivez-vous dès maintenant et découvrez quels produits Bright Data répondent le mieux à vos besoins. Commencez dès aujourd’hui avec un essai gratuit.