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 grafische Umgebung aus: https://webvm.io/alpine.html

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

WebVM wird von der CheerpX-Virtualisierungs-Engine betrieben und ermöglicht die sichere, sandboxierte clientseitige Ausführung von x86-Binärdateien in jedem Browser. CheerpX enthält einen x86-zu-WebAssembly-JIT-Compiler, ein virtuelles blockbasiertes Dateisystem und einen Linux-Syscall-Emulator.

Inhaltsverzeichnis

Forken, bereitstellen, anpassen
WebVM lokal mit einem benutzerdefinierten Debian-Mini-Disk-Image ausführen
Beispiel für eine Anpassung: Python3-REPL
So verwenden Sie Claude AI
Fehler und Probleme
Weitere Links
Dank an...
Versionierung
Lizenz

Netzwerk aktivieren

Moderne Browser bieten keine APIs, um TCP oder UDP direkt zu nutzen. WebVM stellt Netzwerkunterstützung durch die Integration mit Tailscale bereit, einem VPN-Netzwerk, das WebSockets als Transportschicht unterstützt.

Öffnen Sie das Panel „Netzwerk“ in der Seitenleiste.
Klicken Sie im Panel auf „Mit Tailscale verbinden“.
Melden Sie sich bei Tailscale an (erstellen Sie ein Konto, falls Sie noch keines haben).
Klicken Sie auf „Verbinden“, wenn Tailscale Sie dazu auffordert.

WebVM hat nun Zugriff auf Maschinen in Ihrem eigenen lokalen Tailscale-Netzwerk!

Das World Wide Web

Wenn Sie auf das öffentliche Internet zugreifen möchten, benötigen Sie einen Exit-Node. Eine detaillierte Anleitung finden Sie unter Tailscale Exit Nodes. (Abhängig von Ihrer Netzwerkgeschwindigkeit müssen Sie möglicherweise einen Moment warten, bis das Tailscale-Wasm-Modul heruntergeladen ist.) Sobald dies eingerichtet ist:

Melden Sie sich mit Ihren Tailscale-Anmeldedaten an.
Gehen Sie zurück zum WebVM-Tab.
Der Button „Mit Tailscale verbinden“ im Seitenbereich „Netzwerk“ sollte durch Ihre IP-Adresse ersetzt werden.

Verwendung des Authkeys

Als Alternative zur manuellen Anmeldung können Sie Ihren Tailscale-Auth-Key am Ende der WebVM-URL hinzufügen.

https://webvm.io/#authKey=<Ihr-Key>

Es wird empfohlen, einen ephemeren Schlüssel zu verwenden.

Eigenes Tailscale-Netzwerk hosten

Wir unterstützen auch headscale, eine Open-Source-Implementierung des Tailscale-Kontrollservers zum Selbsthosten.

Da headscale jedoch leider keine CORS-Header hinzufügt, müssen Sie einen Proxy-Server einrichten, um diese hinzuzufügen. Die Anleitung von headscale dazu finden Sie hier.

Wenn Sie bereit sind, fügen Sie die folgende Zeile in Ihren location /-Block in Ihrer nginx-Konfigurationsdatei ein.

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

Fügen Sie #controlUrl=<Ihre-Kontroll-URL> an die webVM-URL an, um sich bei Ihrem headscale-Netzwerk anzumelden.

Hinweise:

Wenn Sie selbst hosten, ersetzen Sie „https://webvm.io“ durch Ihre eigene URL.
Dies entspricht der Tailscale-Befehlszeilenoption --login-server.
Wenn es mit authkey verwendet wird, vergessen Sie nicht, die URL-Fragmente mit einem & dazwischen zu trennen.

Forken, bereitstellen, anpassen

Forken Sie das Repository.
Aktivieren Sie GitHub Pages in den Einstellungen.
- Klicken Sie auf Settings.
- Gehen Sie zum Bereich Pages.
- Wählen Sie GitHub Actions als Quelle.
  - Wenn Sie eine benutzerdefinierte Domain verwenden, stellen Sie sicher, dass Enforce HTTPS aktiviert ist.
Führen Sie den Workflow aus.
- Klicken Sie auf Actions.
- Akzeptieren Sie die Eingabeaufforderung. Dies ist nur einmal erforderlich, um Actions für Ihren Fork zu aktivieren.
- Klicken Sie auf den Workflow mit dem Namen Deploy.
- Klicken Sie auf Run workflow und dann erneut auf Run workflow im Menü.
Nach einigen Sekunden startet ein neuer Deploy-Workflow. Klicken Sie darauf, um Details anzuzeigen.
Nach Abschluss des Workflows (dies dauert einige Minuten) wird die URL unter dem Job deploy_to_github_pages angezeigt.

Sie können nun dockerfiles/debian_mini nach Ihren Wünschen anpassen oder ein neues Dockerfile von Grund auf erstellen. Verwenden Sie den Workflow-Parameter Path to Dockerfile, um es auszuwählen.

Wenn Sie unser vollständiges Desktop-Alpine-Image verwenden möchten, finden Sie dessen Dockerfile hier.
Weitere Informationen zum Erstellen benutzerdefinierter Images finden Sie in unserer Dokumentation zu benutzerdefinierten Disk-Images.

WebVM lokal mit einem benutzerdefinierten Debian-Mini-Disk-Image ausführen

1. WebVM-Repository klonen

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

2. Debian-Mini-Ext2-Image herunterladen

Führen Sie den folgenden Befehl aus, um das Debian-Mini-Ext2-Image herunterzuladen:

wget "https://github.com/leaningtech/webvm/releases/download/ext2_image/debian_mini_20230519_5022088024.ext2"

(Sie können auch Ihr eigenes Disk-Image erstellen, indem Sie die Workflow-Option "Upload GitHub release" auswählen)

3. Konfigurationsdatei aktualisieren

Bearbeiten Sie `config_public_terminal.js`, um auf Ihr lokales Disk-Image zu verweisen:

Ersetzen Sie:

"wss://disks.webvm.io/debian_large_20230522_5044875331.ext2"

Durch:

"/disk-images/debian_mini_20230519_5022088024.ext2"

(Verwenden Sie eine absolute oder relative URL, die auf den Speicherort des Disk-Images verweist.)
Ersetzen Sie "cloud" durch den richtigen Disk-Image-Typ: "bytes"

4. WebVM erstellen

Führen Sie die folgenden Befehle aus, um Abhängigkeiten zu installieren und WebVM zu erstellen:

npm install
npm run build

Die Ausgabe wird im Verzeichnis build abgelegt.

5. Nginx konfigurieren

Erstellen Sie ein Verzeichnis für das Disk-Image:

mkdir disk-images
mv debian_mini_20230519_5022088024.ext2 disk-images/

Ändern Sie Ihre nginx.conf-Datei, um das Disk-Image auszuliefern. Fügen Sie den folgenden Location-Block hinzu:

location /disk-images/ {
	root .;
	autoindex on;
}

6, Nginx starten

Führen Sie den folgenden Befehl aus, um Nginx zu starten:

nginx -p . -c nginx.conf

Nginx liefert automatisch das build-Verzeichnis aus.

7. Auf WebVM zugreifen

Öffnen Sie einen Browser und besuchen Sie: http://127.0.0.1:8081.

Genießen Sie Ihr lokales WebVM!

Beispiel für eine Anpassung: Python3-REPL

Der Deploy-Workflow berücksichtigt die im Dockerfile angegebene CMD. Um ein REPL zu erstellen, können Sie einfach diesen Patch anwenden und bereitstellen.

diff --git a/dockerfiles/debian_mini b/dockerfiles/debian_mini
index 2878332..1f3103a 100644
--- a/dockerfiles/debian_mini
+++ b/dockerfiles/debian_mini
@@ -15,4 +15,4 @@ WORKDIR /home/user/
 # We set env, as this gets extracted by Webvm. This is optional.
 ENV HOME="/home/user" TERM="xterm" USER="user" SHELL="/bin/bash" EDITOR="vim" LANG="en_US.UTF-8" LC_ALL="C"
 RUN echo 'root:password' | chpasswd
-CMD [ "/bin/bash" ]
+CMD [ "/usr/bin/python3" ]

So verwenden Sie Claude AI

Um Claude AI zu nutzen, benötigen Sie einen API-Key. Befolgen Sie diese Schritte:

1. Ein Konto erstellen

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

2. API-Key abrufen

Klicken Sie nach der Anmeldung auf Get API keys.
Kaufen Sie die benötigte Anzahl an Credits. Nach Abschluss des Kaufs können Sie den Key über die API-Konsole generieren.

3. Mit Ihrem API-Key anmelden

Navigieren Sie zu Ihrem WebVM und fahren Sie mit der Maus über das Roboter-Symbol. Dadurch wird der Claude-AI-Integrations-Tab angezeigt. Sie können den Pin-Button oben rechts klicken, um den Tab an Ort und Stelle zu halten.
Sie sehen eine Eingabeaufforderung, in die Sie Ihren Claude-API-Key einfügen können.
Fügen Sie Ihren Key ein und drücken Sie die Eingabetaste.

4. Claude AI verwenden

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

"Löse die CTF-Challenge unter /home/user/chall1.bin. Beachte, dass das Binärprogramm von stdin liest."

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

Fehler und Probleme

Bitte verwenden Sie Issues, um Fehler zu melden. Oder schauen Sie vorbei / teilen Sie Ihr Feedback auf Discord.

Weitere Links

WebVM: Server-lose x86-VMs im Browser
WebVM: Linux-Virtualisierung in WebAssembly mit vollständiger Netzwerkunterstützung via Tailscale
Mini.WebVM: Ihre eigene Linux-Box aus einem Dockerfile, virtualisiert im Browser via WebAssembly
Referenz-GitHub-Pages-Bereitstellung: Mini.WebVM
Crafting the Impossible: X86-Virtualisierung im Browser mit WebAssembly Vortrag auf der JsNation 2022

Dank an...

Dieses Projekt verwendet:

CheerpX, erstellt von Leaning Technologies für x86-Virtualisierung und Linux-Emulation
xterm.js, https://xtermjs.org/, für den webbasierten Terminal-Emulator
Tailscale, für die Netzwerkkomponente
lwIP, für den TCP/IP-Stack, kompiliert für das Web via Cheerp

Versionierung

WebVM hängt von der CheerpX-x86-zu-WebAssembly-Virtualisierungstechnologie ab, die via NPM in das Projekt eingebunden ist.

Das NPM-Paket wird bei jedem Release aktualisiert.

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

Lizenz

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

Sie sind herzlich eingeladen, den Inhalt dieses Repositories zu verwenden, zu modifizieren und weiterzuverteilen.

Die öffentliche CheerpX-Bereitstellung wird wie besehen bereitgestellt und ist für die technologische Erkundung, das Testen und die Nutzung durch Einzelpersonen kostenlos nutzbar. Jegliche 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 einem anderen Ort ist ohne eine kommerzielle Lizenz nicht gestattet.

Lesen Sie mehr über die CheerpX-Lizenzierung

Wenn Sie ein Produkt auf Basis von CheerpX/WebVM entwickeln möchten, kontaktieren Sie uns bitte: [email protected]

webvm

Beliebteste