WebVM

Ce dépôt héberge le code source de https://webvm.io, une machine virtuelle Linux qui s'exécute dans votre navigateur.

Essayez le nouvel environnement graphique Alpine / Xorg / i3 : https://webvm.io/alpine.html

WebVM est un environnement virtuel sans serveur fonctionnant entièrement côté client en HTML5/WebAssembly. Il est conçu pour être compatible avec l'ABI Linux. Il exécute une distribution Debian non modifiée, incluant de nombreuses chaînes d'outils de développement natifs.

WebVM est propulsé par le moteur de virtualisation CheerpX et permet une exécution côté client sécurisée et isolée de binaires x86 sur n'importe quel navigateur. CheerpX inclut un compilateur JIT x86 vers WebAssembly, un système de fichiers virtuel basé sur des blocs et un émulateur d'appels système Linux.

Table des matières

Fork, déployer, personnaliser
Exécuter WebVM localement avec une image disque Debian mini personnalisée
Exemple de personnalisation : REPL Python3
Comment utiliser Claude AI
Bugs et problèmes
Plus de liens
Remerciements à...
Gestion des versions
Licence

Activer le réseau

Les navigateurs modernes ne fournissent pas d'API pour utiliser directement TCP ou UDP. WebVM offre un support réseau en s'intégrant à Tailscale, un réseau VPN qui utilise WebSockets comme couche de transport.

Ouvrez le panneau « Réseau » depuis la barre latérale
Cliquez sur « Connect to Tailscale » dans le panneau
Connectez-vous à Tailscale (créez un compte si vous n'en avez pas)
Cliquez sur « Connect » lorsque Tailscale vous le demande

WebVM a désormais accès aux machines de votre propre réseau local Tailscale !

Le World Wide Web

Si vous souhaitez accéder à l'internet public, vous aurez besoin d'un nœud de sortie. Voir Tailscale Exit Nodes pour des instructions détaillées. (En fonction de votre vitesse réseau, vous devrez peut-être attendre quelques instants que le module Wasm de Tailscale soit téléchargé.) Une fois cela configuré :

Connectez-vous avec vos identifiants Tailscale.
Revenez à l'onglet WebVM.
Le bouton Connect to Tailscale dans le panneau latéral Réseau devrait être remplacé par votre adresse IP.

Utilisation de authkey

Comme alternative à la connexion manuelle, vous pouvez ajouter votre clé d'authentification tailscale à la fin de l'URL webvm.

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

Il est recommandé d'utiliser une clé éphémère.

Hébergement autonome de votre réseau tailscale

Nous supportons également headscale, une implémentation open source auto-hébergée du serveur de contrôle Tailscale.

Malheureusement, headscale ne supporte pas l'ajout d'en-têtes CORS. Vous devrez configurer un serveur proxy pour les ajouter. Les instructions de headscale à ce sujet se trouvent ici.

Une fois prêt, ajoutez la ligne suivante à votre bloc location / dans votre fichier de configuration nginx.

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

Pour vous connecter à votre réseau headscale, ajoutez #controlUrl=<your-control-url> à l'url webVM.

Remarques :

Si vous auto-hébergez, remplacez « https://webvm.io » par votre propre URL.
Cela équivaut à l'option de ligne de commande --login-server de tailscale.
Si utilisé avec authkey, n'oubliez pas de séparer les fragments d'URL par un &.

Fork, déployer, personnaliser

Forkez le dépôt.
Activez Github Pages dans les paramètres.
- Cliquez sur Settings.
- Allez dans la section Pages.
- Sélectionnez Github Actions comme source.
  - Si vous utilisez un domaine personnalisé, assurez-vous que Enforce HTTPS est activé.
Exécutez le workflow.
- Cliquez sur Actions.
- Acceptez l'invite. Cela n'est nécessaire qu'une seule fois pour activer Actions pour votre fork.
- Cliquez sur le workflow nommé Deploy.
- Cliquez sur Run workflow puis à nouveau Run workflow dans le menu.
Après quelques secondes, un nouveau workflow Deploy démarrera, cliquez dessus pour voir les détails.
Une fois le workflow terminé, ce qui prend quelques minutes, il affichera l'URL sous le job deploy_to_github_pages.

Vous pouvez maintenant personnaliser dockerfiles/debian_mini selon vos besoins, ou créer un nouveau Dockerfile à partir de zéro. Utilisez le paramètre de workflow Path to Dockerfile pour le sélectionner.

Si vous souhaitez utiliser notre image Alpine complète pour bureau, vous trouverez son dockerfile ici.
Pour plus d'informations sur la création d'images personnalisées, consultez notre documentation sur les images de disque personnalisées.

Exécuter WebVM localement avec une image disque Debian mini personnalisée

1. Clonez le dépôt WebVM

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

2. Téléchargez l'image Debian mini Ext2

Exécutez la commande suivante pour télécharger l'image Debian mini Ext2 :

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

(Vous pouvez également construire votre propre image disque en sélectionnant l'option de workflow « Upload GitHub release »)

3. Mettez à jour le fichier de configuration

Modifiez `config_public_terminal.js` pour référencer votre image disque locale :

Remplacez :

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

Par :

"/disk-images/debian_mini_20230519_5022088024.ext2"

(Utilisez une URL absolue ou relative pointant vers l'emplacement de l'image disque.)
Remplacez "cloud" par le type d'image disque correct : "bytes"

4. Construisez WebVM

Exécutez les commandes suivantes pour installer les dépendances et construire WebVM :

npm install
npm run build

La sortie sera placée dans le répertoire build.

5. Configurez Nginx

Créez un répertoire pour l'image disque :

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

Modifiez votre fichier nginx.conf pour servir l'image disque. Ajoutez le bloc d'emplacement suivant :

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

6. Démarrez Nginx

Exécutez la commande suivante pour démarrer Nginx :

nginx -p . -c nginx.conf

Nginx servira automatiquement le répertoire build.

7. Accédez à WebVM

Ouvrez un navigateur et visitez : http://127.0.0.1:8081.

Profitez de votre WebVM local !

Exemple de personnalisation : REPL Python3

Le workflow Deploy prend en compte le CMD spécifié dans le Dockerfile. Pour construire un REPL, vous pouvez simplement appliquer ce patch et déployer.

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" ]

Comment utiliser Claude AI

Pour accéder à Claude AI, vous avez besoin d'une clé API. Suivez ces étapes pour commencer :

1. Créez un compte

Visitez la Console Anthropic et inscrivez-vous avec votre e-mail. Vous recevrez un lien de connexion vers la Console Anthropic.

2. Obtenez votre clé API

Une fois connecté, allez dans Get API keys.
Achetez le nombre de crédits dont vous avez besoin. Après avoir effectué l'achat, vous pourrez générer la clé via la console API.

3. Connectez-vous avec votre clé API

Accédez à votre WebVM et survolez l'icône du robot. Cela affichera l'onglet d'intégration Claude AI. Pour plus de commodité, vous pouvez cliquer sur le bouton d'épingle dans le coin supérieur droit pour maintenir l'onglet en place.
Vous verrez une invite où vous pouvez insérer votre clé API Claude.
Insérez votre clé et appuyez sur Entrée.

4. Commencez à utiliser Claude AI

Une fois votre clé API saisie, vous pouvez commencer à interagir avec Claude AI en posant des questions comme :

« Résolvez le défi CTF dans /home/user/chall1.bin. Notez que le binaire lit depuis stdin. »

Important : Votre clé API est privée et ne doit jamais être partagée. Nous n'avons pas accès à votre clé, qui est stockée uniquement localement dans votre navigateur.

Bugs et problèmes

Veuillez utiliser Issues pour signaler tout bug. Ou venez dire bonjour / partager vos commentaires sur Discord.

Plus de liens

WebVM : machines virtuelles x86 sans serveur dans le navigateur
WebVM : virtualisation Linux en WebAssembly avec réseau complet via Tailscale
Mini.WebVM : votre propre boîte Linux à partir d'un Dockerfile, virtualisée dans le navigateur via WebAssembly
Déploiement de référence GitHub Pages : Mini.WebVM
Crafting the Impossible: X86 Virtualization in the Browser with WebAssembly Conférence à JsNation 2022

Remerciements à...

Ce projet dépend de :

CheerpX, créé par Leaning Technologies pour la virtualisation x86 et l'émulation Linux
xterm.js, https://xtermjs.org/, pour fournir l'émulateur de terminal Web
Tailscale, pour le composant réseau
lwIP, pour la pile TCP/IP, compilée pour le Web via Cheerp

Gestion des versions

WebVM dépend de la technologie de virtualisation x86 vers WebAssembly CheerpX, qui est incluse dans le projet via NPM.

Le package NPM est mis à jour à chaque version.

Chaque build est immuable ; si une version spécifique fonctionne bien pour vous aujourd'hui, elle continuera de fonctionner pour toujours.

Licence

WebVM est publié sous la licence Apache, version 2.0.

Vous êtes libre d'utiliser, modifier et redistribuer le contenu de ce dépôt.

Le déploiement public de CheerpX est fourni en l'état et est gratuit pour une exploration technologique, des tests et une utilisation par des particuliers. Toute autre utilisation par des organisations, y compris à but non lucratif, universitaires et du secteur public, nécessite une licence. Le téléchargement d'un build CheerpX dans le but de l'héberger ailleurs n'est pas autorisé sans une licence commerciale.

En savoir plus sur la licence CheerpX

Si vous souhaitez construire un produit basé sur CheerpX/WebVM, veuillez nous contacter : [email protected]

webvm

Populaires