자바스크립트 샌드박스 완벽 파헤치기: 안전한 코드 실행 환경 만들기

자바스크립트 샌드박스 완벽 파헤치기: 안전한 코드 실행 환경 만들기

안녕하세요!

오늘은 자바스크립트(JavaScript)의 중요한 보안 개념 중 하나인 '샌드박스(Sandbox)'에 대해 깊이 알아보는 시간을 갖도록 하겠습니다.

코드를 안전하게 실행하는 것이 왜 중요하고, 또 어떻게 구현할 수 있는지 고등학생 여러분도 쉽게 이해할 수 있도록 차근차근 설명해 드릴 테니 잘 따라와 주시기 바랍니다!

자바스크립트(JavaScript)에서 샌드박스(Sandbox)는 실행 중인 코드를 격리시켜서, 해당 코드가 애플리케이션의 다른 부분이나 시스템 전체에 불필요한 영향을 주거나 보안 위험을 일으키는 것을 방지하는 보안 메커니즘입니다.

마치 어린아이들이 안전하게 놀 수 있도록 울타리를 쳐 놓은 모래 놀이터(sandbox)처럼, 코드에게도 외부 환경에 영향을 주지 않고 실행될 수 있는 통제된 환경을 제공하는 것인데요.

이를 통해 사용자 데이터와 시스템 보안을 지킬 수 있습니다.

특히 웹 브라우저(browser)에서는 각 탭마다 독립적인 실행 환경을 제공하는 것이 일반적인 샌드박스(Sandbox)의 예입니다.

이런 격리 덕분에 한 탭에서 실행되는 자바스크립트(JavaScript) 코드가 다른 탭의 내용에 함부로 접근할 수 없습니다.

물론, 두 페이지가 동일 출처 정책(same-origin policy - 프로토콜, 도메인, 포트가 모두 같음)을 따르거나, CORS(Cross-Origin Resource Sharing)를 통해 명시적으로 교차 출처 접근을 허용한 경우는 예외입니다.

웹에서 실행되는 코드는 브라우저 커널 프로세스와 통신하기 위해 IPC(Inter-Process Communication)라는 채널을 이용해야만 하는데요.

이 통신 과정에서 보안 검사가 이루어집니다.

결국 샌드박스(Sandbox) 디자인의 핵심 목표는 신뢰할 수 없는 코드를 특정 환경 내에서만 실행시키고, 그 격리된 영역 밖의 자원에 접근하는 것을 엄격하게 제한하는 데 있습니다.

1. 자바스크립트 샌드박스는 언제 사용할까요?

자바스크립트(JavaScript)에서 샌드박스(Sandbox)는 코드의 실행 환경을 격리하고 제어하여, 코드가 안전하고 제한된 환경에서 실행되도록 보장하고 주 환경에 잠재적인 손상을 입히는 것을 피하기 위해 사용됩니다.

구체적인 사용 사례는 다음과 같습니다.

신뢰하기 어려운 외부 자바스크립트(JavaScript) 실행: 출처가 불분명하거나 완전히 신뢰하기 힘든 제3자 자바스크립트(JavaScript) 코드를 실행해야 할 때 유용합니다.
온라인 코드 편집기: 많은 온라인 코드 편집기(online code editor)는 사용자가 입력한 코드를 샌드박스(Sandbox) 안에서 실행하여, 편집기 페이지 자체에 영향을 미치는 것을 방지합니다.
웹 애플리케이션 보안: 브라우저에서 다양한 출처의 자바스크립트(JavaScript)를 실행할 때, 샌드박스(Sandbox)를 통해 코드의 권한을 제한함으로써 악성 코드가 민감한 자원에 접근하거나 위험한 작업을 수행하는 것을 막을 수 있습니다.
플러그인 및 외부 스크립트: 웹 애플리케이션이 외부 플러그인(plugin)이나 스크립트를 로드하여 실행해야 할 경우, 샌드박스(Sandbox)를 이용해 이들의 접근 권한을 제한하여 메인 애플리케이션과 데이터의 보안을 지킵니다.
제이슨피(JSONP) 처리: 서버로부터 제이슨피(JSONP - JSON with Padding) 응답을 파싱(parsing)할 때, 만약 반환된 데이터가 신뢰할 수 없다면 샌드박스(Sandbox)를 사용하여 안전하게 데이터를 파싱하고 가져올 수 있습니다.

제이슨피(JSONP) 통신 방식 잠깐 알아보기

제이슨피(JSONP)는 <script> 태그가 가지는 특성, 즉 교차 출처(cross-origin) 제한이 없다는 점(과거부터 내려온 특징입니다)을 이용하여 외부 서비스와 통신하는 방식입니다.

통신이 필요할 때, 현재 사이트의 스크립트는 외부 API 주소를 가리키는 <script> 요소를 동적으로 생성합니다.

예를 들면 다음과 같습니다.

<script src="http://www.example.net/api?param1=1&param2=2"></script>

이때 데이터를 받기 위한 콜백(callback) 함수를 함께 제공합니다(함수 이름은 미리 약속하거나 URL 파라미터를 통해 전달할 수 있습니다).

그러면 외부 서버는 다음과 같이 콜백 함수 호출 코드로 감싸진 제이슨(JSON) 데이터를 응답으로 보내줍니다(그래서 JSON에 'padding'을 입혔다는 의미로 JSONP라고 부릅니다).

callback({ name: 'hax', gender: 'Male' });

브라우저는 이 응답을 받으면 자동으로 callback 함수를 호출하고, 파싱된 제이슨(JSON) 객체를 매개변수로 넘겨줍니다.

현재 사이트의 스크립트는 이 callback 함수 안에서 전달받은 데이터를 처리할 수 있습니다.

샌드박스를 이용한 제이슨피(JSONP) 데이터의 안전한 파싱 방법

신뢰할 수 없는 제이슨피(JSONP) 응답을 안전하게 처리하기 위해 샌드박스(Sandbox)를 활용하는 기본적인 접근 방식은 다음과 같습니다.

격리된 iframe 생성: 메인 페이지에 동적으로 iframe을 생성하여 제이슨피(JSONP) 요청을 위한 격리된 실행 환경을 마련합니다. 이 iframe은 메인 페이지의 DOM(Document Object Model)에 접근할 수 없으므로 실행되는 코드의 영향력을 제한합니다.
iframe 내부에서 JSONP 요청 시작: 생성된 iframe 안에 <script> 태그를 삽입하여, 반환되는 제이슨피(JSONP) 스크립트가 격리된 환경 내에서 실행되도록 합니다. 이렇게 하면 반환된 스크립트에 악성 코드가 포함되어 있더라도 그 영향이 iframe 내부로 국한되고 메인 페이지에는 미치지 못합니다.
iframe으로부터 안전하게 데이터 검색: iframe 내부의 스크립트는 메인 페이지의 DOM을 직접 수정할 수 없지만, postMessage API와 같이 미리 정의된 방법을 사용하여 안전하게 메인 페이지로 데이터를 전송할 수 있습니다. 메인 페이지는 이 데이터를 받기 위한 이벤트 리스너를 설정하고, 보안을 위해 메시지 출처를 반드시 확인해야 합니다.
iframe 동작 제한 및 모니터링: 콘텐츠 보안 정책(CSP - Content Security Policy)을 사용하여 iframe이 로드하고 실행할 수 있는 리소스를 제한하거나, 다른 브라우저 보안 기능을 활용하여 iframe의 동작을 모니터링하고 제어하는 등의 추가적인 보안 조치를 취할 수 있습니다.

이런 단계를 따르면 제이슨피(JSONP) 응답에 신뢰할 수 없는 데이터나 코드가 포함되어 있더라도 잠재적인 위협을 효과적으로 격리하고 제어하여 사용자 데이터와 보안을 보호할 수 있습니다.

결론적으로, 신뢰할 수 없는 자바스크립트(JavaScript)를 파싱하거나 실행해야 할 때, 실행 환경을 격리하고 싶을 때, 또는 실행 코드 내에서 특정 객체에 대한 접근을 제한해야 할 때 샌드박스(Sandbox)는 매우 중요한 역할을 한답니다.

2. 샌드박스(Sandbox) 구현 방법들

자바스크립트(JavaScript)에서 샌드박스(Sandbox)를 구현하는 몇 가지 주요 방법들을 알아보겠습니다.

with 문과 new Function을 이용한 구현 방법

자바스크립트(JavaScript)의 with 문과 new Function 생성자를 조합하여 간단한 샌드박스(Sandbox) 환경을 만들 수 있습니다.

이 방법은 코드의 실행 범위를 제한하여 전역 변수에 접근하거나 안전하지 않은 작업을 수행하는 것을 방지하는 원리입니다.

with 블록 스코프 내에서는 변수에 접근할 때, 먼저 with에 제공된 객체의 속성을 찾고, 없을 경우에만 상위 스코프 체인을 탐색합니다.

이를 이용하여 코드 내 변수 접근을 효과적으로 감시할 수 있습니다.

function createSandbox(code) {
  // 샌드박스 내부의 전역 객체 역할을 할 빈 객체 생성
  const sandbox = {};
  // with 문을 사용하여 코드의 스코프를 빈 객체로 설정
  // new Function을 사용하여 새 함수를 만들고, 코드 접근을 sandbox 객체로만 제한
  const script = new Function('sandbox', `with(sandbox) { ${code} }`);

  // 함수를 실행하고 sandbox 객체를 인수로 전달
  return function () {
    try {
      script(sandbox);
    } catch (e) {
      console.error("Sandbox execution error:", e);
    }
  };
}

// 샌드박스 환경 사용 예시
const sandboxedScript = createSandbox('console.log("샌드박스 안녕!"); var x = 10; console.log(a);'); // a는 외부 변수
sandboxedScript(); 
// 출력: 샌드박스 안녕!
// 출력(오류): Sandbox execution error: ReferenceError: a is not defined
console.log(typeof x); // 출력: undefined (x는 샌드박스 내부에 정의되어 외부에서 접근 불가)

위 코드에서 createSandbox 함수는 문자열 형태의 code를 매개변수로 받습니다.

이 문자열은 샌드박스(Sandbox) 환경에서 실행될 자바스크립트(JavaScript) 코드를 나타냅니다.

먼저 빈 객체 sandbox를 생성하여 샌드박스(Sandbox) 내부의 '가상' 전역 객체로 사용합니다.

그런 다음 with(sandbox) 문을 사용하여 샌드박스(Sandbox) 코드의 실행 환경을 이 빈 객체로 제한합니다.

즉, 모든 변수와 함수 정의는 sandbox 객체 내부에 국한되며 외부 전역 스코프에 접근할 수 없게 됩니다.

(단, 위 예시처럼 sandbox 객체에 없는 변수 a에 접근하려고 하면 오류가 발생합니다.)

new Function 생성자는 주어진 코드 문자열을 실행하는 새로운 함수를 만듭니다.

이를 통해 동적으로 자바스크립트(JavaScript)를 실행하면서도 그 범위를 제한하여 외부 환경에 접근하거나 수정하는 것을 방지할 수 있습니다.

마지막으로, 호출될 때 샌드박스(Sandbox) 코드를 실행하는 클로저(closure) 함수를 반환합니다.

한계점 및 보안 고려 사항

이 방법은 어느 정도 실행 환경을 격리할 수 있지만, 완벽하게 안전하지는 않습니다.

with 문과 new Function 자체에 보안 위험이 존재하기 때문인데요.

특히, 샌드박스(Sandbox) 내부의 코드가 Function 생성자 자체에 접근할 수 있다면, 샌드박스(Sandbox) 제약을 우회하여 임의의 코드를 실행할 수도 있습니다.

요약하자면, new Function + with 조합은 선의의 사용자를 막을 수는 있지만, 악의적인 공격자를 막기에는 역부족인 방법입니다.

iframe을 이용한 구현 방법

iframe(인라인 프레임)을 사용하여 샌드박스(Sandbox) 환경을 만드는 것은 웹 개발에서 흔히 사용되는 기법입니다.

현재 페이지 내에 완전히 독립적인 HTML 페이지를 삽입할 수 있게 해주므로, 자바스크립트(JavaScript) 실행을 효과적으로 격리하고 스크립트가 메인 페이지의 DOM(Document Object Model)이나 자바스크립트(JavaScript) 환경에 접근하는 것을 방지하여 보안을 강화할 수 있습니다.

HTML 구조

먼저, 다음과 같이 HTML 구조를 설정해야 합니다.

보이지 않게 처리할 수도 있습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>샌드박스 예제</title>
  </head>
  <body>
    <!-- 샌드박스로 사용할 iframe (화면에 보이지 않게 처리) -->
    <iframe id="sandbox" style="display: none"></iframe>
    <script src="index.js"></script>
  </body>
</html>

자바스크립트(JavaScript) 구현

index.js 파일에서 iframe의 contentWindow 속성을 조작하여 간단한 샌드박스(Sandbox) 환경을 만들 수 있습니다.

핵심 아이디어는 iframe 내부에 스크립트를 주입하고 실행하여, 코드가 격리된 컨텍스트(context) 내에서 실행되도록 보장하는 것입니다.

// index.js
function createSandbox(callback) {
  const iframe = document.getElementById('sandbox');
  if (!iframe) {
    return console.error('샌드박스 iframe을 찾을 수 없습니다.');
  }

  // iframe이 완전히 로드된 후 코드를 실행하도록 보장
  iframe.onload = function () {
    const iframeWindow = iframe.contentWindow;

    // 필요하다면 샌드박스 내부에 안전한 전역 변수나 함수 정의 가능
    iframeWindow.safeGlobalVar = {
      /* 안전한 데이터 또는 메소드 */
    };
    iframeWindow.log = function(...args) {
        console.log('[Sandbox Log]', ...args); // 메인 콘솔에 구분해서 출력
    }

    // 콜백 함수를 실행하여, 샌드박스의 window 객체를 전달하고 내부에서 코드를 실행
    try {
        callback(iframeWindow);
    } catch(e) {
        console.error("Sandbox execution error in iframe:", e);
    }
  };

  // 항상 깨끗한 환경을 보장하기 위해 iframe을 다시 로드 (빈 페이지로)
  iframe.src = 'about:blank';
}

// 샌드박스 사용 예시
createSandbox(function (sandboxWindow) {
  // 샌드박스 내부에서 코드 실행
  sandboxWindow.eval('log("iframe 샌드박스 안녕!"); const message = "비밀 메시지";'); 
  // console.log(sandboxWindow.message); // 외부에서 접근 불가 (undefined 또는 에러)
});

iframe 샌드박싱의 제한점

iframe을 샌드박스(Sandbox)로 사용할 때는 몇 가지 기본 제한 사항이 따릅니다.

예를 들어 sandbox 속성이 지정되지 않은 일반적인 iframe이라도, 만약 iframe의 출처(origin)가 부모 페이지와 다르다면 많은 제한이 걸립니다.

HTML5에서는 sandbox 속성을 통해 이러한 제한을 더욱 강화하거나 선택적으로 완화할 수 있습니다.

sandbox 속성은 다음과 같은 값들을 지원하는데요 (값을 지정하지 않으면 모든 제한이 활성화됩니다).

allow-scripts: 스크립트 실행을 허용합니다.
allow-same-origin: 동일 출처(same-origin)로부터의 문서 접근을 허용합니다. 이걸 허용하면 샌드박스 의미가 많이 퇴색될 수 있습니다.
allow-forms: 폼(form) 제출을 허용합니다.
allow-popups: window.open 등으로 새 창이나 팝업을 여는 것을 허용합니다.
allow-top-navigation: 상위 프레임(top-level frame)으로의 이동(navigation)을 허용합니다.

iframe에 sandbox 속성을 사용하는 예시는 다음과 같습니다.

아래 코드는 스크립트 실행만 허용하고 나머지는 모두 제한합니다.

<iframe src="sandbox.html" sandbox="allow-scripts" id="sandbox"></iframe>

메인 페이지와 iframe 간의 안전한 통신

메인 페이지와 샌드박스(Sandbox) iframe 간에 안전하게 데이터를 교환해야 할 때는 postMessage API를 사용할 수 있습니다.

먼저, 메인 페이지의 코드입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>메인 페이지</title>
  </head>
  <body>
    <iframe src="./sandbox.html" id="sandbox" style="width: 600px; height: 400px"></iframe>

    <script>
      var iframe = document.getElementById('sandbox');

      // iframe 로드를 기다립니다.
      iframe.onload = function () {
        // 메시지를 보낼 대상 iframe의 출처(origin)를 명확히 지정해야 합니다.
        // 'http://127.0.0.1:5500' 부분을 실제 sandbox.html의 출처로 변경해야 합니다.
        var targetOrigin = 'http://127.0.0.1:5500'; // 예시 출처, 실제 환경에 맞게 수정
        iframe.contentWindow.postMessage('안녕하세요, 샌드박스!', targetOrigin);
      };

      // iframe으로부터 오는 메시지를 수신합니다.
      window.addEventListener('message', function (event) {
        // 메시지 출처를 확인하여 신뢰할 수 있는지 검증합니다.
        if (event.origin !== 'http://127.0.0.1:5500') { // 예시 출처, 실제 환경에 맞게 수정
            console.warn('신뢰할 수 없는 출처로부터의 메시지 무시:', event.origin);
            return; // 신뢰할 수 없는 출처의 메시지는 무시합니다.
        }

        // 수신된 메시지를 처리합니다.
        console.log('iframe으로부터 메시지 수신:', event.data);
      });
    </script>
  </body>
</html>

이제 iframe 페이지(sandbox.html)에서 메시지를 수신하고 응답하는 코드입니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>샌드박스</title>
  </head>
  <body>
    <script>
      window.addEventListener('message', function (event) {
        // 메시지 출처를 확인하여 신뢰할 수 있는지 검증합니다.
        // 'http://127.0.0.1:5500' 부분을 실제 메인 페이지의 출처로 변경해야 합니다.
        if (event.origin !== 'http://127.0.0.1:5500') { // 예시 출처, 실제 환경에 맞게 수정
             console.warn('신뢰할 수 없는 출처로부터의 메시지 무시:', event.origin);
             return; // 신뢰할 수 없는 출처의 메시지는 무시합니다.
        }

        // 수신된 메시지를 처리합니다.
        console.log('메인 페이지로부터 메시지 수신:', event.data);

        // 메인 페이지로 응답 메시지를 보냅니다.
        // event.source는 메시지를 보낸 window 객체 (이 경우 메인 페이지 window)
        // event.origin은 메시지를 보낸 곳의 출처
        event.source.postMessage('안녕하세요, 메인 페이지!', event.origin);
      });
    </script>
  </body>
</html>

postMessage를 사용할 때는 반드시 event.origin을 확인하여 메시지가 예상된 출처에서 온 것인지 검증하고, 메시지를 보낼 때는 정확한 targetOrigin을 지정하여 의도하지 않은 곳으로 데이터가 전송되는 것을 막아야 보안 취약점을 예방할 수 있습니다.

웹 워커(Web Workers)를 이용한 구현 방법

웹 워커(Web Worker)를 샌드박스(Sandbox)로 사용하는 것은 워커(worker) 내부에서 실행하고 싶은 자바스크립트(JavaScript) 코드를 담은 블롭(Blob) 객체를 동적으로 생성하는 방식을 포함합니다.

이 방법을 사용하면 임의의 자바스크립트(JavaScript) 코드를 메인 페이지의 환경과 완전히 분리된 별도의 스레드(thread)에서 실행할 수 있습니다.

이는 코드를 안전하게 실행하는 또 다른 방법을 제공합니다.

function workerSandbox(appCode) {
  try {
    // 자바스크립트 코드로 Blob 객체 생성
    var blob = new Blob([appCode], { type: 'application/javascript' });
    // Blob URL을 사용하여 Web Worker 생성
    var appWorker = new Worker(window.URL.createObjectURL(blob));

    // 워커와 통신 설정 (예: 결과 받기)
    appWorker.onmessage = function(e) {
      console.log('Worker가 보낸 메시지:', e.data);
    };
    appWorker.onerror = function(e) {
      console.error('Worker 오류 발생:', e.message);
    };
    // 워커 사용이 끝나면 URL 해제 및 워커 종료
    // URL.revokeObjectURL(blobURL); 
    // appWorker.terminate();

  } catch (e) {
      console.error("Worker Sandbox 생성 오류:", e);
  }
}

// 웹 워커 샌드박스 사용 예시
workerSandbox('const a = 1; console.log("Worker 내부:", a); postMessage("결과:" + a);'); 
// 콘솔 출력 (Worker 내부): Worker 내부: 1
// 콘솔 출력 (메인 스레드): Worker가 보낸 메시지: 결과:1

// 메인 스레드에서는 Worker 내부 변수 접근 불가
// console.log(a); // ReferenceError: a is not defined

이 접근 방식은 웹 워커(Web Worker)를 활용하여 신뢰할 수 없는 코드를 격리된 환경에서 실행함으로써 메인 페이지에 영향을 주지 않도록 보장합니다.

웹 워커(Web Worker)는 특히 계산량이 많은 작업을 처리할 때 유용한데요.

별도의 스크립트를 실행하면서도 사용자 인터페이스(UI)가 멈추지 않고 반응성을 유지할 수 있게 해주기 때문입니다.

하지만 웹 워커(Web Worker)는 DOM(Document Object Model)에 직접 접근할 수 없다는 제약이 있습니다.

3. 정리

자바스크립트(JavaScript) 샌드박스(Sandbox)는 메인 애플리케이션의 상태나 데이터에 영향을 주지 않고 코드를 실행하고 테스트할 수 있게 해주는 격리된 실행 환경입니다.

전역 변수 및 함수에 대한 접근을 제한함으로써, 신뢰할 수 없는 코드를 안전하게 실행하고 잠재적인 보안 위험과 데이터 유출을 방지하는 방법을 제공합니다.

샌드박스(Sandbox)는 악의적이거나 예측 불가능한 스크립트로부터 애플리케이션을 보호하는 데 필수적입니다.

샌드박스(Sandbox)를 구현하는 다양한 방법들을 요약하면 다음과 같습니다.

with + new Function:
- 기본적인 격리를 제공합니다.
- 완전히 안전하지는 않습니다. 샌드박스(Sandbox) 코드가 Function 생성자를 통해 탈출할 가능성이 있습니다.
iframe 샌드박싱:
- 내장된 iframe을 사용하여 별도의 실행 환경을 만듭니다.
- 보안성이 높지만 로컬 스토리지(localStorage), 쿠키(cookie) 접근 제한, AJAX 요청 제한 등 일부 제약이 따릅니다.
- postMessage를 이용해 안전한 데이터 교환이 가능합니다.
- sandbox 속성으로 보안 수준을 세밀하게 제어할 수 있습니다.
웹 워커(Web Workers):
- 별도의 스레드(thread)에서 코드를 실행합니다.
- 강력한 격리를 제공하지만 DOM(Document Object Model)에 직접 접근할 수 없습니다.
- 신뢰할 수 없거나 계산량이 많은 스크립트를 실행하는 데 이상적입니다.

샌드박스는 언제 사용해야 할까요?

다음과 같은 상황에서 샌드박스(Sandbox) 사용을 고려해볼 수 있습니다.

신뢰할 수 없는 자바스크립트(JavaScript)를 안전하게 실행하거나 파싱(parsing)해야 할 때.
코드가 메인 애플리케이션을 간섭하는 것을 방지하기 위해 실행 환경을 격리하고 싶을 때.
실행 중인 코드가 특정 객체나 API에 접근하는 것을 제한해야 할 때.

상황에 맞는 적절한 샌드박싱(Sandboxing) 기법을 선택함으로써, 개발자는 보안을 강화하고 스크립트의 안전한 실행을 보장하면서 메인 애플리케이션에 대한 위험을 최소화할 수 있습니다.

'Javascript' 카테고리의 다른 글

프리플라이트 요청(Preflight Request)이란 무엇일까요? (CORS 심층 분석) (0)	2025.05.05
플레이라이트(Playwright) vs 퍼펫티어(Puppeteer): 지금 갈아타야 할까요? (마이그레이션 가이드) (0)	2025.05.05
노드JS에서 멀티스레딩 완벽 정복! 성능 향상의 비밀 풀기 (1)	2025.04.28
타입스크립트 infer 키워드 완벽 정복 가이드 (0)	2025.04.27
Node.js 성능의 비밀! libuv와 함께 CPU/IO 바운드 완벽 정복 가이드 (1)	2025.04.26