こんにちは、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つとして思い出してみてください。
それでは!