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. Perimetro del backend: Nginx, Cloudflare y alternativas
Esta parte solo funciona cuando la peticion pasa realmente por tu servidor de confianza antes de llegar a FastAPI. Si Angular llama directamente a otro hostname/API, la regla de Nginx de la web no puede inyectar ninguna cabecera privada.
Cloudflare esta delante del origen. Nginx solo ve el trafico que Cloudflare reenvia a ese origen. Por eso el patron seguro es: el navegador llama a una ruta del mismo sitio publico, Cloudflare la reenvia al origen, y el proxy del origen reenvia solo esa ruta API a FastAPI añadiendo la cabecera interna. Si el navegador llama directamente a api.example.com, ese origen separado necesita su propia proteccion.
API privada con Nginx y FastAPI. Turnstile y el proxy resuelven problemas distintos: Turnstile demuestra que una interaccion del navegador paso la validacion de Cloudflare; el proxy/cabecera interna evita que rutas privadas del backend se llamen directamente.
Comparacion de opciones
Solo Turnstile en FastAPI
Mejor para formularios publicos y disparadores de bot. FastAPI es alcanzable, pero cada POST sensible debe validar el token Turnstile, aplicar rate limit y revisar hostname/action.
Nginx reverse proxy en el mismo VPS
Mejor cuando Angular SSR y FastAPI viven en el mismo servidor o red. El navegador llama a /api/... y Nginx inyecta X-Internal-Api-Key antes de reenviar a localhost:8000.
Cloudflare Tunnel mas Access
Mejor cuando la API no debe ser publica. Access puede proteger una aplicacion self-hosted y los service tokens sirven para servidor-servidor, no para codigo de navegador.
Cloudflare WAF y rate limiting
Util como capa exterior para IPs, paises, metodos o rutas abusivas, pero no sustituye la validacion Siteverify dentro de FastAPI.
Cloudflare Worker como API gateway
Util cuando quieres que Cloudflare sea la pasarela confiable. El Worker puede guardar secretos en variables de entorno y reenviar solo peticiones validas al origen.
Ejemplo con Cloudflare Worker como gateway
Un Worker es util cuando la peticion no pasa primero por tu Nginx de origen. El navegador llama a la ruta del Worker, el Worker guarda la clave interna en variables de entorno de Cloudflare y FastAPI sigue validando Turnstile.
Configuracion recomendada para este tutorial
Para un formulario publico de bot, deja la verificacion Turnstile en FastAPI y expón solo una ruta POST. Si ademas quieres que la API sea privada, haz que Angular llame a /api/bot/turnstile-demo en el mismo dominio y deja que Nginx, un Worker o Cloudflare Access protejan el origen. Nunca pongas la clave interna ni un service token de Access en Angular.
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: