Microfrontends con Webpack Module Federation.pdf

1. Microfrontends con
Webpack Module Federation
Víctor Enrique Elena Redondo

2. Qué son los
Microfrontends
(MFE)
Arquitectura de
aplicación
web que la divide
en múltiples
aplicaciones más
pequeñas e
independientes
Cada una
responsable de
una parte del
Frontend
Cada MFE puede
desarrollarse,
desplegarse y
mantenerse de
forma autónoma,
por ejemplo, cada
una por un equipo
de desarrollo.
Pueden ser
independientes en
tecnología dentro
de la misma SPA

3. Arquitectura
Monolítica
versus MFE

4. Comunicación entre MFE
A nivel técnico, suelen comunicarse mediante
eventos o props, se integran en tiempo de
compilación o en runtime (por ejemplo, con
iframes, Web Components o frameworks como
Module Federation en Webpack), y permiten que
equipos trabajen en paralelo reduciendo
dependencias entre ellos.

5. Ejemplo práctico: Pasarela de
pagos con Module Federation
VENTAJAS EN SEGURIDAD:
Aislamiento de contexto
• El microfrontend de la pasarela de pagos puede
estar totalmente separado del resto de la
aplicación, evitando que otros módulos tengan
acceso directo al DOM, estado o lógica.
• Esto reduce la superficie de ataque en caso de que
otro microfrontend sufra una vulnerabilidad como
XSS.

6. Ejemplo práctico: Pasarela de
pagos con Module Federation
Carga selectiva y controlada
• Con Module Federation puedes exponer solo los
módulos estrictamente necesarios (exposes) y
consumir solo los que han sido verificados.
• Esto permite que el microfrontend de pagos no
exponga ninguna función interna hacia fuera y
solo consuma código auditado.

7. Ejemplo
de
configuración
(webpack.config.js)

8. Ejemplo práctico: Pasarela de
pagos con Module Federation
Actualizaciones y parches de seguridad
independientes
• Si la pasarela requiere actualizar librerías críticas
se puede desplegar un nuevo build de ese
microfrontend sin tocar el resto de la app.

9. Ejemplo práctico: Pasarela de
pagos con Module Federation
Validación de origen en runtime
• Al cargar el microfrontend de pagos
dinámicamente, se puede configurar para que solo
se acepte desde dominios y versiones firmadas o
verificadas, previniendo inyecciones de módulos
maliciosos.

10. Ejemplo práctico: Pasarela de
pagos con Module Federation
Menor riesgo de fuga de datos
• El código de pagos no necesita tener acceso a
datos de otras partes de la app si no es
estrictamente necesario.
• Con un diseño de API bien controlado, el
microfrontend de pagos se convierte casi en una
“caja negra” segura.

11. Conclusiones
Module Federation te permite encapsular
la pasarela de pagos como un módulo
aislado, cargado solo desde una fuente
confiable, con mínima exposición y
capacidad de actualización independiente,
reduciendo mucho el riesgo de ataques y
fugas.