<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" xml:lang="es"><generator uri="https://jekyllrb.com/" version="4.4.1">Jekyll</generator><link href="/feed.xml" rel="self" type="application/atom+xml" /><link href="/" rel="alternate" type="text/html" hreflang="es" /><updated>2025-04-23T20:53:04+00:00</updated><id>/feed.xml</id><title type="html">Jorge Alvarado</title><subtitle>Un blog con contenido periodico sobre desarrollo de software, integraciones e Inteligencia Artificial</subtitle><entry><title type="html">Implementando CAPTCHA en tu sitio web (reCAPTCHA vs Turnstile)</title><link href="/posts/recaptcha/" rel="alternate" type="text/html" title="Implementando CAPTCHA en tu sitio web (reCAPTCHA vs Turnstile)" /><published>2025-04-22T03:00:00+00:00</published><updated>2025-04-23T20:52:39+00:00</updated><id>/posts/recaptcha</id><content type="html" xml:base="/posts/recaptcha/"><![CDATA[<h2 id="implementando-captcha-en-tu-sitio-web-recaptcha-vs-turnstile">Implementando CAPTCHA en tu sitio web: reCAPTCHA vs Turnstile</h2>

<p>Toda interacción de una web pública que ofrece consulta o registro de datos corre el riesgo de ser visitada por bots, ahora con la aparición de la IA esta tendencia es mayor. Cualquier consulta o escritura en una aplicación Web es costo que afectará tu bolsillo. 
Así que distinguir entre una visita humana y un bot es un necesidad para muchas aplicaciones Web. 
En estos escenarios analizaremos dos alternativas conocidas: Google ReCAPTCHA y CloudFlare Turnstile.</p>

<h2 id="google-recaptcha-el-más-conocido">Google reCAPTCHA: El más conocido</h2>

<p>Google ofrece varias versiones de su sistema reCAPTCHA: Entre estas se encuentra la opción reCAPTCHA essential que es la que usaremos en el ejemplo. 
Las otras opciones representan propuestas más integrales y con características adicionales. 
<a href="https://cloud.google.com/recaptcha/docs/compare-tiers?hl=es-419">costos de Google reCAPTHA</a></p>

<p><strong>Implementación básica:</strong></p>
<ol>
  <li>Regístrate en la <a href="https://www.google.com/recaptcha/admin/create">consola de reCAPTCHA</a></li>
  <li>Obtén tus claves (pública del sitio y secreta)</li>
  <li>Agrega el script en el <code class="language-plaintext highlighter-rouge">&lt;head&gt;</code> en tu HTML o Web:
    <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre></td><td class="rouge-code"><pre><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://www.google.com/recaptcha/api.js"</span> <span class="na">async</span> <span class="na">defer</span><span class="nt">&gt;&lt;/script&gt;</span>
</pre></td></tr></tbody></table></code></pre></div>    </div>
  </li>
  <li>Coloca el widget donde desees que aparezca:
    <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre></td><td class="rouge-code"><pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"g-recaptcha"</span> <span class="na">data-sitekey=</span><span class="s">"tu_clave_del_sitio"</span><span class="nt">&gt;&lt;/div&gt;</span>
</pre></td></tr></tbody></table></code></pre></div>    </div>
  </li>
  <li>Verifica la respuesta en tu servidor usando la clave secreta</li>
</ol>

<p>reCAPTCHA v3 funciona en segundo plano sin interrumpir a los usuarios, asignando una puntuación de riesgo que puedes utilizar para tomar decisiones. 
La versión v2 es la más conocida y la que muestra la casilla de ‘No soy un robot’.</p>

<h2 id="cloudflare-turnstile-smart-captcha-una-alternativa-prometedora">Cloudflare Turnstile (smart CAPTCHA): Una alternativa prometedora</h2>

<p>Turnstile se presenta como una alternativa más centrada en la privacidad, en este caso, también ofrece una opción empresarial que permite cologar los widgets en ilimitados números de paginas.</p>

<p>la solución general es gratuita, siendo un factor importante a considerar para todo website que requiera una protección de seguridad ante bots, y si es que no tienes planes de comprometerte con un costo a futuro como es el caso de google ReCAPTCHA:</p>

<p><strong>Implementación básica:</strong></p>
<ol>
  <li>Regístrate en el <a href="https://dash.cloudflare.com/">panel de Cloudflare</a></li>
  <li>Crea un sitio y obtén tus claves privadas y publicas</li>
  <li>Agrega el script en tu HTML:
    <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre></td><td class="rouge-code"><pre><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://challenges.cloudflare.com/turnstile/v0/api.js"</span> <span class="na">async</span> <span class="na">defer</span><span class="nt">&gt;&lt;/script&gt;</span>
</pre></td></tr></tbody></table></code></pre></div>    </div>
  </li>
  <li>Inserta el widget:
    <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre></td><td class="rouge-code"><pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cf-turnstile"</span> <span class="na">data-sitekey=</span><span class="s">"tu_clave_del_sitio"</span><span class="nt">&gt;&lt;/div&gt;</span>
</pre></td></tr></tbody></table></code></pre></div>    </div>
  </li>
  <li>Verifica la respuesta en tu servidor usando la clave secreta</li>
</ol>

<p>Ambas soluciones son similares en la implementación FrontEnd.</p>

<h2 id="comparativa-de-características">Comparativa de características</h2>

<table>
  <thead>
    <tr>
      <th>Característica</th>
      <th>Google reCAPTCHA</th>
      <th>Cloudflare Turnstile</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Experiencia de usuario</td>
      <td>Puede ser intrusivo (v2) o invisible (v3)</td>
      <td>Generalmente menos intrusivo</td>
    </tr>
    <tr>
      <td>Privacidad</td>
      <td>Recopila datos para Google</td>
      <td>Enfoque en privacidad, menos recopilación de datos</td>
    </tr>
    <tr>
      <td>Accesibilidad</td>
      <td>Problemas conocidos</td>
      <td>Mejor rendimiento general</td>
    </tr>
    <tr>
      <td>Integración</td>
      <td>Ampliamente soportado</td>
      <td>Soporte creciente</td>
    </tr>
    <tr>
      <td>Implementación Front</td>
      <td>Sencillo de incluir</td>
      <td>Sencillo de incluir</td>
    </tr>
    <tr>
      <td>Implementación Back</td>
      <td>La validación de google es x-www-form</td>
      <td>La validación de cloudflare es json</td>
    </tr>
  </tbody>
</table>

<h2 id="estructura-de-costos">Estructura de costos</h2>

<p><strong>Google reCAPTCHA:</strong></p>
<ul>
  <li>Gratuito versión reCAPTCHA Essentials hasta 10,000 evaluaciones/mes (La web no lo indica pero es posible que luego de eso, ya no funcione)</li>
  <li>reCAPTCHA Standar: Gratis hasta 10,000 evaluaciones/mes, $8 hasta 100,000 solicitudes. (No lo indica pero se entiende que se incrementa por cada 100mil. )</li>
  <li>Versión Enterprise: Hasta 10,000 evaluaciones gratis*, $8 por hasta 100,000 evaluaciones mensuales y, luego, $1 por cada 1,000 evaluaciones</li>
</ul>

<p><strong>Cloudflare Turnstile:</strong></p>
<ul>
  <li>Completamente gratuito, sin límites de uso, Cloudflare ofrece el plan Enterprise con habilitación de Widgets sin límites, es decir se puede agregar sin limites  el widget en distintos formularios o secciones web.</li>
</ul>

<h2 id="costos-proyectados">Costos proyectados</h2>

<p>Para un sitio con <strong>100,000 verificaciones mensuales</strong>:</p>
<ul>
  <li>Google reCAPTCHA: $0 (dentro del límite gratuito)</li>
  <li>Cloudflare Turnstile: $0</li>
</ul>

<p>Para un sitio con <strong>2 millones de verificaciones mensuales</strong>:</p>
<ul>
  <li>Google reCAPTCHA Enterprise: ~$2000/mes (incluye el descuento de las primeras 10,000 gratuitas)</li>
  <li>Cloudflare Turnstile: $0</li>
</ul>

<p>Para un sitio con <strong>10 millones de verificaciones mensuales</strong>:</p>
<ul>
  <li>Google reCAPTCHA Enterprise: ~$10,000/mes (por los 9.9 millones adicionales)</li>
  <li>Cloudflare Turnstile: $0</li>
</ul>

<h2 id="consideraciones-finales">Consideraciones finales</h2>

<p><strong>Elige Google reCAPTCHA si:</strong></p>
<ul>
  <li>Ya utilizas muchos servicios de Google, es decir si los productos Google forman parte de la estrategia es parte de una adquisición mayor de servicios Google.</li>
  <li>Necesitas la confiabilidad de una solución probada con experiencia.</li>
  <li>Te interesa la integración con Analytics y otras herramientas de Google, que pueden dar una visión mayor de los beneficios de una integración de diversos productos Google, tales como Google Workspace, entre otros.</li>
</ul>

<p><strong>Elige Cloudflare Turnstile si:</strong></p>
<ul>
  <li>La privacidad de los usuarios es prioritaria</li>
  <li>Buscas minimizar costos a largo plazo, es decir tu inversión se centra en otros costos operativos.</li>
  <li>Prefieres una solución menos intrusiva y simple de implementar.</li>
</ul>

<p>La decisión final dependerá de tus necesidades específicas, pero Turnstile ofrece una propuesta de valor convincente, especialmente para sitios con alto tráfico donde los costos de reCAPTCHA podrían escalar significativamente.</p>

<p>Para la validación backend, he publicado dos ejemplos que pueden ayudarte en la confirmación de respuesta del widget, básicamente ambas soluciones son similares: se trata de validar la respuesta generada por el widget que se envía al backend de Google o Turnstile, la diferencia está en el header de la llamada a los respectivos backend, esa diferencia es importante para evitar errores en la validación.</p>

<p><a href="https://github.com/jorge-alvarado-revata/ex-captcha-validate">backend en Express de Gogle Recaptcha</a></p>

<p><a href="https://github.com/jorge-alvarado-revata/ex-captcha-turnstile-validate">backend en Express de Cloudflare Turnstile</a></p>

<p>¿Qué solución CAPTCHA estás utilizando actualmente? ¿Has considerado integrar estas alternativas?</p>]]></content><author><name></name></author><category term="node.js" /><category term="Web Security" /><category term="Web Development" /><category term="backend" /><category term="TAG" /><summary type="html"><![CDATA[Implementando CAPTCHA en tu sitio web: reCAPTCHA vs Turnstile]]></summary></entry><entry><title type="html">Vibecoding Method</title><link href="/posts/vibecoding-method/" rel="alternate" type="text/html" title="Vibecoding Method" /><published>2015-04-23T00:00:00+00:00</published><updated>2015-04-23T00:00:00+00:00</updated><id>/posts/vibecoding-method</id><content type="html" xml:base="/posts/vibecoding-method/"><![CDATA[]]></content><author><name></name></author><summary type="html"><![CDATA[]]></summary></entry></feed>