Implemented Include Cloudflare "Turnstile" as a CAPTCHA Option

DeltaHF

DeltaHF

Well-known member
Today, Cloudflare announced Turnstile, a CAPTCHA alternative designed to be easier (for humans, at least) to use.

blog.cloudflare.com

Announcing Turnstile, a user-friendly, privacy-preserving alternative to CAPTCHA

Any website can use a simple API to replace CAPTCHAs with our invisible alternative, whether they’re on the Cloudflare network or not.
blog.cloudflare.com blog.cloudflare.com

It is implemented in a similar way to reCAPTCHA and hCAPTCHA, it is available for free, and any website can use it, even if they aren't using Cloudflare.

I like that Turnstile is effortless for users, but more importantly, it's not widely adopted yet. This will make it less likely to be abused by spammers, and could help us keep our XenForo communities free from spam and abuse.
 
Upvote 11
This suggestion has been implemented. Votes are no longer accepted.
Just FYI, I've already added it to my Cloudflare addon (it's part of 1.3.0, which isn't released yet).

It seems to be working as expected so far, but I'm going to let it run for a bit on my site to make sure there's no unforeseen issues before releasing it.

1664413579914.webp

It's using XenForo's normal CAPTCHA handler system so anywhere (even non-standard places) that a site is using XenForo's CAPTCHA system, it should work. It currently supports both light and dark themes.

You can see it in action here: https://iolabs.io/register
 
Fair enough. I want to make some changes to the captcha system overall so we can add context to the captcha being performed as I think Cloudflare let’s us log that and be seen in analytics.
 
I think this is fantastic, things that improve the user experience (and not cost privacy, as far as I can tell from what they announced) is always a plus in my book.

However, from a quick search, what situations trigger a user to fail, and what is their recourse? At-least with click captchas, they can try again and get different images if they mess up.

@Chris D
 
Chris D said:
Fair enough. I want to make some changes to the captcha system overall so we can add context to the captcha being performed as I think Cloudflare let’s us log that and be seen in analytics.
Click to expand...
Ya... the action parameter allows you to do it. If you end up not implementing action yourself, it would be nice if your JavaScript just did this:

JavaScript: 
var options = this.options;
...instead of this:
JavaScript: 
var options = {
    sitekey: this.options.sitekey,
    theme: this.options.theme,
};

That would allow others to use the data-action attribute (or other available parameters since we aren't boxed into just sitekey and theme).
 
The Dark Wizard said:
However, from a quick search, what situations trigger a user to fail, and what is their recourse? At-least with click captchas, they can try again and get different images if they mess up.
Click to expand...
Good question, i just tested here and i passed the test but in case of fail what's happen ?
 
@digitalpoint with your implementation, if you happen to have a template that contains two forms where each of those forms displays a captcha, does it double render for you also?

Disabled it on the XF site for now but this post shows what was happening to our contact form:

z3r010 said:
It's showing twice on the contact us page.

View attachment 274047
Click to expand...

The other captchas don't do this so thinking it's potentially a CF bug. It renders two captchas in each tab 🙃
 
Chris D said:
@digitalpoint with your implementation, if you happen to have a template that contains two forms where each of those forms displays a captcha, does it double render for you also?

Disabled it on the XF site for now but this post shows what was happening to our contact form:



The other captchas don't do this so thinking it's potentially a CF bug. It renders two captchas in each tab 🙃
Click to expand...
I don't have anything that has 2 different forms each with captchas (I don't use captchas for anything beyond the default places XenForo uses them).

In the case of your contact form, since it's not the standard contact form, maybe it makes sense to have your piracy tab actually be a different URL rather than load both forms in on a single page as a workaround (simple enough with XenForo as you are well aware.. haha)? 🤷‍♂️

Even though it would be nice if it supported multiple captchas on a single page, it probably makes more sense to not use it that way anyway because your captcha analytics will get skewed where you get 2x visitor solve rates per page view, but the potential for only a single API solve (user is only going to submit one of the forms).

Either way, I haven't tried loading in 2 different captcha solves on a single page, but I'm guessing it wouldn't work for me either.
 
Cooking Ketogenic said:
I hope you will still release yours for those of us already using your awesome addon and not using the latest Xen Foro version.
Click to expand...
I'm not going to include the basic Turnstile functionality (no point in adding what will already be in XenForo), but I am adding the ability to automatically set it up/configure it via backend Cloudflare API calls with a single button click. Also adding buttons for deep links into your Cloudflare account for things like analytics. The addon will wedge in a Setup in Cloudflare button to XenForo's implementation that will trigger an overlay like so:

1664476099228.webp

...confirming that will automatically create the Turnstile site in Cloudflare and populate the keys in XenForo's settings:

1664476196418.webp
If you already have the Turnstile site setup in Cloudflare (it checks via the API), it will give you two buttons (Settings and Analytics) that deep link into your Cloudflare account.

At this point, I'm just waiting on the next version of XenForo.
 
The <xf:captcha tags are now context aware so the context can be passed into the CAPTCHA provider for analytics.

1664981952334.webp

The "No Action" category is captcha tags that do not include a context and we have quite a lot as we ran this for just under a week until we added that. The others are coming from updates we've made to templates in XF 2.2.11.

We've just given each captcha tag usage a context that more or less matches what template it is called in, so this should apply for all default captchas from 2.2.11 forwards.

I have no idea if other captcha providers have the ability to denote actions/context but currently only Turnstile is supported for this.
 
Chris D said:
The <xf:captcha tags are now context aware so the context can be passed into the CAPTCHA provider for analytics.

View attachment 274429

The "No Action" category is captcha tags that do not include a context and we have quite a lot as we ran this for just under a week until we added that. The others are coming from updates we've made to templates in XF 2.2.11.

We've just given each captcha tag usage a context that more or less matches what template it is called in, so this should apply for all default captchas from 2.2.11 forwards.

I have no idea if other captcha providers have the ability to denote actions/context but currently only Turnstile is supported for this.
Click to expand...
Sexy... that's one more Turnstile thing I can remove from my add-on. 👍🏻 I think at this point the only Turnstile stuff my add-on adds is the ability to auto create/configure the Turnstile site via API without needing to go to Cloudflare.

The major CAPTCHA systems (hCaptcha and reCAPTCHA) don't support the action attribute (or anything similar). But Turnstile is really good, so at this point I'm not sure why anyone would want to use anything else anyway. :)
 

Similar threads

NealC
Cloudflare Turnstile vs hCaptcha
Replies
8
Views
2K
BassMan
BassMan
C
  • Question Question
XF 2.2 Cloudflare Turnstile, any code to insert ?
Replies
2
Views
580
cjwinternet
C
V
Getting an API-Key for Cloudflare Turnstile
Replies
4
Views
898
digitalpoint
digitalpoint
Black Tiger
  • Suggestion Suggestion
Lack of interest Option to use Captcha and Q&A and multiple questions
Replies
6
Views
718
Black Tiger
Black Tiger
Back
Top Bottom