reCAPTCHA 入門
https://gyazo.com/91e7b43cbf7b19da01982dfce2a700fa reCAPTCHAとは CAPTCHA(Completely Automated Public Turing test to tell Computers and Humans Apart) = botと人間を区別するための試験
reCAPTCHA ＝ google が無料で提供している botと人間を区別するためのサービス
https://i1.wp.com/justsv.com/wp/wp-content/uploads/2020/10/captcha-text-test.png?w=334&ssl=1
メリット：スパム対策
インターネットのトラフィックのうち、Botによるものが約40％に達する。さらにその半分以上は悪意のあるものとのデータも。 出典 https://www.hitachi-solutions.co.jp/perimeterx/lp/img/px_pic_01.jpg
デメリット：UXが低下する
ただし、v3ではユーザ影響なし
v1：2018年3月に提供終了
botの性能が上がって文字を認識されるようになったため
https://i1.wp.com/justsv.com/wp/wp-content/uploads/2020/10/captcha-text-test.png?w=334&ssl=1
v2
invisible
案件ではこちらを導入
https://s3-ap-southeast-1.amazonaws.com/calvinmy-content/image9.png
checkbox
チェックボックスに近づくときのユーザーのカーソルの動きが考慮される
ユーザーデバイスのブラウザに保存されたCookieとデバイスの履歴を評価することもある
怪しいと判定された場合は、invisibleの画像認証が出る
https://www.webdesignleaves.com/pr/images/Plugins/recaptcha/recaptcha_01.png
v3：ユーザアクション不要。AIによる行動データ分析。
ユーザーの挙動とインターネット上のコンテンツの操作履歴を総合的に確認する
reCAPTCHAは0~1（0がbot, 1が人）のスコアを返すので、それをもとに動作を実装する
実装
version/ドメイン/認証強度等の設定
サイトキーとシークレットキーの取得
v2 invisible
code: v2Invisible.html
<head>
<script>
var onV2InvisibleSuccess = function(token) {}
var onV2InvisibleError = function() {}
var onV2InvisibleExpired = function() {}
</script>
</head>
<body>
<h1>v2_invisible</h1>
<button
class="g-recaptcha"
data-sitekey="サイトキー"
data-callback="onV2InvisibleSuccess"
data-error-callback="onV2InvisibleError"
data-expired-callback="onV2InvisibleExpired"
invisible demo</button>
</body>
</html>
メリット
置くだけ簡単
デメリット
UX低下：画像選択
v2 checkbox
code: v2Checkbox.html
<head>
<script>
var onV2checkboxSuccess = function(token) {}
var onV2checkboxError = function() {}
var onV2checkboxExpired = function() {}
</script>
</head>
<body>
<h1>v2_checkbox</h1>
<form action="?" method="POST">
<div
class="g-recaptcha"
data-sitekey="サイトキー"
data-callback="onV2checkboxSuccess"
data-error-callback="onV2checkboxError"
data-expired-callback="onV2checkboxExpired"
</div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
メリット
置くだけ簡単
デメリット
UX低下：チェック、画像選択
チェックしてから2分でtokenの有効期限が切れる
v3
code: v3.html
<head>
<script>
var onV3Success = function(token) {}
var onV3Error = function() {}
var onV3Expired = function() {}
</script>
</head>
<body>
<h1>v3</h1>
<button
class="g-recaptcha"
data-sitekey="サイトキー"
data-callback="onV3Success"
v3 demo</button>
</body>
</html>
メリット
UX低下なし
デメリット
Scoreをもとにどうするかは実装側の責任
その他
data-callbackはグローバルスコープしか呼べないため、var以外でcallbackを定義するとreCAPTCHA couldn't find user-provided functionになる
code: reCaptchaComponent.js
<template lang="pug">
button.g-recaptcha(
:data-sitekey="reCaptchaSitekey"
data-callback="onRecaptchaSuccess"
data-error-callback="onRecaptchaError"
)
span.label {{ label }}
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from 'nuxt-property-decorator';
@Component({
head(this: AppReCaptchaButton) {
return {
script: [
{
src: https://www.google.com/recaptcha/api.js?&hl=${言語コード},
async: true,
defer: true,
},
],
};
},
})
export default class AppReCaptchaButton extends Vue {
/** ボタンラベル */
@Prop({ type: String, required: true })
label: string;
/** ライフサイクル */
mounted(): void {
// reCAPTCHAのcallbackがグローバルスコープしか呼べないため、グローバルにセット
window.onRecaptchaSuccess = this.onSuccess;
window.onRecaptchaError = this.onError;
}
/**
* 認証成功時
* @param reCaptchaResponse reCAPTCHA認証トークン
*/
@Emit('success')
onSuccess(reCaptchaResponse: string): string {
return reCaptchaResponse;
}
/** 認証失敗時 */
@Emit('error')
onError(): void {}
}
</script>
<style lang="scss" scoped></style>
規約上、バッジかテキストどちらかを記載する必要あり
https://developers.google.com/recaptcha/images/text_badge_example.png
バッジを消す場合は.grecaptcha-badge { visibility: hidden; }
vueであればv-deepで
reCAPTCHA以外のbot対策方法
CAPTCHA
reCAPTCHAのライバルで、機能的にはほぼ同じ。プライバシー保護に強い＆カスタマイズ性が高いらしい。
特定IPアドレスからのアクセス遮断
特定メールアドレスドメインを入力拒否
ノンリファラーアクセスを遮断
botはリファラがないケースが多い
ただし、ブックマークからのアクセスなど人間のアクセスも遮断する可能性
まとめ
基本的にはreCAPTCHA v3を入れておけば問題はなさそう
ただしチューニングが必要
プライバシーうんぬんや、料金的な問題があれば、hCaptchaも選択肢に入りそう（hCaptchaの方が安いらしい）