WebVM

このリポジトリは、ブラウザ上で動作するLinux仮想マシンである https://webvm.io のソースコードをホストしています。

新しいAlpine/Xorg/i3グラフィカル環境をお試しください：https://webvm.io/alpine.html

WebVMは、HTML5/WebAssembly上で完全にクライアントサイドで動作するサーバーレスの仮想環境です。Linux ABI互換になるように設計されています。多くのネイティブ開発ツールチェーンを含む、未改変のDebianディストリビューションを実行します。

WebVMはCheerpX仮想化エンジンを搭載しており、あらゆるブラウザ上でx86バイナリの安全でサンドボックス化されたクライアントサイド実行を可能にします。CheerpXには、x86からWebAssemblyへのJITコンパイラ、仮想ブロックベースのファイルシステム、Linuxシステムコールエミュレータが含まれています。

ネットワーキングの有効化

最新のブラウザでは、TCPやUDPを直接使用するためのAPIは提供されていません。WebVMは、トランスポート層としてWebSocketをサポートするVPNネットワークであるTailscaleと統合することで、ネットワーキングサポートを提供します。

サイドバーから「Networking」パネルを開きます
パネルから「Connect to Tailscale」をクリックします
Tailscaleにログインします（アカウントをお持ちでない場合は作成してください）
Tailscaleから促されたら「Connect」をクリックします

これでWebVMは、あなた自身のローカルTailscaleネットワーク内のマシンにアクセスできるようになりました！

ワールドワイドウェブ

パブリックインターネットにアクセスしたい場合は、Exit Nodeが必要です。詳細な手順については Tailscale Exit Nodes を参照してください。（ネットワーク速度によっては、Tailscale Wasmモジュールのダウンロードに少し時間がかかる場合があります。）設定が完了したら：

Tailscaleの認証情報でログインします。
WebVMのタブに戻ります。
Networkingサイドパネルの Connect to Tailscale ボタンがあなたのIPアドレスに置き換わっているはずです。

authkeyの使用

手動でログインする代わりに、webvm URLの末尾にtailscale認証キーを追加することもできます。

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

エフェメラルキーを使用することをお勧めします。

Tailscaleネットワークのセルフホスティング

また、Tailscaleコントロールサーバーのセルフホスト型オープンソース実装である headscale もサポートしています。

ただし、headscaleは残念ながらCORSヘッダーの追加をサポートしていません。それらを追加するには、プロキシサーバーを設定する必要があります。その方法については、headscaleの指示がこちらにあります。

準備ができたら、nginx設定ファイルの location / ブロックに以下の行を追加します。

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

headscaleネットワークにログインするには、webVM URLに #controlUrl=<your-control-url> を追加します。

注意事項:

セルフホストする場合は、"https://webvm.io" を自身のURLに置き換えてください。
これはtailscaleの --login-server コマンドラインオプションと同等です。
authkeyと一緒に使用する場合は、URLフラグメントを & で区切ることを忘れないでください。

フォーク、デプロイ、カスタマイズ

リポジトリをフォークします。
設定でGithub Pagesを有効にします。
- Settings をクリックします。
- Pages セクションに移動します。
- ソースとして Github Actions を選択します。
  - カスタムドメインを使用している場合は、Enforce HTTPS が有効になっていることを確認してください。
ワークフローを実行します。
- Actions をクリックします。
- プロンプトを受け入れます。これはフォークに対してActionsを有効にするために一度だけ必要です。
- Deploy という名前のワークフローをクリックします。
- Run workflow をクリックし、メニューでもう一度 Run workflow をクリックします。
数秒後に新しい Deploy ワークフローが開始されます。クリックして詳細を確認します。
ワークフローが完了すると（数分かかります）、deploy_to_github_pages ジョブの下にURLが表示されます。

これで、dockerfiles/debian_mini を必要に応じてカスタマイズしたり、新しいDockerfileをゼロから作成したりできます。Path to Dockerfile ワークフローパラメータを使用して選択します。

完全なデスクトップAlpineイメージを使用したい場合は、そのDockerfileを こちら で見つけられます。
カスタムイメージの作成に関する詳細は、カスタムディスクイメージのドキュメントを参照してください。

カスタムDebianミニディスクイメージを使用してWebVMをローカルで実行する

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"

(* 「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または相対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をお楽しみください！

カスタマイズ例：Python3 REPL

Deploy ワークフローは、Dockerfileで指定された CMD を考慮します。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統合タブが表示されます。便利にするために、右上のピンボタンをクリックしてタブを固定できます。
Claude APIキーを挿入できるプロンプトが表示されます。
キーを挿入し、Enterキーを押します。

4. Claude AIの使用を開始する

APIキーを入力すると、次のような質問をしてClaude AIと対話を開始できます：

"/home/user/chall1.bin のCTFチャレンジを解いてください。バイナリは標準入力から読み取ることに注意してください。"

重要: APIキーは非公開であり、決して共有しないでください。私たちはあなたのキーにアクセスできず、キーはブラウザのローカルにのみ保存されます。

バグと問題

バグの報告は Issues を使用してください。または、Discord でご挨拶やフィードバックをお寄せください。

謝辞

このプロジェクトは以下に依存しています：

CheerpX、Leaning Technologies 製、x86仮想化とLinuxエミュレーション用
xterm.js, https://xtermjs.org/、Webベースのターミナルエミュレータ提供
Tailscale、ネットワーキングコンポーネント
lwIP、TCP/IPスタック、Cheerp を介してWeb用にコンパイル

バージョニング

WebVMはCheerpX x86-to-WebAssembly仮想化技術に依存しており、これは NPM を介してプロジェクトに含まれています。

NPMパッケージはリリースごとに更新されます。

すべてのビルドは不変です。特定のバージョンが今日うまく動作する場合、それは永遠に動作し続けます。

ライセンス

WebVMはApacheライセンス、バージョン2.0の下でリリースされています。

このリポジトリの内容を自由に使用、変更、再配布していただけます。

公開CheerpXデプロイメントは 現状のまま 提供され、技術探求、テスト、個人による使用のために 無料で使用 できます。非営利、学術、公共部門を含む組織によるその他の使用にはライセンスが必要です。CheerpXビルドを他の場所でホストする目的でダウンロードすることは、商用ライセンスなしでは許可されていません。

CheerpXライセンスの詳細を読む

CheerpX/WebVM上に製品を構築したい場合は、[email protected] までご連絡ください。

webvm

人気