CypressでCAPTCHAを回避する方法

CypressにおけるCAPTCHAの処理方法(効果的な回避手法やCAPTCHAが継続する場合の対応策を含む)を学び、シームレスなブラウザ自動化を実現しましょう。
2 分読
How to Bypass CAPTCHAs With Cypress blog image

この記事では次のことを学びます:

  • CAPTCHAとは何か、そして回避可能か否か
  • CypressとCAPTCHAの関係性
  • CypressによるCAPTCHA回避ロジックの実装方法
  • CAPTCHAが依然として表示される場合の対処法

さっそく見ていきましょう!

CAPTCHAとは何か?自動化は可能か?

CAPTCHA(完全自動化公開チューリングテスト:コンピュータと人間を区別するため)とは、実際のユーザーと自動化されたボットを区別するために使用される手法です。人間には簡単に解けるが、機械には難しいように設計された課題です。通常、CAPTCHAはボットを排除するためにウェブページの特定部分で使用されます。

Google reCAPTCHA、hCaptcha、BotDetectが最も一般的なCAPTCHAプロバイダーです。これらは以下の課題の1つ以上をサポートしています:

  • テキストベースのCAPTCHA:歪んだ文字や数字の列を入力する必要があります。
  • 画像ベースのCAPTCHA:画像グリッド内の特定オブジェクトを識別する必要があります。
  • 音声ベースのCAPTCHA:ユーザーは聞いた単語を入力するよう求められます。
  • パズル型CAPTCHA:簡単な質問に答える、または正しい対象をクリックするなどの簡易ミニゲームを解く必要があります。
Puzzle CAPTCHA example

CAPTCHAは特定のユーザーフロー(例:フォーム送信時)に組み込み、ボットによる突破を防止できます:

captcha as a step of a form submission process example

これらのケースでは、CAPTCHAは常に表示され、自動化されたロジックによる回避は容易ではありません。ソフトウェアをCAPTCHAの解決ライブラリと統合したり、人間のオペレーターがリアルタイムで課題を解決するサービスを利用したりできます。ただし、ハードコードされたCAPTCHAは煩わしくユーザー体験を損なうため、一般的ではありません。

より一般的なのは、WAF(Webアプリケーションファイアウォール)などの高度なボット対策ソリューションの一部としてCAPTCHAを活用する方法です:

Example-of-a-Web-Application-Firewall

これらのソリューションは、現在のユーザーがボットであると疑われる場合に動的にCAPTCHAを表示します。このような場合、ボットを人間のように振る舞わせ、実際のブラウザを利用することでCAPTCHAを回避できます。とはいえ、これは常に進化するボット検知対策に対処するため、自動化スクリプトを継続的に更新する必要がある、終わりのない戦いでもあります。

CAPTCHA回避のより効果的な解決策は、BrightDataのCAPTCHA Solverのように常に最新の状態を保つユーザーエミュレーションベースのツールを使用することです。

CAPTCHAとCypress:相性の悪い関係

Cypressは現代のWeb向けに構築されたフロントエンドテストツールです。ウェブスクレイピングなどの一般的なブラウザ自動化タスクにも使用できますが、その主な焦点はエンドツーエンド(E2E) テストにあります。つまり、主に制御可能なサイトやウェブページとの対話を想定して設計されています。

Cypressで外部サイトやサードパーティサイトをターゲットにすると問題が発生します。公式ドキュメントでも強調されている通り、ベストプラクティスはサードパーティサイトとのやり取りを可能な限り避けることです。ドキュメントで特に指摘されている主な理由の一つは、ボットとして検知されCAPTCHAを要求されるリスクです。

なぜこれが問題なのか? それはCAPTCHAが自動化されたスクリプトを阻止するよう設計されているためです。したがって、Cypressのブラウザ自動化操作を妨げる可能性があります。同時に、CypressでCAPTCHAを回避することは難しいが不可能ではない点に留意することが重要です。詳細は次のセクションで説明します!

CypressにおけるCAPTCHAの対処法

先ほど学んだ通り、CAPTCHAはCypressの主要な課題の一つであり、ツール自体のドキュメントでも認識されています。しかし、まだ白旗を掲げる時ではありません。CypressのCAPTCHA回避ロジックを実装するための潜在的なアプローチを探ってみましょう!

アプローチ #1: CAPTCHAを無効化する

CAPTCHAプロバイダーは通常、テスト環境でのチャレンジ無効化またはスキップ機能を提供しています。自動化を実行するサイトを制御できる場合は、CAPTCHAメカニズムを完全に無効化するか、より簡易なバージョンに置き換えるべきです。

例えば、reCAPTCHA v3ではテスト環境専用のキーを作成できます。reCAPTCHA v2では以下のテストキーを使用可能です:

  • サイトキー:6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
  • シークレットキー:6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe

これらのキーを使用すると、常に以下のような reCAPTCHA の「No CAPTCHA」ウィジェットが表示されます:

これにより、本番環境で使用されないよう特別な警告メッセージが表示されます。このチェックボックスのクリックを自動化すれば、ボット対策検証は常に通過します。詳細はreCAPTCHAのドキュメントをご確認ください。

他のCAPTCHAプロバイダーも同様の仕組みを提供していることに注意してください。

アプローチ #2: CAPTCHA操作の自動化

一部のCAPTCHAは、reCAPTCHAの「No CAPTCHA」ウィジェットのように、チェックボックスをクリックするといった単純な操作のみを要求します:

Simple clicking CAPTCHA example

こうした課題は単純に見えますが、実際には洗練されており、マウス操作を分析して人間かどうかを判断します。とはいえ、すべてのCAPTCHAがこれほど複雑なわけではありません。基本的なボットを阻止するために設計され、回避が容易なものもあります。そのような場合、Cypressロジックを使用して自動化を試みることができます。

上記の例からCAPTCHA要素を検査すると、それがiframeであることがわかります:

Inspecting the CAPTCHA element

これはほとんどのCAPTCHAプロバイダーに共通する動作です。

Cypressはクロスドメインiframeを自動処理できない点に注意してください。この制限を回避するには、cypress.jsonファイル chromeWebSecurityプロパティをfalseに設定します

{

"chromeWebSecurity": false

}

これでCAPTCHAチェックボックス要素を選択してクリックできます。reCAPTCHAの「No CAPTCHA」ウィジェットの場合、その自動化コードは次のようになります:

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

.its('0.contentDocument')

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

これは単なる回避策であり、ほとんどの状況では機能しないことに留意してください。CAPTCHAはロボットと人間のクリックを区別できるほど高度化しています。結局のところ、それがCAPTCHAの本質なのです。

CAPTCHAの自動化は猫とネズミの駆け引きであり、今日有効な手法が明日も通用するとは限りません。最新のアプローチについては、本手法の出典元であるGitHub gistを参照してください。

アプローチ #3: アンチボットブラウザの統合

前述の2つのCypressによるCAPTCHA回避手法は、実際のターゲットに対して使用するには前提条件が多すぎます。より効果的な解決策は、Cypressをアンチデテクトブラウザを制御するように設定することです。このツールに不慣れな方のために説明すると、アンチデテクトブラウザとは、ウェブサイトが自動化された動作を検知するのを防ぐように設計された特殊なブラウザです。

デフォルトでは、Cypressは以下のリストからローカルにインストールされたブラウザのいずれかにアクセスします:

  • Chrome
  • Chrome Beta
  • Chrome Canary
  • Chromium
  • Edge
  • Edge Beta
  • Edge Canary
  • Edge Dev
  • Electron
  • Firefox
  • Firefox Developer Edition
  • Firefox Nightly
  • WebKit(実験的)

これらに加えて、Chromiumベースのブラウザもサポートしています。したがって、市場で最高のアンチ検出ブラウザのリストからChromiumベースのブラウザを選択し、購入、ダウンロード、そしてお使いのマシンにインストールしてください。

その後、Cypressに指定したブラウザでスクリプトを起動するよう指示できます。例:

cypress open --browser <ブラウザのパス>

ここで<path_to_your_browser>は、アンチ検出ブラウザのバイナリを含むフォルダの絶対パスです。

同様に、cypress.config.jsに以下のコードを追加することで、Cypress UIにアンチディテクトブラウザを選択可能なオプションとして表示させる設定が可能です:

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),

}

},

},

})

Cypressに自動化コードをアンチ検出ブラウザで実行させることは、ボットとして検出される可能性を低減するだけです。アンチボットシステムが自動化コードの実行を認識した場合、CAPTCHAを強制してアクセスを阻止する可能性があります。

上記のCypress CAPTCHA回避策が機能しない場合:どうすればよいか?

上記の3つの方法にはいずれも重大な欠点があります:

  • 手法 #1: 対象サイトのコードへのアクセスが必要であり、外部オンラインサイトでは不可能です。
  • 方法 #2:非常に単純なCAPTCHAにしか効果がなく、信頼性の高い手法とは言えません。
  • 方法 #3:外部サービスの購入が必要で、プロキシ統合に追加費用がかかる可能性があり、CAPTCHA回避のみを支援するもので解決策にはなりません。

いずれも試す価値はありますが、Cypress自動化においてプログラム的にCAPTCHAをバイパスすることはできません。

真のCypress CAPTCHA回避ツールをお探しですか?Bright Dataのウェブスクレイピングソリューションをお試しください!

専用のCAPTCHAの解決機能により、reCAPTCHA、hCaptcha、px_captcha、SimpleCaptcha、GeeTest CAPTCHA、FunCaptcha、Cloudflare Turnstile、AWS WAF Captcha、KeyCAPTCHAなど、数多くのCAPTCHAを自動処理する優れた解除能力を提供します。

Bright DataのCAPTCHAソルバーは、Cypressを含むあらゆるHTTPクライアントやブラウザ自動化ツールと連携するため、スクリプトへの統合は簡単です。

Bright DataのWeb Unlockerの使用方法の詳細はこちらをご覧ください。また、すべての統合および設定の詳細については、ドキュメントをご確認ください。

結論

本記事では、CAPTCHAの仕組みと、それがCypressにとって大きな課題となる理由について学びました。また、3つの異なる回避方法も探りましたが、いずれのアプローチにも重大な制限があります。

CypressのCAPTCHA回避ロジックがどれほど高度であっても、洗練されたボット検知システムはスクリプトを自動化と識別する可能性があります。最善策は、あらゆるウェブページのCAPTCHAフリーHTMLを返すアンロックAPIを介してターゲットサイトに接続することです。

そのようなAPIが実際に存在し、Web Unlockerと呼ばれています。これはプロキシ統合によりリクエストごとに出口IPを自動ローテーションし、ブラウザフィンガープリンティングを処理し、自動リトライを実行し、CAPTCHAを解決します。ボット対策はもはや頭痛の種ではありません!

今すぐ登録し、Bright Dataの製品群から最適なソリューションを見つけてください。無料トライアルを本日開始しましょう。