Cloudflare Developers•4mo ago

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'));
                }
            }
        });
    });
}

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.

2 Replies

Hugo•4mo ago

Hum, actually it was because the dev domain as not set in the turnstile options Now, I face a problem where the clearance cookie is not sent for subsequent requests, still investigating

Hugo•4mo ago

What do you mean? On subsequent requests, it just trigger a new challenge as it was not fed with the cookie

Gaming

Programming

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