프론트 개발의 한계(로컬 파일과 보안)

최근에 처부에서 토이 프로젝트를 진행하면서 간단한 웹을 구현하는데,

이곳 "직장"특성 상 웹서버를 구동할 수도 없고 오직 순수한 html css javascript로만 개발을 해야하기 때문에

'이런 기능을 넣어서 만들면 좋겠다' 라고 구상했던 것들을 구현하지 못하게 된 것이 많다. (평소에 깊게 공부를 안한 탓이다)

 

이번 프로젝트는 순전히 로컬파일인 웹소스들을 통해서 평소에 하는 업무를 편하게 하기 위함이었다.

이번 개발을 하는 동안 프론트엔드에서 돼서는 안되는 것들에 대해 막연히 될 것이라고 생각했었다.

 

처음으로는 문제가 된 구상은 웹 내부의 버튼을 누르면 내 컴퓨터에 위치해 있는 특정 파일(한셀)을 실행시키는 기능이었다.

이 웹개발을 하면서 나는 예전에 node.js 를 사용하여 서버의 pc의 파일 정보를 가져와 본 경험이 떠올라 이 기능도 구현할 수 있을 줄 알았는데, 지금은 순전히 프론트의 기능만 사용해야 했었고 프론트에서는 이러한 기능을 보안상의 이유로 구현할 수 없다는 것을 새롭게 알게 되었다. 사실 프론트엔드에서 특정 위치에 특정 파일을 실행시키는 코드는 코드 자체로 의미가 없다. 만약 가능하다 해도 사용자마다 다 로컬 디렉토리가 다르기 때문에 파일의 위치나 유무조차 파악할 수 없을 것이기 때문이다. 또한 웹사이트가 사용자 pc 의 파일을 제어하게 된다면 보안적 이슈가 된다.

 

두번째로 문제가 된 구상은 위와 같은 이유인데,  한 폴더에 텍스트 파일을 만들고 웹 상에서 그걸 읽어와서 화면에 출력하는 기능을 구현하고 싶었다. 이 역시 사용자의 pc 의 파일을 읽는다는 점에서 보안의 이유로 되서는 안될 기능이었다. 또한 사용자의 특정 pc 위치에 파일을 생성할수 있게 된다면 웹사이트에서 사용자의 pc에 악성프로그램등을 설치하게 될 우려도 있다. 이러한 이유로 javascript 에서는 로컬 파일을 쓰고 읽는 과정에 제한이 많았다. 물론 구글링의 결과 javascirpt 으로 사용자가 직접 입력한 내용에 대해서는 파일을 저장하게 하는 기능이 있다는 것을 알게 되었다. 물론 이것도 사용자가 직접 저장 위치를 선택하게 되는 방식이다. 웹에서는 pc의 특정위치에 파일을 저장하게 하는 기능이 없다.

https://syki66.github.io/blog/2020/02/07/js-load-local-file.html

자바스크립트를 이용하여 로컬 파일 불러오기 - syki66 blog

 

개인이 사용할 웹을 만들면서 웹서버 없이 프론트만으로 제작을 한다는게 어떤 제약이 생기는지 알게되는 프로젝트였다.