Caché offline de sitios proxy MITM

Caché Web Sin Conexión: Proxy MITM en Electron

Los desarrolladores a menudo enfrentan acceso poco confiable a documentación y sitios web. Una aplicación basada en un proxy MITM permite precargar recursos HTTPS, garantizando acceso sin conexión. Genera un certificado autofirmado para interceptar el tráfico y utiliza un Chromium integrado con un perfil aislado. En modo sin conexión, sirve respuestas en caché sin necesidad de conexión a la red.

La solución está dirigida a especialistas de nivel medio/avanzado: preserva la terminología y se centra en detalles técnicos de implementación.

Arquitectura y Antecedentes

El proyecto evolucionó desde un servidor proxy para migrar un sitio web corporativo en 2016. En ese momento, la tarea requería almacenar en caché contenido público sin acceso al backend. El proxy guardaba forzosamente todas las solicitudes HTTP/HTTPS, reemplazando la fuente original.

Las actualizaciones incluyeron TypeScript y ESLint. Cambiar a Electron permitió crear una aplicación de escritorio. Integrar agentes de IA aceleró el desarrollo de la interfaz de usuario, la gestión de certificados y la internacionalización.

Componentes clave:

• Proxy MITM para interceptar el tráfico.
• Chromium con un perfil personalizado.
• Almacenamiento de caché por espacios de nombres.

Principio de Intercepción y Almacenamiento en Caché

Al iniciar, se genera un certificado CA autofirmado. El usuario lo instala como confiable para omitir HTTPS. El navegador integrado enruta el tráfico a través del proxy.

// Pseudocódigo de la lógica del proxy
if (en línea) {
  proxy.interceptar(solicitud) -> caché.guardar(respuesta);
} else {
  return caché.obtener(solicitud);
}

El proxy analiza las solicitudes y guarda respuestas completas, incluyendo recursos. El modo sin conexión verifica la caché antes de hacer una solicitud de red.

Características para Desarrolladores

La aplicación minimiza la interfaz de usuario para un inicio rápido sin documentación. Capacidades clave:

• Almacenamiento automático de sitios web: Rastreador integrado usando Crawlee + Playwright. Descarga páginas recursivamente pero es sensible a SPAs (eventos de carga).
• Proxy SOCKS5: Soporte para proxies externos para evitar bloqueos.
• Espacios de nombres: Aísla la caché por proyectos o sitios (por ejemplo, documentación para Electron y PrimeReact).
• Exportar/importar: Serializa espacios de nombres en archivos para transferencia.

Ejemplo de escenario: almacenar en caché electron-vite.org y trabajar sin conexión con ejemplos de código y APIs.

Uso en Desarrollo

Ideal para:

• Documentación sin conexión (React, Vue, sitios específicos de frameworks).
• Archivar sitios antiguos antes de un rediseño.
• Trabajar en redes aisladas sin internet.
• Probar interfaces de usuario con respuestas fijas.

Limitaciones: el rastreador tiene dificultades con contenido JS dinámico. Se recomienda navegación manual para un almacenamiento preciso.

Transferir perfiles de Chrome es posible pero requiere precaución con la seguridad: exportar cookies y localStorage mediante --user-data-dir.

Puntos Clave

• MITM en Electron: Intercepción HTTPS mediante certificado autofirmado + Chromium.
• Aislamiento de caché: Los espacios de nombres evitan conflictos de recursos.
• Rastreador Crawlee/Playwright: Automatización con advertencias para SPAs.
• Interfaz minimalista: Sin instrucciones para usuarios experimentados.
• Exportación de archivos: Transferir caché entre máquinas.

Conclusión y Mejoras

La herramienta resuelve problemas reales: acceso estable a documentación mientras se viaja o bajo sanciones. Se planea un HUB para compartir espacios de nombres.

Preguntas para la comunidad: licencia (¿MIT/Apache?), importación segura de perfiles de Chrome.

— Editorial Team