これは TECHSCORE Advent Calendar 2018 の6日目の記事です。
こんにちは、吉田です。
2018/10/29にGoogleからreCAPTCHAの新バージョンreCAPTCHA v3が正式公開されました。
以前、Invisible reCAPTCHAをこのブログでご紹介したこともあり、今回もSynergy!のフォームにreCAPTCHA v3を適用してみました。
とうとう画像選択がなくなった!?
reCAPTCHA v3の特徴として、画像選択が完全に無くなりました。もう「店舗も道路標識も粗すぎて見えないっ!!!」となる画像を探さなくて良いのです。
では、どうやってbotによるアクセスか判断をするのかというと、閲覧者のページ内での行動をスコアとして算出しbotを判別します。reCAPTCHA v3を配置したページで閲覧者の動きを学習し、利用が増えるとともにスコアの精度は高まっていきます。
これまでの集大成感が溢れていますね。reCAPTCHAとbotとのいたちごっこもここまで来たか、という感想を持ちました。ちなみに「いたちごっこ」とは終わりのない手遊びが語源のようです。私もひとつ学習しました。
では、早速導入のステップを見てみましょう。
GoogleのサイトでreCAPTCHAを取得
reCAPTCHAのページから「reCAPTCHA v3」を適用するサイトを登録し、キーを取得します。この辺はこれまでのreCAPTCHAと変わりません。
設定が終わったら、サイトキー(Site Key) と シークレットキー(Secret Key)を取得し、ガイドを参考にさくさく実装します。
まずはクライアント側実装
クライアント側の実装をおこなう際の注意点として、以下の対応をどうするか決めておきましょう。
1.トークン取得タイミングとbot判定時の動作
2.通信エラーなどエラーの際のメッセージ
3.JavaScriptが利用できない際のメッセージ
2,3はInvisible reCAPTCHAでも同じ考慮が必要ですが、ガイドはあくまでサンプルですのでおさらいします。
1.トークン取得タイミングとbot判定時の動作
reCAPTCHA で閲覧者のチェックを実施するとトークンが発行されます。Invisible reCAPTCHA では送信ボタンと連動させるだけで自動的にトークンを取得して送信してくれましたが、reCAPTCHA v3ではトークンの取得から実装する必要があります。
このトークンは有効期間が2分程度のため、多くの場合トークン取得はフォームsubmitのタイミングになるでしょう。入力チェックが完了しサーバーに送信する直前が自然です。トークン取得は非同期で実行するため、送信ボタンが複数回押下されることも回避したほうが良いでしょう。
私のサンプル実装ではサーバ側でトークンをチェックするだけの実装ですが、reCAPTCHA v3では、スコアの値が返されることで様々な要件に利用できます。
返却されたスコアが閾値を満たさない場合、以下のように安全対策をおこなうことが考えられます。
・ログインフォームの場合、メールやSMSで2段階認証をおこなう
・問い合わせフォームの場合、問い合わせ内容にbotによる登録の可能性があることを追記する
・掲示板の場合、管理者が確認するまで掲示板に投稿内容を反映しない
2.通信エラーなどエラーの際のメッセージ
通信エラーや予期しないエラーが発生した際のメッセージを決めておきましょう。特にスマートフォンなどで移動中に通信が途切れた場合、トークンを取得することができないので、通知してあげましょう。Googleのガイドでは以下のようなクライアント側実装サンプルを提示しています。
|
1 2 3 4 5 6 7 8 |
<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script> <script> grecaptcha.ready(function() { grecaptcha.execute('reCAPTCHA_site_key', {action: 'homepage'}).then(function(token) { ... }); }); </script> |
もう少しだけ踏み込んでsubmit時に通信エラーやreCAPTHCA処理内のエラー処理を組み込むとこのようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script src="https://www.google.com/recaptcha/api.js?render=[reCAPTCHA_site_key]"></script> <script> function onSubmit(event){ var formElement = this; //ここに送信ボタンの二重押下制御処理を記載 grecaptcha.ready(function() { try{ grecaptcha.execute(SITE_KEY, {action: '[アクション名]'}) .then(function(token) { //トークン取得が成功した場合 //ここに、formのhiddenなどにtokenを格納する処理を記載 formElement.submit(); //実際にサーバーに送信 }, function(reason) { //トークン取得が失敗した場合（then関数のエラー処理、現状reasonは返されない） //ここにエラー処理を記載（メッセージを表示し送信ボタンの押下制御を戻す） }); }catch(e){ //ここにエラー処理を記載（メッセージを表示し送信ボタンの押下制御を戻す） } }); event.preventDefault(); } window.addEventListener('load', function() { //フォームのsubmitイベントにリスナーを追加 [フォーム].addEventListener('submit', onSubmit, false); }) </script> |
3.JavaScriptが利用できない際のメッセージ
reCAPTCHA v3 はJavaScriptを利用できない環境では動作できません。noscriptタグを利用してJavaScriptが無効な状態ではフォームを利用できないことを伝えた方が良いでしょう。入力項目や送信ボタンをあらかじめスタイルシートで非表示にしておき、JavaScriptで表示しても良いですね。
次はサーバー側実装
続いてサーバー側の実装ですが、トークンのチェック手順はInvisible reCAPTCHAと全く（チェック用URLまで）同じです。シークレットキーとトークンを送信するとトークンが正しいかチェックしjsonでレスポンスを返してくれます。
reCAPTCHA v3での違いは、レスポンスに"score"と"action"が追加された点です。この"score"には閲覧者のページでの行動により算出された0.0～1.0のスコアが返されます。Googleによると0.5がbotと人の閾値だそうです。
今回は、スコアによる利用可否の判定をおこなうのみですので、「スコアがXに満たない場合はエラーページを表示する」といった仕組みを実装します。はじめは0.0で良いでしょう。トークンチェックがNGであった場合や、スコアの値が一定値より低かった場合に、セッションエラーページを返すようにしました。
こんな感じで十分ですね。あとはセッションがある場合は破棄して、必要に応じてHTTPステータスコードを4XX系で返したりしてはいかがでしょうか。
さて、どんなスコアが返される？
これで一通り準備ができました。ページを開くとの右下にreCAPTCHAアイコンがスタンバイしています。
さて、イロイロ試してみましょう。
a.Googleにログインしない
b.プライベートブラウズ
c.複数のブラウザでトークンを入れ替え
d.Cookieをクリアして拒否
e.入力項目の値を開発者ツールで設定
おおっ、どれも画像選択が表示されないぞっ！さて、どのようなスコアが算出されるでしょうか。
・・・はい、すべて0.9でした。
実運用していないページのためかもしれませんが、私の力ではトークンチェックを通過しつつ0.9以外のスコアを出すことはできませんでした（cとか結構怪しいように思えるのですが）
そこで、周りの方にもチャレンジしてもらいイロイロと触っていただいた結果、0.1と0.7のスコアを出してくれました。確認すると、以下のように操作したことが分かりました。
0.1：アドオンでユーザーエージェントを変更した場合（実際はFirefoxなのにEdgeなど）
0.7：広告ブロック機能を持ったブラウザ
0.7は広告ブロックしているからではなく、ユーザーエージェントがレアだからかもしれないと考え、Firefoxにそのユーザーエージェントを設定してみましたが、スコアは0.1でした。
ユーザーエージェントの設定でスコアが変わることから、確認していて気付いたのですが、reCAPTCHA v3ではページ表示時にユーザーエージェントのチェックをおこなっていて、動作しないユーザーエージェントの場合、bodyの下部にエラーメッセージを表示してくれます。
上記メッセージは"if-js-enabled"というクラスが設定されたdivタグに記載されますが、今後変更される可能性があるため、スタイルを変更（センタリングなど）する際はbody自体に設定したほうが良いかもしれません。
（余談となりますが、現時点ではreCAPTCHA v3のjsで追加されるdiv内に「<noscript>JavaScript を有効にして reCAPTCHA による確認を行ってください。</noscript>」という表示されないnoscriptタグが記載されています。）
ユーザーエージェントをわざと古いものに設定し、上記メッセージが表示された場合は、JavaScriptが有効でもreCAPTCHA v3は動作しません（grecaptcha.executeのコールで例外が発生します）。
ちなみに前回も記載しましたが、Googleが表明しているreCAPTCHAの動作環境はこちらです。
reCAPTCHA管理画面での分析機能について
最後に、reCAPTCHA管理画面でトークンチェックの状況やスコアの分布がどのように表示されるかをご紹介します。
以下は日毎のトークンチェックの実施状況で、水色がトークンチェックを通過した件数、青がトークンチェックでNGとなった件数を表示しています。
こちらは（ほぼ0.9となってしまいましたが）算出されたスコアの分布です。0.1であってもトークンチェックがNGで返されるわけではないのでご注意ください。
アクション毎のTOP10の分布も表示されるそうですが、今回対応したページが1つのためか、表示されませんでした。管理するページが増えていけば、どのアクションのページがbotによる攻撃を受けていて、閾値による判定を設定すべきなのか、といった検討の助けとなるようです。ただし、設置したreCAPTCHAの利用が少なかったり数日reCAPTCHAが利用されないと、これらのグラフは表示されないのでご注意ください。
まとめ
reCAPTCHA v3の注意点
一般的に快適にフォーム登録していただくことを重視することが多いため、reCAPTCHA v3の利用は増えていくでしょう。reCAPTCHAに学習させる必要もあるため、複数ページに適用することが望ましく、展開も進むでしょう。
しかし、reCAPTCHA v3は、閲覧者に負担をかけずにbotからの攻撃をコントロールする、という使い方になるため、サイト運営者側で閾値の検討やbot判定した際の対応が求められる点に注意が必要です。
例えば、最初からスコア0.5未満は遮断する、といった運用でも良いと思います。その後botからのスパム登録攻撃を受けたものの、その時間に大量にアクセスされたスコアが0.5だった、といったケースがあるかもしれません。その際に、単純に一定期間閾値を上げるのか、別の手段を設けるのか、といった選択が必要となるかもしれません。
過去のreCAPTCHAサービスはどうなる？
reCAPTCHA v3が算出するスコアは、bot特有の連続操作や揺らぎのなさ、ユーザーエージェントやCookieの不整合などが関連していると考えられます。この辺りはbotの機能によってある程度、制御できる可能性があります。そうなると、ログインページなどには前回ご紹介したInvisible reCAPTCHAのほうが、botによる大量アクセスへの効果は高いと考えられます。Googleはv2系のreCAPTCHAサービスを順次停止していくのでしょうか。
安心してください。reCAPTCHAのFAQにその回答がありました。当面、v2系のreCAPTCHAとreCAPTCHA v3は並行してサポートしていくようです。現状は目的によって利用するreCAPTCHAが選択できる状況と考えて良いようです。
最後に
reCAPTCHA v3を利用すると、閲覧者は画像選択の煩わしさから解放されます。このメリットは大きく、reCAPTCHAの利用はさらに広がっていくでしょう。それとともに、テンプレートアクションが細かく整備されたり精度が高まったりといった機械学習のメリットを感じられることでしょう。
※本ブログでは説明のため、Google reCAPTCHAの画面キャプチャを引用しております。
Google and the Google logo are registered trademarks of Google LLC, used with permission.
