조금은 안전하게 ngrok 사용하기

 

PC에서 개발한 API를 로컬 서비스로 띄워서 공유하고 싶을 때 어떻게 할까? 필자의 경우, ngrok을 사용한다. 방화벽 넘어서 외부에서 로컬에 접속 가능하게 하는 터널 프로그램이다. 쉽게 외부로부터 접근을 할 수 있고, 활용 범위도 넓어서 많은 개발자가 사용한다. 그런데 기본적인 사용에 있어서 꺼림찍한 부분도 있다. 공유 URL만 있으면 누구나 접근이 가능하다는 것. 생각해보았다. ngrok에는 분명 이런 경우를 고민해서 인증절차를 만들어 놓았을 것이라고. 아니나 다를까 ID/Password 형태로 접근을 제한하는 방식이 있었다. 그 방법을 공유해보고자 한다.

 

ngrok - Online in One Line

 

먼저 ngrok 설치를 해보자. 설치 방법은 macOS 기준으로 아래와 같다. 기타 방법은 홈페이지를 참고하길 바란다.

brew cask install ngrok

 

설치가 되었으면 ngrok을 띄워보자. 만약 띄우고자 하는 서비스의 Port가 4000이라고 하면 아래와 같다.

ngrok http 4000

 

그.런.데.

이렇게하면 아무나 접근이 가능한 상태가 된다. 불안하다면 ID와 Password를 설정할 수 있다. 아래처럼. (참고로 필자는 배틀그라운드 e스포츠를 즐겨본다. ID는 응원하는 팀, 비밀번호는 조만간 시작하는 대회이름이다.)

ngrok http 4000 --basic-auth="geng:2022pcs7"

 

실행하면 위와 같은 정보를 볼 수 있다. 여기서 Forwarding에 나타난 URL을 브라우저에 입력해보자. 아래와 같은 화면처럼 ID와 비밀번호를 입력하는 팝업이 나타난다. 여기서 앞에서 세팅한 값들을 입력한다.

 

 

그런데 만약 REST API 클라이언트로 직접 호출하거나 포스트맨과 같은 도구로 호출한다면? 위 브라우저에서 개발자도구를 열어 요청 정보를 확인해보자. 아래처럼 Request Headers에 authorization 정보를 볼 수 있다. 이 정보를 헤더값에 넣어주면 ngrok을 통해 조금은 안전한 요청을 할 수 있게된다.

 

 

이 방법이 완벽하게 안전한 것은 아니지만 그래도 인증절차가 전혀 없는 것보다는 훨씬 나아보인다. 사이드 프로젝트라도 보안을 조금 신경쓰는 스마트한 개발자인척을 해보자.

 

 

👉 참고자료
ngrok으로 로컬 네트워크의 터널 열기