Zenn
🍯

Turnstile のオプション設定をいくつか試す

2024/02/13に公開
Cloudflare
turnstile
tech

Turnstile のパラメータを変更して、動作を見てみます。
サーバは下記の Explicit rentering のほうを拝借しました。
https://github.com/kyouheicf/turnstile-demo

Expire

Token は 300 秒で Expire するということで、Expire した場合の挙動を確認します。

デフォルトでは、Expire した Token を更新するパラメータ refresh-expired が auto です。 auto だと、Token の Expire ちょっと前に自動で更新が走り、新しい Token を取りに行くので、Challenge を解き続ける限り、Token が Expire したかどうかの確認結果 turnstile.isExpired() は false が続きテストになりません。
なので refresh-expired を manual で手動更新にし、 true を引き出します。
また expired-callback で Expire 発生時に alert を出してみます。

    'refresh-expired': 'manual',
    'expired-callback': function () {
        alert('token expired!');
    },

「成功しました！」ウィジェット（Token の入手）から 5 分放置すると、alert が表示されました。
manual なので、ウィジェットから手動で更新ボタンを押し、新しい Token を取ることもできました。

Error

擬似的に通信エラーを発生させ、挙動を確認します。

具体的には Challenge platform /cdn-cgi/challenge-platform/* との通信をブラウザー側の Firewall でブロックしました（Challenge platform に接続しようとすると、警告用のページへリダイレクトされる）。

デフォルトではエラー時のリトライは自動的に行われますので、下記の設定を追加しました。
retry-interval の 3 秒間隔でリトライを実施。
error-callbackでリトライをカウントし、3 回で抜ける。

const retryLimit = 2;
let retryCount = 0;
onloadTurnstileCallback = function () {
    turnstile.render('#ts_container', {
        :
        //retry: 'never',
        'retry-interval': 3000,
        :
        'error-callback': function (ecode) {
            const response = turnstile.getResponse();
            console.log(response)
            if (response == undefined) {
                console.log(retryCount);
                if (retryCount < retryLimit) {
                    retryCount++;
                    console.log(retryCount);
                } else {
                    alert('hit an error, error code is ' + ecode);
                    location.assign('https://www.example.com');
                }
            }
        },
        :

リトライを 3 回行ったところで alert が表示され（エラーコード 300030）、OK すると指定のページに転送されました。

なお、 retry: 'never' で自動リトライをやめ、turnstile.reset()でチャレンジし直す方法でも、同じように動いていました。

onloadTurnstileCallback = function () {
    turnstile.render('#ts_container', {
        :
        retry: 'never',
        //'retry-interval': 3000,
        :
        'error-callback': function (ecode) {
            const response = turnstile.getResponse();
            if (response == undefined) {
                if (retryCount < retryLimit) {
                    retryCount++;
                    setTimeout(function () {
                        turnstile.reset(); 
                    }, 3000);
                } else {
                    alert('hit an error, error code is ' + ecode);
                    location.assign('https://www.example.com');
                }
            }
        },
        :

Execute

turnstile.execute() で Challenge 応答のタイミングを指定します。
マウスのポインターが枠にエンターしたときに応答させてみます。

パラメータの execution と appearance を execute に設定します。

:
<div id="ts_container" onmouseenter='onloadTurnstileCallback()'>
    <p>マウス🐭パッド</p>
</div>
:
<script>
    onloadTurnstileCallback = function () {
        turnstile.execute('#ts_container', {
            execution: 'execute',
            appearance: 'execute',
            :

マウスが枠内に入って初めてウィジェットが表示されました。
ただ appearance がデフォルトの always だと白一色のウィジェット枠だけは最初から表示されました。

サービスの稼働状況

Challenge platform の稼働状況も気になります。

Cloudflare のコンポーネントごとのステータスは API で取ることができます。
Turnstile の稼働を取得してみます。
"status": "operational" でとりあえず安心。
モニターしてサービス安定化につなげることができるかもしれません。

 $ curl -s https://www.cloudflarestatus.com/api/v2/components.json | jq -r '.components[] | select (.name |contains("Turnstile"))'
{
  "id": "m4jywscr0n0k",
  "name": "Turnstile",
  "status": "operational",
  "created_at": "2023-01-19T17:03:40.590Z",
  "updated_at": "2024-02-09T10:19:57.345Z",
  "position": 76,
  "description": "Turnstile is a user-friendly, privacy-preserving alternative to CAPTCHA.",
  "showcase": false,
  "start_date": "2023-01-19",
  "group_id": "1km35smx8p41",
  "page_id": "yh6f0r4529hb",
  "group": false,
  "only_show_if_degraded": false
}

ついでにデータセンターも見ます。 🇯🇵

$ curl -s https://www.cloudflarestatus.com/api/v2/components.json | jq -r '.components[] | select (.name |contains("Japan"))|.name,.status'
Fukuoka, Japan - (FUK)
operational
Naha, Japan  - (OKA)
operational
Osaka, Japan - (KIX)
operational
Tokyo, Japan - (NRT)
operational

以上。
他のオプションを試すことがあれば追記していきます。

Discussion