axlan/webvmMáquina virtual para la Web
# WebVM
[](https://discord.gg/yWRr2YnD9c)
[](https://github.com/leaningtech/webvm/issues)
Este repositorio aloja el código fuente de [https://webvm.io](https://webvm.io), una máquina virtual Linux que se ejecuta en tu navegador.
Prueba el nuevo entorno gráfico Alpine / Xorg / i3: [https://webvm.io/alpine.html](https://webvm.io/alpine.html)
<img src="https://assets.kitploit.com/production/public/readmes/12583/bb15baefa5a32e70fe66386cb2bb3639a91fb43a8739bdea3347d6a3457df311.png" width="90%">
WebVM es un entorno virtual sin servidor que se ejecuta completamente del lado del cliente en HTML5/WebAssembly. Está diseñado para ser compatible con la ABI de Linux. Ejecuta una distribución Debian sin modificar que incluye muchas cadenas de herramientas de desarrollo nativas.
WebVM funciona con el motor de virtualización CheerpX y permite la ejecución segura y aislada de binarios x86 en cualquier navegador. CheerpX incluye un compilador JIT de x86 a WebAssembly, un sistema de archivos virtual basado en bloques y un emulador de llamadas al sistema de Linux.
## Índice
- [Fork, deploy, customize](#fork-deploy-customize)
- [Running WebVM locally with a custom Debian mini disk image](#run-webvm-locally-with-a-custom-debian-mini-disk-image)
- [Example customization: Python3 REPL](#example-customization-python3-repl)
- [How to use Claude AI](#how-to-use-claude-ai)
- [Bugs and Issues](#bugs-and-issues)
- [More links](#more-links)
- [Thanks to...](#thanks-to)
- [Versioning](#versioning)
- [License](#license)
# Enable networking
Los navegadores modernos no proporcionan APIs para usar directamente TCP o UDP. WebVM ofrece soporte de red integrándose con Tailscale, una red VPN que admite WebSockets como capa de transporte.
1. Abre el panel "Networking" desde la barra lateral
2. Haz clic en "Connect to Tailscale" en el panel
3. Inicia sesión en Tailscale (crea una cuenta si no tienes una)
4. Haz clic en "Connect" cuando Tailscale lo solicite
¡WebVM ahora tiene acceso a las máquinas en tu propia red local de Tailscale!
## la World Wide Web
Si deseas acceder a la internet pública, necesitarás un nodo de salida. Consulta [Tailscale Exit Nodes](https://tailscale.com/kb/1103/exit-nodes/) para obtener instrucciones detalladas.
(Dependiendo de la velocidad de tu red, puede que debas esperar unos momentos para que se descargue el módulo Wasm de Tailscale).
Una vez configurado:
- Inicia sesión con tus credenciales de Tailscale.
- Vuelve a la pestaña de WebVM.
- El botón "Connect to Tailscale" en el panel lateral de Networking debería ser reemplazado por tu dirección IP.
## usando authkey
Como alternativa a iniciar sesión manualmente, puedes añadir tu clave de autenticación de Tailscale al final de la URL de WebVM.
`https://webvm.io/#authKey=<tu-clave>`
Se recomienda usar una clave efímera.
## Autohospedando tu red Tailscale
También soportamos [headscale](https://headscale.net/stable/), una implementación de código abierto autogestionada del servidor de control de Tailscale.
Aunque headscale desafortunadamente no permite añadir cabeceras CORS. Tendrás que configurar un servidor proxy para añadirlas. Las instrucciones de headscale para hacerlo se pueden encontrar [aquí](https://headscale.net/stable/ref/integration/reverse-proxy/#nginx).
Una vez listo, añade la siguiente línea a tu bloque `location /` en tu archivo de configuración de nginx.
``` Nginx
if ($http_origin = "https://webvm.io") {
add_header 'Access-Control-Allow-Origin' "$http_origin";
add_header 'Access-Control-Allow-Credentials' 'true' always;
}
```
Para iniciar sesión en tu red headscale, añade `#controlUrl=<tu-url-de-control>` a la URL de WebVM.
**Notas:**
- Si autoalojas, reemplaza "https://webvm.io" con tu propia URL.
- Esto es equivalente a la opción de línea de comandos `--login-server` de Tailscale.
- Si se utiliza con authkey, no olvides separar los fragmentos de la URL con un `&` entre ellos.
# Fork, deploy, customize
<img src="https://assets.kitploit.com/production/public/readmes/12583/fc36f4680ee8f5f2d0d543a3d75f65378804ea002fb2fcd2d2a337117aad628e.gif" alt="deploy_instructions_gif" width="90%">
- Haz un fork del repositorio.
- Habilita GitHub Pages en la configuración.
- Haz clic en `Settings`.
- Ve a la sección `Pages`.
- Selecciona `Github Actions` como origen.
- Si estás usando un dominio personalizado, asegúrate de que `Enforce HTTPS` esté habilitado.
- Ejecuta el workflow.
- Haz clic en `Actions`.
- Acepta la solicitud. Esto solo se requiere una vez para habilitar Actions en tu fork.
- Haz clic en el workflow llamado `Deploy`.
- Haz clic en `Run workflow` y luego nuevamente en `Run workflow` en el menú.
- Después de unos segundos, comenzará un nuevo workflow `Deploy`, haz clic en él para ver los detalles.
- Una vez que el workflow se complete (tarda unos minutos), mostrará la URL debajo del trabajo `deploy_to_github_pages`.
<img src="https://assets.kitploit.com/production/public/readmes/12583/82996f246c8b496167e83667e79c3297b53c111ddf636cc301c3f0917a34b980.png" width="70%" >
Ahora puedes personalizar `dockerfiles/debian_mini` según tus necesidades, o crear un nuevo Dockerfile desde cero. Usa el parámetro del workflow `Path to Dockerfile` para seleccionarlo.
- Si deseas usar nuestra imagen completa de Alpine con escritorio, puedes encontrar su Dockerfile [**aquí**](https://github.com/axlan/webvm/blob/main/github.com/leaningtech/alpine-image).
- Para más información sobre la creación de imágenes personalizadas, consulta nuestra [documentación de imágenes de disco personalizadas](https://cheerpx.io/docs/guides/custom-images).
# Run WebVM locally with a custom Debian mini disk image
### 1. Clona el repositorio de WebVM
```sh
git clone https://github.com/leaningtech/webvm.git
cd webvm
```
### 2. Descarga la imagen Ext2 de Debian mini
Ejecuta el siguiente comando para descargar la imagen Ext2 de Debian mini:
```sh
wget "https://github.com/leaningtech/webvm/releases/download/ext2_image/debian_mini_20230519_5022088024.ext2"
```
(*También puedes construir tu propia imagen de disco seleccionando la opción del workflow **"Upload GitHub release"***)
### 3. Actualiza el archivo de configuración
Edita `config_public_terminal.js` para que haga referencia a tu imagen de disco local:
- Reemplaza:
`"wss://disks.webvm.io/debian_large_20230522_5044875331.ext2"`
Con:
`"/disk-images/debian_mini_20230519_5022088024.ext2"`
(*Usa una URL absoluta o relativa que apunte a la ubicación de la imagen de disco.*)
- Reemplaza `"cloud"` con el tipo correcto de imagen de disco: `"bytes"`
### 4. Construye WebVM
Ejecuta los siguientes comandos para instalar dependencias y construir WebVM:
```sh
npm install
npm run build
```
La salida se colocará en el directorio `build`.
### 5. Configura Nginx
- Crea un directorio para la imagen de disco:
```sh
mkdir disk-images
mv debian_mini_20230519_5022088024.ext2 disk-images/
```
- Modifica tu archivo `nginx.conf` para servir la imagen de disco. Añade el siguiente bloque de ubicación:
```nginx
location /disk-images/ {
root .;
autoindex on;
}
```
### 6. Inicia Nginx
Ejecuta el siguiente comando para iniciar Nginx:
```sh
nginx -p . -c nginx.conf
```
*Nginx servirá automáticamente el directorio `build`.*
### 7. Accede a WebVM
Abre un navegador y visita: `http://127.0.0.1:8081`.
¡Disfruta de tu WebVM local!
---
# Example customization: Python3 REPL
El workflow `Deploy` tiene en cuenta el `CMD` especificado en el Dockerfile. Para construir un REPL, simplemente aplica este parche y despliega.
```diff
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" ]
```
# How to use Claude AI
Para acceder a Claude AI, necesitas una clave API. Sigue estos pasos para comenzar:
### 1. Crea una cuenta
- Visita [Anthropic Console](https://console.anthropic.com/login) y regístrate con tu correo electrónico. Recibirás un enlace de inicio de sesión en la consola de Anthropic.
<img src="https://assets.kitploit.com/production/public/readmes/12583/ea1e68db62f1324a89bc09e3563bd4cc3e36616a29446b63c9bde5236ccf53d6.png" width="90%">
### 2. Obtén tu clave API
- Una vez que hayas iniciado sesión, navega a **Get API keys**.
- Compra la cantidad de créditos que necesites. Después de completar la compra, podrás generar la clave a través de la consola de API.
<img src="https://assets.kitploit.com/production/public/readmes/12583/9d80faa917c19a4a73cee8e90c230d9f13ba949b1572b0a52a0292b05a0ef4de.png" width="90%">
### 3. Inicia sesión con tu clave API
- Navega a tu WebVM y pasa el ratón sobre el icono del robot. Esto mostrará la pestaña de integración de Claude AI. Para mayor comodidad, puedes hacer clic en el botón de fijar en la esquina superior derecha para mantener la pestaña en su lugar.
- Verás un mensaje donde puedes insertar tu clave API de Claude.
- Inserta tu clave y presiona Enter.
<img src="https://assets.kitploit.com/production/public/readmes/12583/7da8a79bf7427a8a919594cc8fae80f510f2796cf623fd317b5f4555b25eca12.png" width="90%">
### 4. Comienza a usar Claude AI
- Una vez ingresada tu clave API, puedes comenzar a interactuar con Claude AI haciendo preguntas como:
__"Resuelve el desafío CTF en `/home/user/chall1.bin`. Ten en cuenta que el binario lee de stdin."__
<img src="https://assets.kitploit.com/production/public/readmes/12583/0c36cbcae5979994cd118355a62b889afa624832abee16c8148e05c5e97c9c6e.gif" alt="deploy_instructions_gif" width="90%">
**Importante:** Tu clave API es privada y nunca debe compartirse. Nosotros no tenemos acceso a tu clave, la cual se almacena solo localmente en tu navegador.
# Bugs and Issues
Por favor, usa [Issues](https://github.com/leaningtech/webvm/issues) para reportar cualquier error.
O ven a saludar / comparte tus comentarios en [Discord](https://discord.gg/yTNZgySKGa).
# More links
- [WebVM: máquinas virtuales x86 sin servidor en el navegador](https://leaningtech.com/webvm-server-less-x86-virtual-machines-in-the-browser/)
- [WebVM: virtualización Linux en WebAssembly con red completa mediante Tailscale](https://leaningtech.com/webvm-virtual-machine-with-networking-via-tailscale/)
- [Mini.WebVM: tu propio Linux desde un Dockerfile, virtualizado en el navegador via WebAssembly](https://leaningtech.com/mini-webvm-your-linux-box-from-dockerfile-via-wasm/)
- Despliegue de referencia en GitHub Pages: [Mini.WebVM](https://mini.webvm.io)
- [Crafting the Impossible: Virtualización x86 en el navegador con WebAssembly](https://www.youtube.com/watch?v=VqrbVycTXmw) Charla en JsNation 2022
# Agradecimientos a...
Este proyecto depende de:
- [CheerpX](https://cheerpx.io/), creado por [Leaning Technologies](https://leaningtech.com/) para la virtualización x86 y emulación de Linux
- xterm.js, [https://xtermjs.org/](https://xtermjs.org/), por proporcionar el emulador de terminal basado en web
- [Tailscale](https://tailscale.com/), por el componente de red
- [lwIP](https://savannah.nongnu.org/projects/lwip/), por la pila TCP/IP, compilado para la web mediante [Cheerp](https://github.com/leaningtech/cheerp-meta/)
# Versionado
WebVM depende de la tecnología de virtualización CheerpX de x86 a WebAssembly, la cual se incluye en el proyecto a través de [NPM](https://www.npmjs.com/package/@leaningtech/cheerpx).
El paquete NPM se actualiza en cada lanzamiento.
Cada compilación es inmutable: si una versión específica funciona bien hoy, seguirá funcionando para siempre.
# Licencia
WebVM se publica bajo la Licencia Apache, Versión 2.0.
Eres bienvenido a usar, modificar y redistribuir el contenido de este repositorio.
El despliegue público de CheerpX se proporciona **tal cual** y es **de uso gratuito** para exploración tecnológica, pruebas y uso por parte de individuos. Cualquier otro uso por parte de organizaciones, incluyendo sin fines de lucro, academia y sector público, requiere una licencia. No se permite descargar una compilación de CheerpX con el propósito de alojarla en otro lugar sin una licencia comercial.
Lee más sobre [licenciamiento de CheerpX](https://cheerpx.io/docs/licensing)
Si deseas construir un producto sobre CheerpX/WebVM, por favor contacta: [email protected]