Cloudflare DevelopersCD
Cloudflare Developers•2y ago
Hugo

Is Turnstil will work for .pages.dev staging websites?

Refering to these docs: https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/

I'm playing around integrating Turnstile, but I don't want to test things in prod. So I'm working on a staging deployed branche under a .pages.dev domain.

So far I got a [400]:

https://challenges.cloudflare.com/cdn-cgi/challenge-platform/h/g/flow/ov1/2049655336:1719936617:0_FJQWPXH2YvfItEUoo36yZmg0JzeQT_-42dMLKPpPQ/89cffdc25a9d42db/11ff73d1372fd92 400 (Bad Request)

My implementation uses this script tag in the <head/>:
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>

And my code is:

if (
    response.headers.has('cf-mitigated') &&
    response.headers.get('cf-mitigated') === 'challenge'
) {
    console.log('Turnstile challenge detected');
    await new Promise < void > ((resolve, reject) => {
        // @ts-ignore
        turnstile.render('#turnstile_widget', {
            sitekey: 'XX',
            'error-callback': function(e: any) {
                console.log('Turnstile error callback triggered');
                turnstileOverlay.style.display = 'none';
                reject(e);
            },
            callback: function(token: any, preClearanceObtained: any) {
                console.log('Turnstile callback triggered');
                if (preClearanceObtained) {
                    console.log('Pre-clearance obtained');
                    turnstileOverlay.style.display = 'none';
                    resolve();
                } else {
                    reject(new Error('Unable to obtain pre-clearance'));
                }
            }
        });
    });
}
Cloudflare Docs
Client-side rendering · Cloudflare Turnstile docs
You can initialize and customize the Turnstile widget on your web page via implicit or explicit rendering.
Was this page helpful?