1 minute read

과제 진도 현황

  • 메인 페이지에서 문제를 클릭할 경우, 문제 상세 페이지로 이동 및 렌러딩
  • 코드 미러를 이용하여 유저가 문제 솔루션을 입력하기 위한 코드 에디터 생성
  • 문제 제출를 클릭할 경우, 유저가 입력한 코드를 전달 및 실행
  • 모든 테스트 케이스가 통과할 경우, 축하 페이지 렌더링
  • 테스트 케이스가 통과하지 못하거나 실행 오류가 발생할 경우, 실패 페이지 렌더링

회고

원래 목표는 2일차에 passport를 이용하여 로그인 페이지를 완성하는 것이였지만, 메인 페이지에서 문제를 렌더링하는 과정을 마치고나니 그 뒤의 요구 사항도 마저 끝내고 싶었다.

따라서 3일차까지 문제와 관련된 모든 요구 사항을 충족시켰다.

2일차와 3일차에 가장 어려웠던 부분은 vm이라는 모듈을 이용하여 유저가 입력한 테스트 케이스를 전달받는 부분이었다.

유저가 입력한 코드는 문자열이므로 테스트 케이스를 통과하게 하기 위해서는 문자열을 자바스크립트 코드로 변환해야 했다.

문자열을 코드로 바꾸기 위해서 가장 먼저 든 생각은 eval이라는 메서드였다.

하지만 과제 설명에 eval의 위험성에 대해 언급되어있어, MDN에서 eval에 관해 조사하던 중 eval은 보안 측면에서 굉장히 불리한 조건을 가지고 있는 메서드라는 것을 알게 되었다.

eval은 메서드를 실행하는 범위 내의 지역 변수에 접근할 수 있다.

예를 들어 만약 유저가 악성 코드를 작성하여 입력할 경우, 서버를 망가뜨릴 수 있다.

위와 같은 치명적인 단점때문에 eval을 대체할 수 있는 것이 new Function이였다.

new Function을 사용할 경우, eval과 달리 코드 실행 부분이 함수 영역으로 따로 분리되기 때문에 유저 코드가 지역 변수에 접근할 수 없다.

그럼에도 불구하고 new Function 또한 eval과 같은 보안 측면에서 취약점이 있었다.

eval과 new Function을 제외하고 유저 코드를 자바스크립트로 변환할 수 있는 방법으로는 vm2라는 모듈을 사용하는 것이 있었다.

vm2는 node의 내장 모듈인데 가상 라이브러리를 사용하여 문자열을 코드로 변환해줄 수 있었다.

가상 라이브러리이므로 보안상으로는 eval과 new Function 보다는 낫지만 이 또한 취약점이 있다고 하여 더 조사해볼 예정이다.

서론이 너무 길었지만, 이틀동안 과제를 진행하면서 vm2를 사용하는 부분에서 가장 헤매었다.

우선 vm에 관한 정보가 많지 않아 사용법을 익히기에 부족한 부분이 많았다.

따라서 공식 문서를 보며 여러가지 방법을 시도해보았다.

처음엔 vm.run() 메서드만 사용하면 되는 줄 알고 인자로 유저 코드를 넣고 반환값을 받으려고 했었다.

하지만 인자로 넣은 유저 코드를 사용하기 위해서는 유저 코드를 모듈화 및 추출을 해서 사용할 수 있었다.

따라서 인자에 “module.exports = “라는 구문을 추가해주어 문제를 해결할 수 있었다.

다음부터 공식 문서를 조금 더 꼼꼼히 봐야겠다는 생각이 들었고, 시행 착오는 많았지만 구현하고나니 뿌듯했다.

내일은 마지막 관문인 로그인 기능을 완료하고 에러 핸들링을 수정할 예정이다.

Leave a comment