Skip to content
Tools/JS 샌드박스 — 격리된 QuickJS에서 실행

JS 샌드박스 — 격리된 QuickJS에서 실행

JS Sandbox (QuickJS)

신뢰할 수 없는 JavaScript를 브라우저 안에서 안전하게 실행하세요. 브라우저의 eval()은 실행 시간·메모리를 제한할 수 없지만, WASM으로 컴파일된 QuickJS 엔진은 무한 루프 자동 중단(실행 시간 제한), 메모리 제한, 컨텍스트 격리, 호스트 함수 화이트리스트(capability 보안)를 제공합니다. 기본·응용·심화 예제로 클로저, 프로미스, 제너레이터부터 무한 루프·메모리 폭탄 방어까지 직접 체험하세요.

코딩 실습

🏝️ 신뢰할 수 없는 JavaScript를 안전하게 실행

브라우저의 eval() 은 실행 시간·메모리를 제한할 수 없어 while(true){} 한 줄에 탭이 멈춥니다. 여기서는 QuickJS 엔진을 WASM으로 격리 실행해 실행 시간·메모리를 강제하고, 호스트가 허용한 함수만 노출합니다.

QuickJS 엔진 로딩 중…quickjs-emscripten 0.32.0

🛡️ 샌드박스 컨트롤

🛡️ 아래 버튼은 위험한 코드를 일부러 실행합니다. 그래도 이 페이지는 멈추지 않습니다 — 샌드박스가 막아주니까요.

에디터

콘솔 출력

QuickJS 엔진을 불러오는 중입니다…

예제 갤러리

이게 왜 중요한가 — 샌드박싱의 원리

⚠️ 왜 eval() 은 위험한가

  • 실행되는 코드가 페이지의 모든 전역(document, fetch, localStorage)에 접근합니다.
  • 실행 시간이나 메모리를 제한할 방법이 없습니다 — 무한 루프면 탭이 정지합니다.
  • 쿠키·토큰 탈취, DOM 변조, 무한 팝업 등 임의 코드 실행(RCE)에 그대로 노출됩니다.

🧱 WASM 샌드박싱의 원리

  • QuickJS는 별도의 JS 인터프리터이며, 자체 선형 메모리 안에서만 동작합니다.
  • 호스트가 명시적으로 넘긴 함수 외에는 바깥 세계로 나가는 통로가 없습니다.
  • 인터럽트 핸들러가 주기적으로 호출되어 true 를 반환하면 즉시 실행을 멈출 수 있습니다.

🔑 Capability 기반 보안

샌드박스는 "기본적으로 아무것도 못 함"에서 시작합니다. 계산기 host.add, 화이트리스트 host.priceOf처럼 호스트가건네준 능력(capability)만 사용할 수 있습니다. 권한을 "빼앗는" 대신 "주는" 모델이라 훨씬 안전합니다.

🚀 어디에 쓰이나

  • 플러그인 시스템 — Figma 플러그인은 사용자 코드를 격리된 QuickJS 샌드박스에서 실행합니다.
  • 서버리스/엣지 — 멀티테넌트 함수를 서로 격리해 안전하게 실행.
  • 노코드/수식 엔진 — 사용자가 입력한 표현식을 통제된 환경에서 평가.
  • LLM 코드 실행 — 모델이 생성한 코드를 시간·메모리 한도 안에서 실험.

모든 코드는 브라우저 안의 QuickJS(WASM)에서만 실행되며, 입력한 코드는 어떤 서버로도 전송되지 않습니다. 매 실행마다 새 런타임/컨텍스트를 만들고 실행 후 즉시 폐기하므로 상태가 남지 않습니다. 엔진: quickjs-emscripten 0.32.0 · 다른 도구 보기

이어서 해볼 도구

같은 흐름으로 이어지는 도구를 골라 두었습니다.