Cache hors ligne des sites proxy MITM

Mise en cache web hors ligne : Proxy MITM sur Electron

Les développeurs sont souvent confrontés à un accès peu fiable à la documentation et aux sites web. Une application basée sur un proxy MITM permet de pré-cacher les ressources HTTPS, garantissant un accès hors ligne. Elle génère un certificat auto-signé pour intercepter le trafic et utilise un Chromium embarqué avec un profil isolé. En mode hors ligne, elle sert les réponses mises en cache sans connexion réseau.

La solution cible les spécialistes de niveau intermédiaire/senior : elle préserve la terminologie et se concentre sur les détails techniques de mise en œuvre.

Architecture et contexte

Le projet a évolué à partir d'un serveur proxy pour migrer un site web d'entreprise en 2016. À l'époque, la tâche nécessitait de mettre en cache du contenu public sans accès au backend. Le proxy enregistrait de force toutes les requêtes HTTP/HTTPS, remplaçant la source originale.

Les mises à jour ont inclus TypeScript et ESLint. Le passage à Electron a permis la création d'une application de bureau. L'intégration d'agents IA a accéléré le développement de l'interface utilisateur, la gestion des certificats et l'i18n.

Composants clés :

• Proxy MITM pour l'interception du trafic.
• Chromium avec un profil personnalisé.
• Stockage du cache par espaces de noms.

Principe d'interception et de mise en cache

Au lancement, un certificat CA auto-signé est généré. L'utilisateur l'installe comme approuvé pour contourner HTTPS. Le navigateur embarqué achemine le trafic via le proxy.

// Logique proxy en pseudocode
if (en ligne) {
  proxy.intercept(requête) -> cache.save(réponse);
} else {
  return cache.get(requête);
}

Le proxy analyse les requêtes et enregistre les réponses complètes, y compris les ressources. Le mode hors ligne vérifie le cache avant de faire une requête réseau.

Fonctionnalités pour les développeurs

L'application minimise l'interface utilisateur pour un démarrage rapide sans documentation. Capacités clés :

• Mise en cache automatique des sites : Crawler intégré utilisant Crawlee + Playwright. Télécharge récursivement les pages mais est sensible aux SPAs (événements de chargement).
• Proxy SOCKS5 : Prise en charge des proxies externes pour contourner les blocages.
• Espaces de noms : Isoler le cache par projets ou sites (par exemple, docs pour Electron et PrimeReact).
• Export/import : Sérialiser les espaces de noms en fichiers pour le transfert.

Exemple de scénario : mettre en cache electron-vite.org et travailler hors ligne avec des exemples de code et des APIs.

Utilisation en développement

Idéal pour :

• Documentation hors ligne (React, Vue, sites spécifiques aux frameworks).
• Archivage de sites anciens avant une refonte.
• Travail dans des réseaux isolés sans internet.
• Test d'interface utilisateur avec des réponses fixes.

Limitations : le crawler a du mal avec le contenu JS dynamique. Une navigation manuelle est recommandée pour une mise en cache précise.

Le transfert de profils Chrome est possible mais nécessite de la prudence en matière de sécurité : exporter les cookies et le localStorage via --user-data-dir.

Points clés

• MITM sur Electron : Interception HTTPS via certificat auto-signé + Chromium.
• Isolation du cache : Les espaces de noms évitent les conflits de ressources.
• Crawler Crawlee/Playwright : Automatisation avec des mises en garde pour les SPAs.
• Interface utilisateur minimaliste : Pas d'instructions pour les utilisateurs expérimentés.
• Exportation de fichiers : Transférer le cache entre machines.

Conclusion et améliorations

L'outil résout des problèmes réels : accès stable à la documentation lors de voyages ou sous sanctions. Un HUB pour partager les espaces de noms est prévu.

Questions pour la communauté : licence (MIT/Apache ?), importation sécurisée des profils Chrome.

— Editorial Team