Fortalecimiento de una app en Vercel: CSP, CORS y Service Workers sin problemas
En este artículo resumo la configuración práctica que usamos para lanzar el MVP de Pocket Portfolio manteniendo rendimiento y seguridad en Vercel y Firebase. Idea principal: restringir orígenes de terceros, cachear la interfaz de usuario no los datos financieros y nunca permitir que el service worker tome el control de rutas api.
Política de seguridad de contenido CSP: aplica la cabecera Content Security Policy desde vercel.json o desde el servidor. Permite exactamente lo que Firebase Auth necesita como apis.google.com, accounts.google.com y gstatic y las CDNs que uses intencionalmente. Un ejemplo de directivas sería algo como default-src self; script-src self unsafe-inline https://cdn.tailwindcss.com https://cdn.jsdelivr.net https://www.gstatic.com https://*.googleapis.com https://apis.google.com https://accounts.google.com; img-src self data: blob: https:; style-src self unsafe-inline; font-src self data: https:; connect-src self https://www.googleapis.com https://*.googleapis.com https://securetoken.google.com https://identitytoolkit.googleapis.com https://firestore.googleapis.com https://*.firebaseio.com https://firebasestorage.googleapis.com https://apis.google.com https://accounts.google.com; frame-src self https://*.google.com https://accounts.google.com https://*.firebaseapp.com https://*.web.app; frame-ancestors none; base-uri self; form-action self; object-src none; upgrade-insecure-requests. Beneficio: bloquea cargas de scripts inesperadas y limita el impacto de posibles ataques XSS, además de permitir que los popups e iframes de Google Sign in funcionen en producción sin errores 400 misteriosos.
CORS para APIs Serverless o Edge: expone solo lo que el navegador necesita y solo a tu sitio. Establece Access-Control-Allow-Origin al origen de producción de tu dominio y agrega Vary Origin. Permite solo los métodos necesarios y los encabezados requeridos como Content-Type y Authorization. Maneja la preflight request OPTIONS devolviendo 204 y asegúrate de validar entradas como un ticker antes de consultar servicios externos. Añade cabeceras de caché para respuestas no críticas como Cache-Control public, max-age=5, stale-while-revalidate=25 para reducir latencia sin servir datos obsoletos por mucho tiempo.
Service Worker que no rompa la app: cachea el shell de la app como CSS, JS e iconos y las rutas de navegación dentro del scope app. Mantén el alcance del SW estrecho verificando origen y pathname antes de interceptar. Nunca interceptes rutas que empiecen por /api/. Estrategias recomendadas: cache first para activos estáticos como archivos .css, .js, .svg y .png; network first con fallback a caché para navegaciones GET y servir index.html como fallback offline. Registra el service worker solo en producción, evitando localhost y 127.0.0.1 para que no complique el desarrollo.
Endurecimiento adicional: añade X-Content-Type-Options nosniff; Referrer-Policy strict-origin-when-cross-origin; Permissions-Policy bloqueando geolocation, microphone y camera si no se usan; aplica Cache-Control public, max-age=31536000, immutable para activos con fingerprint; y establece rate limits en endpoints calientes con middleware en Edge o mediante utilidades específicas. Estos pasos reducen la superficie de ataque y mejoran el rendimiento.
Sobre prácticas de implementación: documenta bien las dependencias de terceros, revisa los orígenes permitidos en CSP después de cada cambio de librería y verifica que el service worker y las reglas CORS no expongan datos sensibles. Monitorea logs y usa análisis de seguridad automáticos en CI para detectar regresiones.
Quiénes somos y cómo te ayudamos: en Q2BSTUDIO somos una empresa de desarrollo de software que crea aplicaciones a medida y software a medida con enfoque en seguridad y rendimiento. Ofrecemos servicios de arquitectura cloud y despliegue en plataformas como AWS y Azure, puedes conocer más sobre nuestros servicios cloud en servicios cloud AWS y Azure. Además somos especialistas en ciberseguridad, pentesting y protección de aplicaciones, descubre nuestro enfoque en ciberseguridad y pentesting. Integramos inteligencia artificial y soluciones de ia para empresas, desarrollamos agentes IA y ofrecemos servicios de inteligencia de negocio y Power BI para convertir datos en decisiones.
Palabras clave y capacidades: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi. Si buscas reforzar la seguridad de tu app desplegada en Vercel o migrarla a una arquitectura más robusta con mejores prácticas de CSP, CORS y service workers, en Q2BSTUDIO podemos asesorarte y ejecutar la solución completa.
Nota final: la seguridad es un balance entre protección y usabilidad. Bloquea orígenes de terceros innecesarios, cachea la UI y no los datos críticos, y evita que el service worker intercepte rutas api. Estas pautas te ayudarán a mantener tu aplicación rápida y segura en producción.