Portafolio · Proyecto
VeriSite Scanner diagnostica la postura defensiva de un sitio web analizando cabeceras HTTP de forma pasiva y entrega un informe accionable en menos de dos minutos.
Producto SaaS desarrollado por Armin Vera: demostración de producto, ingeniería full-stack y arquitectura BFF con streaming SSE. Demo en scanner.arminvera.cl.
Contexto
Convertir complejidad técnica en valor comercial
La Ley 21.459 en Chile exige medidas de seguridad razonables, pero pocos equipos pueden evaluar su exposición sin auditorías costosas o escaneos que afecten la disponibilidad.
El reto no era solo detectar cabeceras ausentes, sino diseñar un producto que cumpliera cinco objetivos:
- Proteger secretos APIs internas y credenciales de pipeline fuera del navegador del usuario.
- Comunicar progreso Feedback en tiempo real durante el análisis, no pantallas congeladas.
- Priorizar hallazgos Riesgos ordenados por impacto, no volcados técnicos sin contexto.
- Endurecer la plataforma Aplicar en producción las mismas prácticas que el escáner recomienda.
- Encadenar remediación Enlace explícito entre el informe y servicios de asesoría técnica tras el diagnóstico.
Arquitectura
Same-origin con BFF y pipeline desacoplado
Un BFF en Node.js/Express sirve la SPA React y actúa como proxy hacia la API de análisis. El navegador nunca contacta api.arminvera.cl ni conoce el secreto del pipeline.
Navegador
│
│ same-origin (HTTPS)
▼
BFF Node/Express ─────────────────────────────────────────┐
│ │
├── POST /api/v1/public/verisite-pipeline/stream ────►│ API upstream
│ (SSE · análisis en streaming) │ (pipeline de seguridad)
│ │
├── GET /api/report/:id/pdf ────────────────────────►│
│ │
├── POST /v1/analytics/events ───────────────────────►│ Analytics S2S
│ (X-API-KEY · solo servidor) │
│ │
└── /* estáticos (SPA React + Vite) │
▼
CDN PDF · cdn.arminvera.cl
Frontend
React 19, TypeScript, Tailwind CSS 4 y Radix UI. Stream SSE en cuatro fases, validación de formulario, cooldown por dominio y errores sanitizados hacia el cliente.
Backend y seguridad
Express con CSP, HSTS, rate limiting y proxy que inyecta secretos server-side, limita rutas por lista blanca y reenvía streams sin filtrar metadatos upstream.
Paso 1
Captura y validación
El usuario ingresa URL y correo. El sistema normaliza el dominio, valida formato y registra aceptación legal antes de iniciar el análisis.
Paso 2
Análisis pasivo vía SSE
El BFF abre un stream con la API upstream. El frontend recibe eventos de progreso y muestra cada fase con feedback visual en tiempo casi real.
Paso 3
Priorización de hallazgos
Los riesgos se clasifican por severidad (crítico, alto, medio, bajo) y se traducen a un score y grado comprensible para cualquier stakeholder.
Paso 4
Entrega del informe
El PDF queda disponible para visualización y descarga. Según el resultado, la UI orienta hacia remediación técnica o mejora continua.
- Proxy same-origin Elimina CORS, oculta secretos y unifica políticas de seguridad en un solo origen.
- Streaming SSE Reduce latencia percibida; cancelación controlada con timeouts de hasta 5 minutos.
- Analytics S2S Eventos de producto sin exponer API keys en el bundle del cliente.
-
Defensa en profundidad
Rate limit en servidor + cooldown UX en
localStoragepor hostname. - Build verificable Checklist de despliegue que audita ausencia de secretos en artefactos estáticos.
Seguridad
Practicamos lo que medimos
La plataforma implementa CSP restrictiva, deshabilita X-Powered-By, aplica referrer estricto, limita payloads y valida TRUST_PROXY en producción.
El escáner es pasivo por diseño: no explota vulnerabilidades, no modifica servidores analizados ni accede a zonas privadas. Marco legal claro para el usuario final.
Superficie reducida
Rutas en lista blanca; secretos confinados al runtime del servidor.
Resiliencia
Timeouts, abort en streams y degradación elegante ante fallos upstream.
Observabilidad
Eventos de producto vía API dedicada con rate limit y proyecto aislado.
Negocio
Más que un escáner: evaluación previa accionable
VeriSite demuestra capacidad para llevar un producto de concepto a producción con estándares enterprise: arquitectura desacoplada, seguridad desde el diseño y UX orientada a la acción posterior al informe.
- Punto de entrada técnico Captura equipos que ya reconocen riesgos en su infraestructura web.
- Prueba de competencia Evidencia dominio en full-stack, APIs, streaming y hardening.
- Puente a servicios Conecta diagnóstico gratuito con asesoría de remediación y consultoría.
Stack
Tecnologías y prácticas
Cliente
React 19 · TypeScript · Vite · Tailwind CSS 4 · Radix UI · React Hook Form + Zod · Framer Motion
Servidor
Node.js · Express · esbuild · SSE streaming · Rate limiting · Docker
Plataforma
api.arminvera.cl · cdn.arminvera.cl · Verisite Analytics · HTTPS / TLS · reverse proxy
Conclusión
Si tu organización necesita evaluar la seguridad web, diseñar arquitecturas resilientes o convertir un diagnóstico en un plan de acción concreto, en Armin Vera combinamos desarrollo, ciberseguridad aplicada y consultoría para entregar resultados medibles.