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 &dash; 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関数をカスタマイズします。removeAttributedisabled属性を削除しましょう。

    
    function _turnstileCb() {
        turnstile.render('.cf-turnstile', {
            callback: function() {
                document.querySelector("button[type='submit']").removeAttribute('disabled');
            },
        })
    }

    保存してTurnstileで許可したドメインからアクセスしましょう。成功した場合にボタンがクリックできる状態になっていればOKです。

    失敗した場合をテストする

    Turnstileの失敗ケースを試したい場合は、Site Key2x00000000000000000000ABに設定しましょう。これを利用すると、Turnstileの認証が必ず失敗します。

    必ず成功するパターンとして、1x00000000000000000000AAも使えます。

    そのほかのテスト方法については、Cloudflare Turnstileのドキュメントから確認できます。

    おわりに

    かなり簡単にTurnstileを使ったbot対策ができました。

    実際には、サーバー側でも検証を行うほうがより安全だとは思いますが、第一歩目として参考になればと思います。

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark