Cloudflare Turnstile
Cloudflare Turnstile es una alternativa inteligente de CAPTCHA proporcionado por Cloudflare que se utiliza para proteger formularios en sitios web contra ataques automatizados, como bots maliciosos o intentos de spam. Para utilizar este servicio es necesario crear una cuenta de usuario y añadir nuestro sitio web al apartado de Turnstile.
https://www.cloudflare.com/es-es/products/turnstile/
Turnstile
En el apartado de menú Turnstile, debemos de agregar el dominio (puede ser más de uno) de nuestro proyecto. Basta con añadirle un nombre y la url de la app. Las siguientes opciones las dejamos como siguen:
Una vez añadida nuestra app, Cloudflare nos genera un Site Key (una clave que identifica unívocamente nuestro/s dominio/s ) y una Secret key (la clave privada para validar el token referido a nuestro dominio).
Gitlab
Por seguridad, las variables no deben hardcodearse en el código, por ello una vez generadas en Cloudflare, las metemos en gitlab para poder utilizarlas en nuestro proyecto.
Setting -> ci/cd ->variables
- TURNSTILE_SECRET_KEY
- TURNSTILE_SITE_KEY
No olvidar que tiene que haber una por cada entorno y que hay que meter las variables genéricas a la LISTA_SECRET
Una vez creadas, ya podemos meterlas en los filtros del proyecto para utilizarlas. La URL de validación, al ser única y pública podemos meterla directamente hardcodeada en los filtros.
Parte del cliente
Usamos la renderización implícita: el widget Turnstile se inicializa automáticamente escaneando el HTML de la página en busca de elementos con la clase cf-turnstile.
El campo cf-turnstile-response contendrá la información necesaria para que el servidor realice esta verificación.
Los pasos básicos a seguir son:
- Añadimos la librería de cloudflare turnstile (Si utilizamos una plantilla, hay que meterlo en el head)
- Añadimos el div del captcha: tiene que tener la clase “cf-turnstile” y el atributo data-sitekey con el site-key que representa nuestro dominio.
- Añadimos un h:input oculto (type=hidden) con el nombre “cf-turnstile response”. Le asignamos un value del manejador para recoger el valor del token.
- Definimos una función javascript que renderiza nuestro div del captcha y asigna el valor del token de respuesta a la variable de nuestro manejador.
Con esto, el token queda implementado en el cliente y el token generado, a la espera de la validación en la parte del servidor
Parte del servidor
El captcha ya está puesto en el cliente con el token generado, ahora hay que validarlo frente a la URL de validación ofrecida por Cloudflare.
Los parámetros requeridos en la solicitud son:
- Secret (site secret key)
- Response (token)
La API acepta solicitudes/x-www-form-urlencoded y aplicaciones/json, pero el tipo de respuesta siempre será aplicación/json.
La respuesta, siempre contiene una propiedad “success”, ya sea verdadera o falsa, indicando si la operación fue exitosa o no (Es la que utilizamos para comprobar que el token es válido)
Los pasos básicos a seguir son:
Si la respuesta no es nula y todo ha ido bien (200 OK), entonces obtenemos CaptchaResponse y devolvemos la propiedad success.
Resumen final con esquema general
