WebVM

В этом репозитории находится исходный код сайта https://webvm.io — виртуальной машины Linux, работающей в вашем браузере.

Попробуйте новое графическое окружение Alpine / Xorg / i3: https://webvm.io/alpine.html

WebVM — это серверная виртуальная среда, работающая полностью на стороне клиента в HTML5/WebAssembly. Она спроектирована как совместимая с ABI Linux. В ней работает немодифицированный дистрибутив Debian, включающий множество нативных инструментов разработки.

WebVM работает на движке виртуализации CheerpX и обеспечивает безопасное, изолированное выполнение x86-бинарных файлов в любом браузере. CheerpX включает JIT-компилятор x86-в-WebAssembly, виртуальную файловую систему на основе блоков и эмулятор системных вызовов Linux.

Содержание

Форк, развёртывание, настройка
Запуск WebVM локально с пользовательским мини-образом диска Debian
Пример настройки: REPL Python3
Как использовать Claude AI
Ошибки и проблемы
Дополнительные ссылки
Благодарности
Версионирование
Лицензия

Включение сетевого взаимодействия

Современные браузеры не предоставляют API для прямого использования TCP или UDP. WebVM обеспечивает поддержку сети за счёт интеграции с Tailscale — VPN-сетью, поддерживающей WebSockets в качестве транспортного уровня.

Откройте панель «Networking» (Сеть) на боковой панели.
Нажмите «Connect to Tailscale» (Подключиться к Tailscale) на панели.
Войдите в Tailscale (создайте аккаунт, если его нет).
Нажмите «Connect» (Подключиться) по запросу Tailscale.

Теперь WebVM имеет доступ к машинам в вашей локальной сети Tailscale!

Всемирная паутина

Если вы хотите получить доступ к общедоступному интернету, вам понадобится выходной узел (Exit Node). Подробные инструкции см. в Tailscale Exit Nodes. (В зависимости от скорости вашей сети вам может потребоваться подождать несколько секунд, пока загрузится модуль Tailscale Wasm.) После настройки:

Войдите, используя свои учётные данные Tailscale.
Вернитесь на вкладку WebVM.
Кнопка «Connect to Tailscale» в боковой панели «Networking» должна замениться вашим IP-адресом.

Использование authkey

В качестве альтернативы ручному входу вы можете добавить ключ аутентификации Tailscale в конец URL-адреса WebVM.

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

Рекомендуется использовать эфемерный ключ.

Самостоятельное хостинг своей сети Tailscale

Мы также поддерживаем headscale — самостоятельную реализацию сервера управления Tailscale с открытым исходным кодом.

Однако, к сожалению, headscale не поддерживает добавление CORS-заголовков. Вам потребуется настроить прокси-сервер для их добавления. Инструкции headscale по этому поводу можно найти здесь.

После подготовки добавьте следующую строку в блок location / вашего конфигурационного файла nginx.

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

Чтобы войти в свою сеть headscale, добавьте #controlUrl=<your-control-url> в URL-адрес webVM.

Примечания:

При самостоятельном хостинге замените «https://webvm.io» на свой собственный URL.
Это эквивалентно параметру командной строки tailscale --login-server.
Если используется вместе с authkey, не забудьте разделить фрагменты URL символом &.

Форк, развёртывание, настройка

Сделайте форк репозитория.
Включите Github Pages в настройках.
- Нажмите Settings.
- Перейдите в раздел Pages.
- Выберите Github Actions в качестве источника.
- Если вы используете пользовательский домен, убедитесь, что включена опция Enforce HTTPS.
Запустите workflow.
- Нажмите Actions.
- Примите запрос. Это требуется только один раз для включения Actions в вашем форке.
- Нажмите на workflow с именем Deploy.
- Нажмите Run workflow, а затем ещё раз Run workflow в появившемся меню.
Через несколько секунд запустится новый workflow Deploy. Нажмите на него, чтобы увидеть детали.
После завершения workflow, что занимает несколько минут, под заданием deploy_to_github_pages отобразится URL.

Теперь вы можете изменить dockerfiles/debian_mini в соответствии со своими потребностями или создать новый Dockerfile с нуля. Используйте параметр workflow Path to Dockerfile, чтобы выбрать его.

Если вы хотите использовать наш полный десктопный образ Alpine, вы можете найти его Dockerfile здесь.
Дополнительную информацию о создании пользовательских образов см. в документации по пользовательским образам дисков.

Запуск WebVM локально с пользовательским мини-образом диска Debian

1. Клонируйте репозиторий WebVM

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

2. Загрузите мини-образ Debian Ext2

Выполните следующую команду для загрузки мини-образа Debian Ext2:

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

(Вы также можете собрать собственный образ диска, выбрав опцию workflow "Upload GitHub release")

3. Обновите конфигурационный файл

Отредактируйте config_public_terminal.js, указав путь к локальному образу диска:

Замените:

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

На:

"/disk-images/debian_mini_20230519_5022088024.ext2"

(Используйте абсолютный или относительный URL, указывающий на расположение образа диска.)
Замените "cloud" на правильный тип образа диска: "bytes"

4. Соберите WebVM

Выполните следующие команды для установки зависимостей и сборки WebVM:

npm install
npm run build

Результат будет помещён в каталог build.

5. Настройте Nginx

Создайте каталог для образа диска:

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

Измените файл nginx.conf для обслуживания образа диска. Добавьте следующий блок location:

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

6. Запустите Nginx

Выполните следующую команду для запуска Nginx:

nginx -p . -c nginx.conf

Nginx автоматически будет обслуживать каталог build.

7. Доступ к WebVM

Откройте браузер и перейдите по адресу: http://127.0.0.1:8081.

Наслаждайтесь локальным WebVM!

Пример настройки: REPL Python3

Workflow Deploy учитывает CMD, указанный в Dockerfile. Чтобы создать REPL, просто примените этот патч и выполните развёртывание.

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

Как использовать Claude AI

Для доступа к Claude AI вам понадобится API-ключ. Выполните следующие шаги, чтобы начать:

1. Создайте учётную запись

Перейдите на Anthropic Console и зарегистрируйтесь, используя свою электронную почту. Вы получите ссылку для входа в Anthropic Console.

2. Получите свой API-ключ

После входа в систему перейдите в раздел Get API keys.
Приобретите необходимое количество кредитов. После завершения покупки вы сможете сгенерировать ключ в консоли API.

3. Войдите, используя свой API-ключ

Перейдите в свой WebVM и наведите курсор на значок робота. Откроется вкладка интеграции с Claude AI. Для удобства вы можете нажать кнопку булавки в правом верхнем углу, чтобы закрепить вкладку.
Вы увидите приглашение, в которое можно вставить свой API-ключ Claude.
Вставьте ключ и нажмите Enter.

4. Начните использовать Claude AI

После ввода API-ключа вы можете начать взаимодействие с Claude AI, задавая вопросы, например:

"Реши CTF-задачу по адресу /home/user/chall1.bin. Обрати внимание, что бинарник читает из stdin."

Важно: Ваш API-ключ является конфиденциальным и не должен передаваться третьим лицам. У нас нет доступа к вашему ключу, который хранится локально только в вашем браузере.

Ошибки и проблемы

Пожалуйста, используйте Issues для сообщения об ошибках. Или заходите поздороваться/поделиться отзывами на Discord.

Дополнительные ссылки

WebVM: серверные x86-виртуальные машины в браузере
WebVM: виртуализация Linux в WebAssembly с полной сетевой поддержкой через Tailscale
Mini.WebVM: Ваш собственный Linux-бокс из Dockerfile, виртуализированный в браузере через WebAssembly
Справочное развёртывание на GitHub Pages: Mini.WebVM
Crafting the Impossible: X86 Virtualization in the Browser with WebAssembly Доклад на JsNation 2022

Благодарности...

Этот проект зависит от:

CheerpX, созданный компанией Leaning Technologies для x86-виртуализации и эмуляции Linux
xterm.js, https://xtermjs.org/, для веб-эмулятора терминала
Tailscale, для сетевого компонента
lwIP, для стека TCP/IP, скомпилированный для Web через Cheerp

Версионирование

WebVM зависит от технологии виртуализации x86-в-WebAssembly CheerpX, которая включена в проект через NPM.

Пакет NPM обновляется с каждым релизом.

Каждая сборка неизменна: если конкретная версия работает для вас сегодня, она будет работать всегда.

Лицензия

WebVM выпущен под лицензией Apache License, Version 2.0.

Вы можете свободно использовать, изменять и распространять содержимое этого репозитория.

Публичное развёртывание CheerpX предоставляется как есть и бесплатно для использования для технологических исследований, тестирования и использования частными лицами. Любое другое использование организациями, включая некоммерческие организации, академические учреждения и государственный сектор, требует лицензии. Загрузка сборки CheerpX с целью её размещения где-либо ещё без коммерческой лицензии не разрешена.

Узнайте больше о лицензировании CheerpX

Если вы хотите создать продукт на основе CheerpX/WebVM, свяжитесь с нами: [email protected]

webvm

Популярное