🐈

Cloudflare Managed Challenge のページをカスタマイズする

2023/05/29に公開

前回の記事で、Cloudflare TurnstileとManaged Challengeの違いをまとめました。

簡単なサマリーとして、両方とも使われているテクノロジーはほぼ同じですが、オリジンに実装しCloudflareのAPIをたたくのがTurnstile、Cloudflare側でボットかどうか判別した後、安全なクライアントのみをオリジンへアクセスさせるのがManaged Challengeという違いがあります。

両方とも、JavaScriptなどを用いてブラウザかどうかの判別を高確率で実施し、安全と判断できない場合のみ、CAPTHA、ないしはインタラクティブチャレンジ（特定箇所をクリックさせる）などの動作を行います。

TurnstileはオリジンがAPIを呼ぶ出す分、画面のフルカスタマイズが可能ですが、Managed Challengeの場合、一瞬クライアントチェック画面が表示されたのち、オリジンHTML（キャシュされている場合はキャッシュHTML)へ遷移するため、ユーザービリティには課題を抱えますが、その画面のカスタマイズは可能です。

画面のカスタマイズ方法

カスタマイズされた画面はCloudflare内部でホスティングされるものではなく、外部HTMLを読み込んで出力されます。勿論Cloudflare側でキャッシュはされます。
最初構成だと例えば以下をどこかのURLでホスティングします。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
    <title>Test Custom Page</title>
</head>
<body>
  <h1> Test Custom Page </h1>
  <h2>::CAPTCHA_BOX::</h2>
</body>
</html>

  <h2>::CAPTCHA_BOX::</h2>

がポイントです。
これをCloudflareが読み込んで出力する際に、Managed Challengeが有効化された画面がクライアントブラウザに戻されます。出力されるHTMLのサンプルは以下です。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
    <title>Test Custom Page</title>

</head>
<body>
  <h1> Test Custom Page </h1>
  <h2><form id="challenge-form" class="challenge-form" action="/?__cf_chl_f_tk=RbtQHFQqxzccsGaslAPnDBh.6j5yd2nQnm01__om2Y8-1685342048-0-gaNycGzNB2U" method="POST" enctype="application/x-www-form-urlencoded">
    <div id="cf-please-wait">
        <div id="spinner">
            <div id="cf-bubbles">
                <div class="bubbles"></div>
                <div class="bubbles"></div>
                <div class="bubbles"></div>
            </div>
        </div>
        <p id="cf-spinner-please-wait">Please stand by, while we are checking your browser...</p>
        <p id="cf-spinner-redirecting" style="display:none">Redirecting...</p>
    </div>
    <input type="hidden" name="md" value="yEkxbL4BBouLEEmU2tWq4m90iMJEhZ2cxdJYDkZSeE0-1685342048-0-AfjI2eKHpJf7rudJGa_GvBEkTvbsnZurxVOgJ0dklY7RrdsNJkvWVCYlimU_FU-Z2HcB_Ylw6ate7dv1tt6GOzDlv4wX6RHo1yMUcY6ptgUN3uAnfL0N52nv1AkLSL3e4f88Z5-i3xhJ36UxV9ZFyKUal4_rIQ8RyikpSQpqo1KCIoci24v3iWCkukew5QNOiRxNGGFwxZBtUUKKmMjwNor6IZTpIv2xJZZ0Lsg2ppWzw91tf0FNY3WlHRPlWLrjk1NV7pnaqdfAI0gOpu52lmTfylis7KXNDHYMa8kpLj8nshDN8h6FT2WEjtGUhwXc9toY4-6SrnMe5szcFTTYYHRFtmUYSyRB7lyxJwOuzIa8hwpdokb4Ggm_9mkY58Lbim3h3nw_B-QI5zL4rXzEhZ7nZ55nss09xA_EVumOf3NgAW9seCiXFgQKXG5gznD5w3u7x05Mi6qQRV-FIG-spgMT2Jux4sOZ270MhWw6d2ZRZg4Z53mhPP2vK1T_ETem7fB7Sz2SQfJM3NWcyPy5dNj_SH9tMcIJMi4I_7yPFEa02wyasPXejdR0SY_4NN5Nzr7dhtqMHURZOz33sYoH4MgoZggjuHq4HafU2A_xn8nPpA3S8FVlR2VQ-TNUJmEgP-2k_G1G7MigRU9xcPObWjiBNvAa7zGXTlvHSIInlMVxlIA7hBZMdHE37oWAkYRCrWNzj5WQlZJDeKTjx7xqwLX2MeHh7T_w_Ao443plyoWAeKGZxiOmibWLBmRhR3-vHJz517tDpnhnZ37YhRQbvYMPVYI7RNt6tkaGdwxX6UU0GNMjDiZ2fSsVOplwsmH3hjMswc1l-kp2thRWAV2sEHux5Fvc0JokNgaUe_P_BAe3S0m5iCvXsCg6iUWoMgIvyUjrFDFIUOApIN2dpFxqN1ciIyKNnU4WRvyLPH99owJD1wbjsRAQOXHIoXYd70ogTRXNIiRSQeXZ1quN98G1hSODTL1RV4yzU5XZoCuYo4o0efBsYj2ctT52TcG0HoNxk0DZFtPXKGTretvNfurxR5i3HXaeC2AHsLsIUO3EAehe0MoinzhRWtcq4jEiG_5Q23KK5RgRkYu4lx6l7O47mhbNq2XDVInrqTgtWwe64MU7cC6QoRCWGMjLm8Znn4PTOAOl44z_01f5uECmbHKicewJZyNWJsZJA_79WQ30aIErV31MYjCU7rb9B7jZENQdVf3UA8bZjnk2bPAUajRRbYG6uQogq4EU9h5b0dd5bHK5kQg2TcS6YwIn1NYI351TXwjF9tp_Z02h6xrw7VuOpTFriC2SGxAWo2jZswBUm153T7Jg7BbczcD_HoMLftBNCx6A8TaXJ-f8K7hFBhcxHZXME64jiZmZNmt1p2DWiRSAE05S39Q8ItVYd3fupb-wcGuoww9iJdKLnZAvPdywpnfwejPquTXLHG_Yd1dN7rMabkAjk2udN9F2ss7gkTICn7A4iZRJFjBYKN3zuZHSpCaPNGiPZQSBWAtphYKA8ZqMSoYLO5qm0V9QAlCWGU-2-tcLq5wU2Kw5P0GmmHHK062QpvICABFlEJ2oJt1XngS5C0JNLrURWqPdbX_2dQiebe3BMxr047pr-iarKVgbn1uLOoiadnoT3N5d4qz4WFZnh6TsXHQbEgfM6BbHQH1DPMhvFO_Cpj6HdSqy_e0E0vsLk4y_r_leHOs96A01cbdewGfdmg6_MNQYSnSAXhG04r5yJvTDJbR__YjXKeQxSlDWDXbkGIQzAEsXcra63kc6_lgDT1CLgrrYLWN6DZPovR__EGjj3m66EZc-slKDIpnMUzxxhxjsGNrNTn4AWzN_" />
    <noscript id="cf-captcha-bookmark" class="cf-captcha-info">
        <h1 style="color:#bd2426;">Please turn JavaScript on and reload the page.</h1>
    </noscript>
    <div id="no-cookie-warning" class="cookie-warning" style="display:none">
        <p style="color:#bd2426;">Please enable Cookies and reload the page.</p>
    </div>
    <div id="trk_jschal_js" style="display:none;background-image:url('/cdn-cgi/images/trace/managed/nojs/transparent.gif?ray=7cecb5b98f3d2053')"></div>
</form>
<script>
    (function(){
        window._cf_chl_opt={
            cvId: '2',
            cZone: '202305271358.harunobukameda.labrat.online',
            cType: 'managed',
            cNounce: '28088',
            cRay: '7cecb5b98f3d2053',
            cHash: 'dac417553c60361',
            cUPMDTk: "\/?__cf_chl_tk=RbtQHFQqxzccsGaslAPnDBh.6j5yd2nQnm01__om2Y8-1685342048-0-gaNycGzNB2U",
            cFPWv: 'b',
            cTTimeMs: '1000',
            cMTimeMs: '0',
            cTplV: 1,
            cTplB: 'cf',
            cK: "",
            cRq: {
                ru: 'aHR0cDovLzIwMjMwNTI3MTM1OC5oYXJ1bm9idWthbWVkYS5sYWJyYXQub25saW5lLw==',
                ra: 'TW96aWxsYS81LjAgKFdpbmRvd3MgTlQgMTAuMDsgV2luNjQ7IHg2NCkgQXBwbGVXZWJLaXQvNTM3LjM2IChLSFRNTCwgbGlrZSBHZWNrbykgQ2hyb21lLzExMy4wLjAuMCBTYWZhcmkvNTM3LjM2',
                rm: 'R0VU',
                d: 'WqjP85ynjTG3oX1BzKN7I8y8mWnc8p5NrG7Hcf9IN7NS2fUER9Jig2wvB07juxc6iqeVnMPDUjWwosJvlnZQTIfKFFPg9Y2TKzBKK8zJNsFqHH1xm9QKxGe0vey2/Nbj5Cs4AEVQGaYUb2KBQL5KdJxMbhbRH3zA6SQvhG78PsskqeFWsSmbLf/QsdVnpVdTpWNFerQDQ8tacDJfr51VWRdFiaKLLgHqSVLbKXf5VlKER4SRAI/2B535C9qgjaV5twygBCwNz11a7YSpGc/j/dNqMmPjql0uGAmbUFObb03fn55vY+50EPv0wzcNfeVFQrBBidlNojwARWM6ZMkNHOpzyPitjaStE+OJGjvKKUSeylgHXBX7LLYoVF/H+HO/K3SsH582ZoT8Z0PneYBbEZtJLAdnFqRGDkxw8TvtTqXQVvRPgMpV9idgiNL9Sa6EvUZOPOlLW8QA3s9l0IFPheRmkdBmZiLayhWLkKRZL7i67QQPgBJnLnVNpmc7YKbwVAg/3O5MyxQ5sdEsRl/IIF98OZxSe5Gkmoce+58M5oZ9TaZhKGQ6qcYF6wqQrqGVJFVb5JTr3+Fsw6+htQiP6Q==',
                t: 'MTY4NTM0MjA0OC4yNjUwMDA=',
                m: 'qx6ubkjTRK/8Aqcph5sDN4hPEWIHC48cFtWck7qJxb4=',
                i1: 'YnqTb2+DSFxqBN0vfV7F9A==',
                i2: 'QFOkOq9WKF1ndk9zkHWB3w==',
                zh: 'cSItkUQZGfbuZ0HOcrN0eJNkw2APqbjU2qkPOaTUK5E=',
                uh: 'JCB3jAEjzVavFCrcYbiVbiyDV87HWusJ0oHo48gbZpk=',
                hh: 'UrTBu63NTl1DnEyCGPt5p2nBdIxjGdPa9kVAA+LgV9E=',
            }
        };
        var trkjs = document.createElement('img');
        trkjs.setAttribute('src', '/cdn-cgi/images/trace/managed/js/transparent.gif?ray=7cecb5b98f3d2053');
        trkjs.setAttribute('alt', '');
        trkjs.setAttribute('style', 'display: none');
        document.body.appendChild(trkjs);
        var cpo = document.createElement('script');
        cpo.src = '/cdn-cgi/challenge-platform/h/b/orchestrate/managed/v1?ray=7cecb5b98f3d2053';
        window._cf_chl_opt.cOgUHash = location.hash === '' && location.href.indexOf('#') !== -1 ? '#' : location.hash;
        window._cf_chl_opt.cOgUQuery = location.search === '' && location.href.slice(0, location.href.length - window._cf_chl_opt.cOgUHash.length).indexOf('?') !== -1 ? '?' : location.search;
        if (window.history && window.history.replaceState) {
            var ogU = location.pathname + window._cf_chl_opt.cOgUQuery + window._cf_chl_opt.cOgUHash;
            history.replaceState(null, null, "\/?__cf_chl_rt_tk=RbtQHFQqxzccsGaslAPnDBh.6j5yd2nQnm01__om2Y8-1685342048-0-gaNycGzNB2U" + window._cf_chl_opt.cOgUHash);
            cpo.onload = function() {
                history.replaceState(null, null, ogU);
            };
        }
        document.getElementsByTagName('head')[0].appendChild(cpo);
    }());
</script>

</h2>
</body>
</html>

実装手順ですがまずマネージメントコンソールのカスタムページをクリックします。

様々なページのカスタマイズが可能ですが、今回は以下の画面です。

既に作業したことがあるかどうかで表示内容が若干変わると思いますがカスタムページもしくは編集を押します。

カスタムページがホスティングされているURIを入力して、公開を押します。

以上で設定は完了です。
以下が参考リンクです。

https://202305271358.harunobukameda.labrat.online/

画面のカスタマイズ方法

Discussion