WebVM

Dieses Repository enthält den Quellcode für https://webvm.io, eine Linux-VM, die in Ihrem Browser läuft.

Probieren Sie die neue Alpine-/Xorg-/i3-Grafikumgebung aus: https://webvm.io/alpine.html

Was ist WebVM?

WebVM ist eine serverlose virtuelle Umgebung, die vollständig clientseitig in HTML5/WebAssembly läuft. Es ist für Linux-ABI-Kompatibilität ausgelegt und führt eine unveränderte Debian-Distribution mit vielen nativen Entwicklungswerkzeugen aus.

WebVM wird von der CheerpX-Virtualisierungs-Engine betrieben, die Folgendes bietet:

• x86-zu-WebAssembly-JIT-Compiler
• Virtuelles blockbasiertes Dateisystem
• Linux-Syscall-Emulator
• Sichere, sandboxierte clientseitige Ausführung

Inhaltsverzeichnis

• Netzwerk
• Entwicklung & Anpassung
  • Auf GitHub Pages bereitstellen
  • Lokales Bereitstellen & Image-Konfiguration
• Claude-AI-Integration
• Community & Unterstützung
• Mehr erfahren
• Lizenz

[!NOTE] Besuchen Sie https://webvm.io, um sofort in Ihrem Browser zu starten. Keine Einrichtung erforderlich.

Für lokale Einrichtung, benutzerdefinierte Image-Erstellung und Fork/Deploy-Anleitung siehe Entwicklung & Anpassung.

Netzwerk

WebVM unterstützt die Tailscale-Integration. So kann Ihre Browser-VM Ihr privates Netzwerk erreichen und, mit einem Exit-Node, auch das öffentliche Internet.

[!NOTE] Einige Low-Level-Netzwerkoperationen (insbesondere ICMP, das von ping verwendet wird) sind in dieser Umgebung derzeit nicht verfügbar. Verwenden Sie für Konnektivitätsprüfungen curl oder wget.

Lokales Netzwerk

1. Öffnen Sie das Bedienfeld „Netzwerk“ in der Seitenleiste
2. Klicken Sie auf „Mit Tailscale verbinden“
3. Melden Sie sich an (erstellen Sie ggf. ein kostenloses Konto auf tailscale.com)
4. Klicken Sie auf „Verbinden“, wenn Sie dazu aufgefordert werden

WebVM hat jetzt Zugriff auf alle Maschinen in Ihrem Tailscale-Netzwerk!

Tipps zur Internetnutzung

[!TIP] Bei langsameren Verbindungen kann es zu einer kurzen Verzögerung vor der Initialisierung kommen. Der Verbindungsstatus wird als farbiger Punkt auf der Schaltfläche angezeigt: Orange = lokales Netzwerk, Grün = global/Internet. Der Schaltflächentext zeigt nach der Verbindung Ihre Tailscale-IP-Adresse an.

Um aus WebVM auf das öffentliche Internet zuzugreifen, richten Sie auf einem anderen Gerät in Ihrem Tailscale-Netzwerk einen Exit-Node ein:

1. Folgen Sie der Tailscale-Exit-Node-Schnellstartanleitung (Abschnitte: „Gerät als Exit-Node bewerben“)
2. WebVM verwendet den Exit-Node automatisch, sobald dieser beworben wird

Verwenden eines Authentifizierungsschlüssels

Als Alternative zur interaktiven Anmeldung fügen Sie Ihren Tailscale-Authentifizierungsschlüssel zum URL-Fragment hinzu:

https://webvm.io/#authKey=<your-ephemeral-key>

Dies entspricht der Option --login-server von Tailscale.

[!TIP] Wenn Sie auch einen benutzerdefinierten Steuerungsserver benötigen, fügen Sie controlUrl im selben URL-Fragment hinzu und trennen Sie die Werte mit &, z. B.: #authKey=...&controlUrl=....

Selbsthosting von Tailscale mit Headscale

Wir unterstützen auch headscale, eine selbstgehostete Open-Source-Implementierung des Tailscale-Steuerungsservers. Da Headscale standardmäßig keine CORS-Header hinzufügt, benötigen Sie einen Proxy davor. Siehe die Headscale-Reverse-Proxy-Setup-Dokumentation für ein Beispiel.

Fügen Sie dann die folgende Zeile zu Ihrem location /-Block in Ihrer nginx-Konfigurationsdatei hinzu.

if ($http_origin = "https://yourdomain.com") {
    add_header 'Access-Control-Allow-Origin' "$http_origin";
    add_header 'Access-Control-Allow-Credentials' 'true' always;
}

Greifen Sie dann wie folgt auf WebVM zu:

https://yourdomain.com/#controlUrl=<your-headscale-url>

Entwicklung & Anpassung

[!NOTE] Benutzer haben standardmäßig Root-Rechte. sudo ist nicht installiert, kann aber bei Bedarf einfach zum Dockerfile hinzugefügt werden.

Auf GitHub Pages bereitstellen

Dies ist ein einfacher, anfängerfreundlicher Workflow. Für lokales Hosting und Anpassung siehe unten Lokales Bereitstellen & Image-Konfiguration.

Forken Sie das WebVM-Repository, um Ihre eigene Version auf GitHub Pages bereitzustellen:

1. Repository forken
2. GitHub Pages aktivieren über das geforkte Repository in den Einstellungen → Pages mit „GitHub Actions“ als Quelle
3. Den Deploy-Workflow ausführen unter Actions
4. Öffnen Sie nach Abschluss die URL, die unter dem Job deploy_to_github_pages angezeigt wird

Der gleiche Deploy-Workflow erstellt auch benutzerdefinierte .ext2-Datenträger-Images aus einem Dockerfile. Sie können ihn auf dockerfiles/debian_mini oder ein anderes Dockerfile verweisen und das Ergebnis entweder als GitHub-Release-Asset veröffentlichen oder den Pages-Build aus Ihrem Fork bereitstellen.

[!NOTE] dockerfiles/debian_large ist ein zu großes Image für GitHub Pages.

Lokales Bereitstellen & Image-Konfiguration

1. Repository klonen

git clone https://github.com/leaningtech/webvm.git
cd webvm

2. Legen Sie Ihr Image in custom-disk-images/ ab

Dieses Repository enthält ein persistentes Verzeichnis custom-disk-images/ für lokale .ext2-Dateien.

Um das offizielle Debian-Mini-Image zu verwenden, laden Sie es von den Releases herunter:

debian_mini_20230519_5022088024.ext2

Sie können auch ein selbst erstelltes Image kopieren.

3. WebVM auf Ihr lokales Image verweisen

Bearbeiten Sie config_public_terminal.js:

export const diskImageUrl =
  "/custom-disk-images/debian_mini_20230519_5022088024.ext2";
export const diskImageType = "bytes";

4. Abhängigkeiten installieren und erstellen

npm install
npm run build

5. Nginx starten und WebVM öffnen

nginx -p . -c nginx.conf

Öffnen Sie dann http://127.0.0.1:8081 und genießen Sie Ihr lokales WebVM!

Für die vollständige Alpine-Desktop-Umgebung siehe leaningtech/alpine-image.

Weitere Details finden Sie in der CheerpX-Dokumentation zu benutzerdefinierten Images.

[!TIP] Für Python3-REPL berücksichtigt der Deploy-Workflow das im Dockerfile angegebene CMD.

Um eine REPL zu erstellen, ändern Sie einfach CMD [ "/bin/bash" ] in CMD [ "/usr/bin/python3" ] und stellen Sie bereit.

Claude-AI-Integration

Um auf Claude AI zuzugreifen, benötigen Sie einen API-Schlüssel. Folgen Sie diesen Schritten, um loszulegen:

1. Konto erstellen

• Besuchen Sie die Anthropic Console und melden Sie sich mit Ihrer E-Mail an. Sie erhalten einen Anmeldelink zur Anthropic Console.

2. API-Schlüssel abrufen

• Nach der Anmeldung navigieren Sie zu API-Schlüssel abrufen.
• Kaufen Sie die benötigte Menge an Credits. Nach Abschluss des Kaufs können Sie den Schlüssel über die API-Konsole generieren.

3. Mit Ihrem API-Schlüssel anmelden

• Navigieren Sie zu Ihrem WebVM und fahren Sie mit der Maus über das Roboter-Symbol. Dadurch wird der Claude-AI-Integration-Tab angezeigt. Sie können den Pin-Button oben rechts anklicken, um den Tab dauerhaft zu öffnen.
• Sie sehen eine Eingabeaufforderung, in die Sie Ihren Claude-API-Schlüssel einfügen können.

4. Claude AI verwenden

• Sobald Ihr API-Schlüssel eingegeben ist, können Sie mit Claude AI interagieren, indem Sie Fragen stellen wie:

„Löse die CTF-Herausforderung in /home/user/chall1.bin. Beachte, dass die Binärdatei von stdin liest.“

Wichtig: Ihr API-Schlüssel ist privat und sollte niemals weitergegeben werden. Wir haben keinen Zugriff auf Ihren Schlüssel, er wird nur lokal in Ihrem Browser gespeichert.

Community & Unterstützung

Probleme melden: Nutzen Sie GitHub Issues, um Fehler zu melden oder Funktionen anzufragen.

Chatten Sie mit uns: Treten Sie unserer Discord-Community bei, um über WebVM zu diskutieren, Ideen auszutauschen und Hilfe zu erhalten.

Mehr erfahren

Artikel & Ressourcen:

• WebVM: Serverlose x86-VMs im Browser
• WebVM: Linux-Virtualisierung in WebAssembly mit vollständiger Vernetzung über Tailscale
• Mini.WebVM: Ihre eigene Linux-Box aus einem Dockerfile, virtualisiert im Browser über WebAssembly
• Das Unmögliche erschaffen: X86-Virtualisierung im Browser mit WebAssembly — Vortrag auf der JsNation 2022

Beispielbereitstellung:

• Mini.WebVM-Referenz — Ein laufendes Beispiel, das auf GitHub Pages bereitgestellt wurde

Technologie hinter WebVM:

Dieses Projekt wird angetrieben von:

• CheerpX — x86-zu-WebAssembly-JIT-Compiler | von Leaning Technologies
• xterm.js — Webbasierter Terminal-Emulator
• Tailscale — VPN-Netzwerkschicht
• lwIP — TCP/IP-Stack, kompiliert für das Web via Cheerp

Versionierung:

WebVM verwendet das CheerpX NPM-Paket, das bei jeder Veröffentlichung aktualisiert wird.

Jeder Build ist unveränderlich. Wenn eine bestimmte Version heute für Sie gut funktioniert, wird sie für immer funktionieren.

Lizenz

WebVM wird unter der Apache License, Version 2.0, veröffentlicht.

Sie sind herzlich eingeladen, die Inhalte dieses Repositorys zu verwenden, zu modifizieren und weiterzuverbreiten.

Die öffentliche CheerpX-Bereitstellung wird wie besehen zur Verfügung gestellt und ist kostenlos nutzbar für technologische Erkundung, Tests und Nutzung durch Einzelpersonen. Jede andere Nutzung durch Organisationen, einschließlich gemeinnütziger Organisationen, akademischer Einrichtungen und des öffentlichen Sektors, erfordert eine Lizenz. Das Herunterladen eines CheerpX-Builds zum Zweck des Hostings an anderer Stelle ist ohne kommerzielle Lizenz nicht gestattet.

Lesen Sie hier mehr über unsere Lizenzierungspraktiken.

Wenn Sie ein Produkt auf Basis von CheerpX/WebVM entwickeln möchten, sehen Sie sich bitte unsere anderen Lizenzoptionen an: CheerpX-Lizenzierung oder kontaktieren Sie uns: [email protected]