Cloudflare Turnstile · Angular SSR · FastAPI
Cloudflare Turnstile con Angular y FastAPI para proteger la interacción con un bot
Turnstile es útil cuando una página Angular pública debe enviar un mensaje, lanzar un flujo de bot o llamar a una acción sensible del backend sin quedar abierta al abuso automatizado.
La arquitectura segura es sencilla: Angular pinta el widget y envía el token temporal; FastAPI valida ese token con Cloudflare antes de que el bot haga nada.
La secret key nunca debe estar en Angular, Git, capturas ni tutoriales. Si una secret se ha compartido, hay que rotarla en Cloudflare y desplegar el nuevo valor solo como variable de entorno del backend.
1. Arquitectura
El navegador no es confiable. Solo puede obtener un token temporal de Turnstile. FastAPI valida ese token en servidor, aplica rate limits y despues ejecuta la accion del bot.
Frontend Angular
Site key publica usada en el ejemplo Angular: 0x4AAAAAADL_SO30Hjut98cd
Backend FastAPI
Recibe turnstile_token, valida longitud, rate limit y cabecera interna.
Cloudflare Siteverify
Confirma que el token es autentico, no esta caducado y no se ha reutilizado.
Accion protegida del bot
Solo se ejecuta cuando FastAPI ha recibido una respuesta success.
2. Integracion en Angular
En Angular SSR, carga el script de Turnstile solo en navegador. El widget devuelve un token mediante callback; ese token se envia junto con el formulario.
environment
TurnstileLoaderService
Componente del formulario
Plantilla HTML
3. Validacion en FastAPI
El backend envia el token a Cloudflare Siteverify. Solo si la respuesta es correcta, el endpoint protegido devuelve datos utiles o ejecuta el bot.
Variables de entorno
4. Nginx y perimetro del backend
Si la API es privada, Angular debe llamar a una ruta publica de la web y Nginx debe inyectar la clave interna en el lado servidor.
API privada con Nginx y FastAPI. El patron encaja con la guia de API privada con Nginx y FastAPI: Turnstile filtra abuso humano/bot, y la cabecera interna evita que terceros llamen directamente al backend.
5. Checklist de produccion
1. Rotar secretos
Si la secret key se ha compartido en un chat, ticket o commit, crea una nueva en Cloudflare y despliegala como TURNSTILE_SECRET_KEY.
2. Validar siempre en servidor
El widget del navegador no protege por si solo. FastAPI debe llamar a Siteverify antes de ejecutar el bot.
3. Limitar abuso
Manten slowapi, limita la longitud del mensaje, no registres tokens y devuelve errores genericos.
4. Revisar hostname
Configura TURNSTILE_EXPECTED_HOSTNAME para aceptar tokens del dominio previsto.
5. Separar responsabilidades
Turnstile no sustituye login, permisos ni la clave interna del proxy cuando la API no debe ser publica.
6. Probar el flujo completo
Verifica token valido, token caducado, ausencia de token, rate limit y llamada directa sin cabecera interna.
Conclusion
Turnstile no es autenticacion magica, pero si una capa fuerte contra abuso en formularios y disparadores de bots cuando se combina con verificacion server-side, rate limits y API privada.
Despues de publicar, pide indexacion de las dos versiones porque la pagina tiene title, canonical, description, H1 y contenido SSR propio.
Lecturas relacionadas
Estos articulos completan el contexto de seguridad y Angular SSR: