Cloudflare Turnstileを使って、送信ボタンのオンオフを制御する
CloudflareのTurnstileを使用して、ユーザーがボットであるかどうかを判別することができます。この機能を使用して、ボットと判定された場合にフォーム送信を制限する実装を試しました。Turnstileを管理画面からサイトに追加し、サイトキーとシークレットキーを取得します。HTMLファイルにTurnstileの設定を追加し、ボタンを無効化した状態から有効化するカスタマイズを行います。Turnstileの失敗ケースをテストする場合は、特定のSite Keyを使用します。Turnstileのドキュメントから詳細なテスト方法を確認できます。Turnstileを使用することで、簡単にボット対策ができるということです。
目次
Cloudflare Turnstileを使って、サイトやフォームにアクセスしているユーザーがbotかどうかを判定することができます。
この機能を利用して、「Turnstileがbotと判定したら、フォーム送信を行えないようにする」実装を試してみました。
作りたいもの
テストモードを使って、あえてTurnstileの認証を失敗させてみました。その下にあるsubmitボタンがdisabledになっているため、ボタンをクリックできない状態にしています。
Turnstileにサイトを追加する
管理画面から、Turnstileを利用するサイトを登録しましょう。
サイトのドメインは複数登録できます、localhost
も登録できるっぽいので、ローカルで試す場合はこれも追加しましょう。あと、動いていることを見えるようにしたいので、[Widget Mode]は[Managed]を選びました。
Create
すると、サイトキーとシークレットキーが発行されます。
Turnstileを利用するHTMLを用意する
今回はブラウザ上での動きだけを試すので、HTMLファイルを1枚用意して、そこで実装します。HTMLファイルはCloudflareエヴァンジェリスト亀田さんのワークショップ資料から拝借しました。
下のHTMLのTURNSTILE_SITE_KEY
を、ダッシュボードで取得したSite Key
に変更して保存しましょう。
<html>
<head>
<title>Turnstile ‐ Dummy Login Demo</title>
</head>
<body>
<form>
<div class="cf-turnstile" data-sitekey="TURNSTILE_SITE_KEY"></div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
</form>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=_turnstileCb" async defer></script>
<script>
function _turnstileCb() {
turnstile.render('.cf-turnstile', {
callback: function(token) {
console.log('ok!')
console.log(token);
},
})
}
</script>
</body>
</html>
button
タグにdisabled
属性を追加しておきます。
<button class="w-100 btn btn-lg btn-primary" type="submit" disabled>Sign in</button>
最後に_turnstileCb
関数をカスタマイズします。removeAttribute
でdisabled
属性を削除しましょう。
function _turnstileCb() {
turnstile.render('.cf-turnstile', {
callback: function() {
document.querySelector("button[type='submit']").removeAttribute('disabled');
},
})
}
保存してTurnstileで許可したドメインからアクセスしましょう。成功した場合にボタンがクリックできる状態になっていればOKです。
失敗した場合をテストする
Turnstileの失敗ケースを試したい場合は、Site Key
を2x00000000000000000000AB
に設定しましょう。これを利用すると、Turnstileの認証が必ず失敗します。
必ず成功するパターンとして、1x00000000000000000000AA
も使えます。
そのほかのテスト方法については、Cloudflare Turnstileのドキュメントから確認できます。
おわりに
かなり簡単にTurnstileを使ったbot対策ができました。
実際には、サーバー側でも検証を行うほうがより安全だとは思いますが、第一歩目として参考になればと思います。