WebVM

Este repositorio alberga el código fuente de 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

¿Qué es WebVM?

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 ABI de Linux y ejecuta una distribución Debian sin modificar, incluyendo muchas cadenas de herramientas de desarrollo nativas.

WebVM funciona gracias al motor de virtualización CheerpX, que proporciona:

• Compilador JIT de x86 a WebAssembly
• Sistema de archivos virtual basado en bloques
• Emulador de llamadas al sistema Linux
• Ejecución segura y aislada del lado del cliente

Tabla de contenidos

• Redes
• Desarrollo y personalización
  • Desplegar en GitHub Pages
  • Servicio local y configuración de imagen
• Integración con Claude AI
• Comunidad y soporte
• Más información
• Licencia

[!NOTE] Visita https://webvm.io para empezar de inmediato en tu navegador. Sin configuración previa.

Para configuración local, compilaciones de imágenes personalizadas y guía de bifurcación/despliegue, consulta Desarrollo y personalización.

Redes

WebVM soporta integración con Tailscale. De esta forma, tu máquina virtual en el navegador puede acceder a tu red privada y, con un nodo de salida, también a Internet público.

[!NOTE] Algunas operaciones de red de bajo nivel (especialmente ICMP usado por ping) no están disponibles actualmente en este entorno. Para comprobaciones de conectividad, usa curl o wget.

Red local

1. Abre el panel "Redes" desde la barra lateral
2. Haz clic en "Conectar a Tailscale"
3. Inicia sesión (crea una cuenta gratuita en tailscale.com si es necesario)
4. Haz clic en "Conectar" cuando se te solicite

¡WebVM ahora tiene acceso a todas las máquinas de tu red Tailscale!

Consejos de uso de Internet

[!TIP] En conexiones lentas puede haber una breve demora antes de la inicialización. El estado de la conexión se muestra como un punto de color en el botón: naranja = red local, verde = global/Internet. El texto del botón muestra tu dirección IP de Tailscale una vez conectado.

Para acceder a Internet público desde WebVM, configura un Nodo de salida en otro dispositivo de tu red Tailscale:

1. Sigue la guía rápida de Nodo de salida de Tailscale (secciones: "Anunciar un dispositivo como nodo de salida")
2. WebVM usará automáticamente el nodo de salida una vez anunciado

Usar una clave de autenticación

Como alternativa al inicio de sesión interactivo, añade tu clave de autenticación de Tailscale al fragmento de URL:

https://webvm.io/#authKey=<tu-clave-efímera>

Esto equivale a la opción --login-server de Tailscale.

[!TIP] Si también necesitas un servidor de control personalizado, añade controlUrl en el mismo fragmento de URL y separa los valores con &, por ejemplo: #authKey=...&controlUrl=....

Autoalojar Tailscale con Headscale

También soportamos headscale, una implementación de código abierto autoalojada del servidor de control de Tailscale. Como Headscale no añade cabeceras CORS por defecto, necesitarás un proxy delante de él. Consulta la documentación de configuración de proxy inverso de Headscale para ver un ejemplo.

Una vez listo, añade la siguiente línea a tu bloque location / en el archivo de configuración de nginx.

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

Luego accede a WebVM con:

https://tudominio.com/#controlUrl=<tu-url-de-headscale>

Desarrollo y personalización

[!NOTE] Los usuarios tienen privilegios de root por defecto. sudo no está instalado, aunque se puede añadir fácilmente al Dockerfile si es necesario.

Desplegar en GitHub Pages

Este es un flujo de trabajo simple, apto para principiantes. Para alojamiento local y personalización, consulta más abajo Servicio local y configuración de imagen.

Bifurca (fork) el repositorio de WebVM para desplegar tu propia versión en GitHub Pages:

1. Bifurca el repositorio
2. Habilita GitHub Pages desde el repositorio bifurcado en Configuración → Pages usando "GitHub Actions" como origen
3. Ejecuta el flujo de trabajo Deploy desde Actions
4. Una vez completado, abre la URL que se muestra bajo el trabajo deploy_to_github_pages

El mismo flujo de trabajo Deploy también compila imágenes de disco .ext2 personalizadas a partir de un Dockerfile. Puedes apuntarlo a dockerfiles/debian_mini u otro Dockerfile, y luego publicar el resultado como un activo de lanzamiento de GitHub o desplegar la compilación de Pages desde tu bifurcación.

[!NOTE] dockerfiles/debian_large es una imagen demasiado grande para GitHub Pages.

Servicio local y configuración de imagen

1. Clona el repositorio

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

2. Coloca tu imagen en custom-disk-images/

Este repositorio incluye un directorio persistente custom-disk-images/ para archivos .ext2 locales.

Para usar la imagen oficial Debian mini, descárgala de los lanzamientos:

debian_mini_20230519_5022088024.ext2

También puedes copiar una imagen que hayas compilado tú mismo.

3. Apunta WebVM a tu imagen local

Edita config_public_terminal.js:

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

4. Instala las dependencias y compila

npm install
npm run build

5. Inicia Nginx y abre WebVM

nginx -p . -c nginx.conf

Luego abre http://127.0.0.1:8081 y ¡disfruta de tu WebVM local!

Para el entorno de escritorio Alpine completo, consulta leaningtech/alpine-image.

Para más detalles, consulta la documentación de imágenes personalizadas de CheerpX.

[!TIP] Para el REPL de Python3, el flujo de trabajo Deploy tiene en cuenta el CMD especificado en el Dockerfile.

Para construir un REPL, simplemente cambia CMD [ "/bin/bash" ] por CMD [ "/usr/bin/python3" ] y despliega.

Integración con Claude AI

Para acceder a Claude AI, necesitas una clave API. Sigue estos pasos para empezar:

1. Crea una cuenta

• Visita Anthropic Console y regístrate con tu correo electrónico. Recibirás un enlace de inicio de sesión en la Consola de Anthropic.

2. Obtén tu clave API

• Una vez que hayas iniciado sesión, navega a Obtener claves API.
• 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.

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 con 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 campo donde puedes insertar tu clave API de Claude.

4. Empieza a usar Claude AI

• Una vez que hayas ingresado 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."

Importante: Tu clave API es privada y nunca debe compartirse. No tenemos acceso a tu clave; solo se almacena localmente en tu navegador.

Comunidad y soporte

Reportar problemas: Usa GitHub Issues para reportar errores o solicitar funciones.

Chatea con nosotros: Únete a nuestra comunidad de Discord para discutir sobre WebVM, compartir ideas y obtener ayuda.

Más información

Artículos y recursos:

• WebVM: Máquinas virtuales x86 sin servidor en el navegador
• WebVM: Virtualización Linux en WebAssembly con conectividad completa mediante Tailscale
• Mini.WebVM: Tu propio Linux desde Dockerfile, virtualizado en el navegador mediante WebAssembly
• Creando lo imposible: Virtualización x86 en el navegador con WebAssembly — Charla en JsNation 2022

Ejemplo de despliegue:

• Referencia de Mini.WebVM — Un ejemplo en ejecución desplegado en GitHub Pages

Tecnología detrás de WebVM:

Este proyecto está impulsado por:

• CheerpX — Compilador JIT de x86 a WebAssembly | por Leaning Technologies
• xterm.js — Emulador de terminal basado en web
• Tailscale — Capa de red VPN
• lwIP — Pila TCP/IP, compilada para la web mediante Cheerp

Versionado:

WebVM utiliza el paquete NPM CheerpX, que se actualiza en cada lanzamiento.

Cada compilación es inmutable. Si una versión específica funciona bien para ti 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 ánimo 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 aquí sobre nuestras prácticas de licencias.

Si deseas construir un producto basado en CheerpX/WebVM, consulta nuestras otras opciones de licencia: Licencias de CheerpX o ponte en contacto: [email protected]