ブラウザの違いが原因で発生したreCAPTCHA v3エラーについての備忘録

2024.02.15

こんにちは、Morimotoです。

みなさんは問い合わせフォームにreCAPTCHA v3を設定していますか?

Webサイトであれば主に問い合わせフォームに導入されることが多いreCAPTCHA v3ですが、
導入しておけばスパム攻撃を防ぐことができ、Webサイトの安全性を保つことができます。
実際にメールを受信するクライアント様にとってもスパムメールが送られてこないので嬉しいですね。

ハジメクリエイトでも制作した多くのサイトにreCAPTCHA v3を導入しています。

そんなreCAPTCHA v3ですが、最近制作したWebサイトで導入した際とある問題が起き、なかなか大変な目にあいました。

それは、「送信するブラウザによってreCAPTCHA v3エラーが発生するかどうかが異なり、同じ送信内容でも送信できるブラウザと送信できないブラウザがある」ことでした。

今回の記事では、その問題について備忘録として残しておきます。

今後エラーで困ったときのために、頭の片隅にでも残しておいてください。

発生した問題と解決方法

実際にどんなことが起きて、どうやって解決したのか簡単な経緯と解決策を先に書いておきます。

  • reCAPTCHA v3を導入した問い合わせフォームから送信テストをすると、送信できる場合と送信できない場合があった
  • ブラウザによって送信可否が変わることが分かり、何が原因なのか検証すると設定したスコア判定によってエラーが起きていた
  • どのブラウザでも送信できるように、スコア判定の値を変更して解決した

以上がエラー発生から解決までの経緯です。
文章にすると短いですが、実際には原因究明のため先輩プログラマの方に助けてもらい、ディレクターの方にも送信チェックを手伝ってもらったのでエラー解消まで結構な時間を要しました…。

しかし、協力していただいたおかげで無事解決することができたので良かったです。

エラーの原因とブラウザによるスコアの違いについて

まずスコアとは何かですが、reCAPTCHA v3が導入されているフォームからデータが送信されると送信内容などに基づきreCAPTCHA v3が0~1の値を返します。
その値がスコアとなるわけですが、0に近いほどbotと判定され、1に近いほど人間が送信していると判定されます。

エラーが発生したサイトで実装していたメール送信プログラムでは、入力されたデータの取得をした後、未入力チェックやreCAPTCHA v3のチェックなど色々なチェックを行い、何も問題なければメール送信する、という流れでメールの送信を行っていました。

その中のreCAPTCHA v3のチェックで、「スコアの値が0.5以下だったらエラーになる」という条件があったんですね。

botの場合はメール送信時のスコアが0.1ほどになることが多いので、今回のように送信チェックの条件に「スコアが0.5未満はエラー」としていた場合、0.1のスコアで送信されるbotのメールはエラーが起きて送信できない、ということになります。

reCAPTCHA v3のデフォルト設定について
reCAPTCHA v3のガイドページによると、reCAPTCHA v3のデフォルトのスコア判定のしきい値は0.5となっています。

「0.5を基準値にしておけば基本的にbotは弾けるだろう」という考えからエラー判定のスコア基準を0.5未満に設定していました。

では、なぜ人間が送信していた(スコアは0.5以上と考えられる)のにエラーが起きてしまっていたのか。

それは、「送信するブラウザによってreCAPTCHA v3のスコアが変わる」ことが原因でした。

送信プログラム内にあるスコア判定の条件を消して送信してみると送信できるようになったので、スコアが原因と考え、同じ入力内容で各ブラウザのスコアを検証したところ

  • GoogleChromeは0.9
  • Firefoxは0.299…
  • Edgeは0.299…

という結果となりました。

上記のスコアによる違いが原因で、「Chromeからは送信され、FirefoxやEdgeからは送信エラーになる」という今回の不具合が発生していたことが分かりました。

以上のことから、スコア判定の条件を「0.5未満」から「0.2未満」に変更して解決にいたりました。

ただ、スコアの条件を下げるとそれだけbotから送信される可能性が上がるということなので注意が必要です。

さいごに

以上がreCAPTCHA v3の送信エラーに関する原因と解決方法でした。

なぜブラウザによってスコア判定が変わるのかですが、はっきりとした要因は分かりません。

  • シークレットモードから送信
  • Cookieやキャッシュ
  • 広告ブロック機能
  • JavaScriptの設定
  • Googleアカウントでログインしているかどうか

など、様々なことが考えられるようです。

いつかブラウザ間でreCAPTCHA v3のスコアが統一されるといいな、と思います。

もし今後reCAPTCHA v3のエラーが起きた時は原因の1つとして思い出してみてください。

それでは!


🏢 株式会社ハジメクリエイトについて

この記事は、 株式会社ハジメクリエイト のエンジニアが執筆しました。


💻 Webシステム開発のプロフェッショナル

私たちは、ビジネスの成長をサポートするため、 PHPを用いたオーダーメイドのシステム開発 を提供しています。
お客様一人ひとりのニーズに応じたカスタムシステムを、 企画から開発・運用まで一貫してサポート
さらに、 React Nativeを活用したiOS/Android対応のアプリ開発 も得意としています。

単に「作る」だけでなく、
課題の本質に向き合い、最適な解決策を提案する のがハジメクリエイトのスタイルです。


🧑‍💻 一緒に働く仲間を探しています!

株式会社ハジメクリエイトでは、 自ら考え行動できるエンジニア を募集しています。
「私はこれがしたい!」という想いを持つあなた、一緒にモノづくりを楽しみませんか?

  • 技術で人の役に立ちたい
  • 意見が通る小さなチームで働きたい
  • フロントエンドもバックエンドも、いろいろ挑戦してみたい
  • お客さんと一緒にプロジェクトを育てたい

そんな気持ちがある方なら、きっと居心地のいい環境だと思います。
正社員はもちろん、パートタイムでの参加も歓迎中! 柔軟な関わり方で、あなたらしく働いてください。

👉 採用情報を見る
👉 お問い合わせはこちら


ちょっとでも「この会社、気になるな」と思ったら、ぜひお気軽にご連絡ください📩
最後まで読んでいただきありがとうございました!

  • Web技術

この記事を書いた人

Morimoto

Programmer Morimoto

Web制作をメインに、最近はWeb開発にも携わるようになってきました。新しく学んだことやつまづいたことなどを書いていきます。three.jsを使った3Dアニメーションにも興味があります。

Morimotoの書いた記事一覧へ

ハジメクリエイトでは一緒に働く仲間を募集しています!

関連記事