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.

Diagrama de arquitectura
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 localStorage por 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.

Solicitar consultoría · Probar VeriSite Scanner