WebVM

이 저장소는 브라우저에서 실행되는 Linux 가상 머신인 https://webvm.io의 소스 코드를 호스팅합니다.

새로운 Alpine / Xorg / i3 그래픽 환경을 사용해 보세요: https://webvm.io/alpine.html

WebVM은 HTML5/WebAssembly에서 완전히 클라이언트 측에서 실행되는 서버리스 가상 환경입니다. Linux ABI와 호환되도록 설계되었습니다. 많은 네이티브 개발 도구 체인을 포함한 수정되지 않은 Debian 배포판을 실행합니다.

WebVM은 CheerpX 가상화 엔진으로 구동되며, 모든 브라우저에서 x86 바이너리의 안전하고 샌드박스된 클라이언트 측 실행을 가능하게 합니다. CheerpX는 x86-to-WebAssembly JIT 컴파일러, 가상 블록 기반 파일 시스템 및 Linux syscall 에뮬레이터를 포함합니다.

네트워킹 활성화

최신 브라우저는 TCP 또는 UDP를 직접 사용할 수 있는 API를 제공하지 않습니다. WebVM은 WebSocket을 전송 계층으로 지원하는 VPN 네트워크인 Tailscale과 통합하여 네트워킹 지원을 제공합니다.

사이드바에서 "네트워킹" 패널을 엽니다.
패널에서 "Connect to Tailscale"을 클릭합니다.
Tailscale에 로그인합니다(계정이 없으면 계정을 생성합니다).
Tailscale에서 메시지가 표시되면 "Connect"를 클릭합니다.

이제 WebVM이 사용자의 로컬 Tailscale 네트워크에 있는 머신에 액세스할 수 있습니다!

월드 와이드 웹

공용 인터넷에 액세스하려면 종료 노드가 필요합니다. 자세한 지침은 Tailscale 종료 노드를 참조하세요. (네트워크 속도에 따라 Tailscale Wasm 모듈이 다운로드될 때까지 잠시 기다려야 할 수 있습니다.) 설정이 완료되면:

Tailscale 자격 증명으로 로그인합니다.
WebVM 탭으로 돌아갑니다.
네트워킹 사이드 패널의 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 페이지를 활성화합니다.
- 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을 사용하세요.)
"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 /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 챌린지를 해결하세요. 바이너리는 stdin에서 읽는다는 점에 유의하세요."

중요: API 키는 비공개이며 절대 공유해서는 안 됩니다. 당사는 사용자의 키에 접근할 수 없으며, 키는 브라우저에만 로컬로 저장됩니다.

버그 및 이슈

버그를 보고하려면 Issues를 사용하세요. 또는 Discord에서 인사하거나 피드백을 공유해 주세요.

추가 링크

감사의 말...

이 프로젝트는 다음에 의존합니다:

x86 가상화 및 Linux 에뮬레이션을 위한 Leaning Technologies의 CheerpX
웹 기반 터미널 에뮬레이터를 제공하는 xterm.js, https://xtermjs.org/
네트워킹 구성 요소를 위한 Tailscale
TCP/IP 스택을 위한 lwIP, Cheerp를 통해 웹용으로 컴파일됨

버전 관리

WebVM은 NPM을 통해 프로젝트에 포함된 CheerpX x86-to-WebAssembly 가상화 기술에 의존합니다.

NPM 패키지는 모든 릴리스에서 업데이트됩니다.

모든 빌드는 변경할 수 없습니다. 특정 버전이 오늘 잘 작동한다면 영원히 계속 작동할 것입니다.

라이선스

WebVM은 Apache License, Version 2.0에 따라 릴리스됩니다.

이 저장소의 내용을 사용, 수정 및 재배포하실 수 있습니다.

공개 CheerpX 배포는 있는 그대로 제공되며 개인의 기술 탐색, 테스트 및 사용을 위해 무료로 사용할 수 있습니다. 비영리, 학계 및 공공 부문을 포함한 조직의 기타 모든 사용은 라이선스가 필요합니다. CheerpX 빌드를 다른 곳에 호스팅할 목적으로 다운로드하는 것은 상업용 라이선스 없이 허용되지 않습니다.

CheerpX 라이선스에 대해 자세히 알아보기

CheerpX/WebVM을 기반으로 제품을 구축하려면 [email protected]으로 문의하세요.

webvm

인기