HTTP HTTPS 보안정책

VS Code에서 작성한 html파일을 로컬에서 띄워볼때는 VS Code 플러그인 중 live server를 설치하여 띄워볼 수 있었다.

http://localhost:5500. 

그러나 이 주소는 로컬 PC에서만 접근이 가능하고, 모바일에서 접근하다면 로컬 PC의 내부 IP((192.---.-.-))를 써야한다.

 

모바일 브라우저에서 접근할 때의 문제는 다음과 같다.

 

1. HTTP 보안 문제

대표적인 모바일 브라우저

AOS : 삼성 인터넷, 카톡 브라우저

IOS : Safari, 카톡 브라우저, Chrome

대부분의 모바일 브라우저의 경우 HTTPS가 아닌 주소에 대해선 보안기능을 차단한다.

따라서 로컬 PC의 내부 IP를 쓴다해도, http://내부ip:5500으로는 접근이 불가능하다. 

 

2. 보안정책 Secure Context

접근하고자 하는 웹상의 내용에 위치정보와 같은 보다 민감한 이슈가 포함되어있는경우

내가 띄우고자 하는 웹은 특히나 사용자의 위치정보를 얻고자 오픈된 라이브러리의 api가 소스코드내에 포함되어있다.

navigator.geolocation

-> 해당 api를 통해 사용자의 현 위치의 위도, 경도를 얻을 수 있다.

 

이 navigator.geolocation과 같은 기능은 HTTPS 혹은 localhost에서만 작동할 수 있게 되어있다고 한다. 

따라서 모바일에서 접근하고자 할 땐, HTTPS 필수 인 것. 

따라서 이를 위해 HTTPS 터널링 작업을 해주었다. 이는 보안이 적용된 HTTPS URL을 통해 내부에서 띄운 로컬 서버 HTTP에 접근가능하게 해주는 것.

 

OpenSSL, ngrok 등 다양한 방법이 있다고 하는데 나는 그 중 ngrok를 사용했다.

가입 후 제공하는 1개의 무료 url로 접근.

 

테스트해보니 삼성 브라우저, 카톡 브라우저, safari 모두 접근+의도한대로 작동하는것을 확인했다.

단, ios chrome의 경우 safari 베이스임에도 불구하고 더 보안정책이 엄격하여, 위치정보를 물어보는 팝업자체를 차단하고 있다.