Offline-Web-Caching MITM-Proxy Electron: Anleitung für Entwickler

Offline-Web-Caching: MITM-Proxy mit Electron

Entwickler stehen oft vor unzuverlässigem Zugang zu Dokumentationen und Websites. Eine Anwendung basierend auf einem MITM-Proxy ermöglicht das Vorauscachen von HTTPS-Ressourcen und gewährleistet Offline-Zugriff. Sie erstellt ein selbstsigniertes Zertifikat, um Traffic abzufangen, und nutzt einen eingebetteten Chromium-Browser mit isoliertem Profil. Im Offline-Modus liefert sie zwischengespeicherte Antworten ohne Netzwerkverbindung.

Die Lösung richtet sich an erfahrene Entwickler: Sie bewahrt Fachbegriffe und konzentriert sich auf technische Implementierungsdetails.

Architektur und Hintergrund

Das Projekt entwickelte sich aus einem Proxy-Server für die Migration einer Unternehmenswebsite im Jahr 2016. Damals erforderte die Aufgabe das Cachen öffentlicher Inhalte ohne Backend-Zugriff. Der Proxy speicherte zwangsweise alle HTTP/HTTPS-Anfragen und ersetzte die ursprüngliche Quelle.

Aktualisierungen umfassten TypeScript und ESLint. Der Wechsel zu Electron ermöglichte die Erstellung einer Desktop-Anwendung. Die Integration von KI-Agenten beschleunigte die UI-Entwicklung, Zertifikatsverwaltung und i18n.

Wichtige Komponenten:

• MITM-Proxy zur Traffic-Abfang.
• Chromium mit benutzerdefiniertem Profil.
• Cache-Speicherung nach Namespaces.

Abfang- und Caching-Prinzip

Beim Start wird ein selbstsigniertes CA-Zertifikat generiert. Der Nutzer installiert es als vertrauenswürdig, um HTTPS zu umgehen. Der eingebettete Browser leitet Traffic über den Proxy.

// Proxy-Logik Pseudocode
if (online) {
  proxy.intercept(request) -> cache.save(response);
} else {
  return cache.get(request);
}

Der Proxy analysiert Anfragen und speichert vollständige Antworten inklusive Ressourcen. Der Offline-Modus prüft den Cache, bevor eine Netzwerkanfrage gestellt wird.

Funktionen für Entwickler

Die Anwendung minimiert die UI für schnellen Start ohne Dokumentation. Wichtige Fähigkeiten:

• Automatisches Cachen von Websites: Eingebauter Crawler mit Crawlee + Playwright. Lädt Seiten rekursiv herunter, ist aber empfindlich gegenüber SPAs (Lade-Ereignisse).
• SOCKS5-Proxy: Unterstützung externer Proxies zur Umgehung von Blockaden.
• Namespaces: Isoliert Cache nach Projekten oder Sites (z.B. Docs für Electron und PrimeReact).
• Export/Import: Serialisiert Namespaces in Dateien zur Übertragung.

Beispielszenario: Cache electron-vite.org und arbeite offline mit Codebeispielen und APIs.

Einsatz in der Entwicklung

Ideal für:

• Offline-Dokumentation (React, Vue, frameworkspezifische Sites).
• Archivierung veralteter Sites vor einem Redesign.
• Arbeiten in isolierten Netzwerken ohne Internet.
• Testen von UI mit festen Antworten.

Einschränkungen: Der Crawler hat Schwierigkeiten mit dynamischem JS-Inhalt. Manuelle Navigation wird für präzises Caching empfohlen.

Das Übertragen von Chrome-Profilen ist möglich, erfordert aber Vorsicht bei der Sicherheit: Exportiere Cookies und localStorage via --user-data-dir.

Wichtige Punkte

• MITM mit Electron: HTTPS-Abfang via selbstsigniertem Zertifikat + Chromium.
• Cache-Isolierung: Namespaces verhindern Ressourcenkonflikte.
• Crawlee/Playwright-Crawler: Automatisierung mit Einschränkungen für SPAs.
• Minimalistische UI: Keine Anleitungen für erfahrene Nutzer.
• Dateiexport: Übertrage Cache zwischen Maschinen.

Fazit und Verbesserungen

Das Tool löst reale Probleme: stabiler Zugang zu Docs unterwegs oder unter Sanktionen. Ein HUB zum Teilen von Namespaces ist geplant.

Fragen an die Community: Lizenz (MIT/Apache?), sicherer Import von Chrome-Profilen.

— Editorial Team