Les nouveaux tarifs de Google reCAPTCHA seront déployés le 1er août, ce qui signifie qu'il vous reste quelques jours pour migrer vers une alternative moins chère ou vous assurer que votre compte bancaire est bien approvisionné.

À partir de 1 $ pour 1 000 vérifications, cela va coûter très cher. Chez Mailmeteor, nous utilisons largement reCAPTCHA pour protéger nos services contre les robots. Avec le changement de prix de Google, nous avons calculé que nous étions sur le point de payer des milliers de dollars par mois pour continuer à utiliser leur service reCAPTCHA.

Qu'est-ce qu'un CAPTCHA ?

Les CAPTCHA sont un élément essentiel du Web. Son objectif est de séparer les bons citoyens des mauvais acteurs. Essentiellement, il s'agit d'un service qui fonctionnera sur le frontend et générera un jeton qui sera transmis au backend. Le backend vérifie ensuite que le jeton est légitime et, si tel est le cas, exécute l'action.

Google a fait un excellent travail en promouvant son propre service, mais heureusement, il existe des alternatives :

1. hCaptcha. Nous y avons pensé au début, mais leurs tarifs sont assez similaires à ceux du nouveau Google.
2. Tourniquet Cloudflare. Nous sommes de grands fans de Cloudflare et nous nous y sommes certainement penchés. Pour l'instant, c'est un service gratuit.

Creuseons.

S'éloigner de Google reCAPTCHA...

L'un de nos outils gratuits est un rédacteur d'e-mails IA. Il s'agit essentiellement d'une page HTML qui envoie une requête à notre backend, qui est ensuite transmise à une solution d'IA tierce.

Pour le protéger des abus, Google reCAPTCHA a été activé dès le premier jour. Voici comment la vérification a été effectuée jusqu'à présent (côté backend) :

// index.js
app.post('/api/email-ai-writer', recaptcha.middleware.verify, aiEmailWriter)

// ai_email_writer.js
async function aiEmailWriter(request, response) {
  try {
    // Recaptcha
    if (!request.recaptcha || request.recaptcha.error || !request.recaptcha.data) {
      console.warn('Recaptcha: verification failed.')
      return response.status(403).send({ error: true, message: 'Recaptcha: verification failed' })
    } else if (request.recaptcha.data.action !== 'aiemailwriter') {
      console.warn('Recaptcha: bad action name')
      return response.status(403).send({ error: true, message: 'Recaptcha: bad action name' })
    } else if (request.recaptcha.data.score 



C'est assez simple et c'est une partie essentielle de la raison pour laquelle Google reCAPTCHA était si populaire. L'encombrement est très limité et c'est vraiment facile à mettre en œuvre. Pour les plus curieux, nous avons exploité le package express-recaptcha pour le rendre vraiment simple à mettre en œuvre.


  
  
  ... au tourniquet Cloudflare


Lors de la migration vers Turnstile, nous n'avons pas pu trouver de package NPM, nous avons donc dû écrire un middleware pour traiter le jeton. Voici à quoi cela ressemble :



// middlewares/turnstile.js
const turnstile = async (request, response, next) => {
  try {
    // Turnstile injects a token in "cf-turnstile-response".
    const token = request.query['cf-turnstile-response']
    const ip = request.header('CF-Connecting-IP')

    if (!token) {
      throw new Error('Missing CloudFlare Turnstile Token')
    }

    // Validate the token by calling the
    // "/siteverify" API endpoint.
    const formData = new FormData()
    formData.append('secret', process.env.CLOUDFLARE_TURNSTILE_SECRET_KEY)
    formData.append('response', token)
    if (ip) formData.append('remoteip', ip)

    const url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify'
    const result = await fetch(url, {
      body: formData,
      method: 'POST',
    })

    // Process the verification outcome
    const outcome = await result.json()

    if (!outcome.success) {
      throw new Error('CloudFlare Turnstile declined the token')
    }

    request.turnstile = outcome

    // If authentified, go to next middleware
    next()
  } catch (err) {
    console.error(err)
    return response.status(403).send('Forbidden')
  }
}

export { turnstile }




Une fois le middleware en place, nous pouvons l'appliquer à toutes les demandes :



// index.js
app.post('/api/ai-email-writer', aiRateLimiter, turnstile, aiEmailWriter)




Et à l'intérieur de la fonction qui traite la requête, c'est assez similaire à ce qu'on avait précédemment :



// ai_email_writer.js
async function aiEmailWriter(request, response) {
  try {
    // CloudFlare Turnstile protection
    if (!request.turnstile || request.turnstile.error) {
      console.warn('Recaptcha: verification failed.')
      return response.status(403).json({ error: true, message: 'Recaptcha: verification failed' })
    } else if (request.turnstile.action !== 'aiemailwriter') {
      console.warn('Recaptcha: bad action name')
      return response.status(403).json({ error: true, message: 'Recaptcha: bad action name' })
    }

    ...





  
  
  Conclusion


La migration de reCAPTCHA vers Turnstile est simple et ne devrait pas prendre plus de quelques heures. Cela fonctionne de manière assez similaire et vous fera certainement économiser beaucoup d'argent en même temps.

Je n'ai pas abordé le frontend dans cet article, car nous utilisons un widget invisible que nos utilisateurs ne voient pas. Mais la documentation de Turnstile explique en détail comment utiliser ses widgets interactifs.

Arrêtez-le !