CloudflareJavaScriptSaaS / FaaS
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対策ができました。
実際には、サーバー側でも検証を行うほうがより安全だとは思いますが、第一歩目として参考になればと思います。
ブックマークや限定記事（予定）など
WP Kyotoサポーター募集中
WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。
14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。