사건의 발달
기존의 웹서비스에서 조금 더 플랫폼을 늘리면서도 알림과 같은 편의기능을 십분 활용하고 싶은 마음이 있어 웹뷰를 개발하기 시작했다. 사실 PWA를 고려하기도 했으나, 다른 글에서도 말했듯이 굳이 PWA로 하기에는 아직 사파리에서 제대로 지원하고 있는 기능이 많지 않았기 때문에 결국 ‘설치’라는 행위로 이어지게 하는게 어렵겠다고 판단하여 리액트 네이티브(expo를 얹은)를 기반으로 웹뷰를 개발하기 시작했다.
하지만 시작하자마자 문제가 터지는데…
NSURLErrorDomain -1202 에러가 바로 웹뷰에 로컬호스트를 띄우자마자 뜨기 시작했다.
원인 분석
해당 에러는 서버 인증서가 유효하지 않은 문제였다. 왜냐하면 기존의 https 통신들은 공인 인증된 CA(인증기관) 에서 발급된 https 인증서이기 때문에 인증이 되었지만, 개발서버의 경우에는 대부분 자체 발급한 인증서를 사용한다. cerbot과 같이 공개 CA를 지원하는 곳에서 발급한 인증서라고 하더라도, 결국 해당 인증서는 외부 네트워크에 등록되어 있는 도메인이 아니기 때문에 자체 발급한 인증서이기 때문에 self-signed 인증서는 웹뷰가 봤을 때 공인 인증되지 않았으므로 위험한 도메인이라고 판단하여 자체적으로 통신을 막은 것이다.
해결하기
해결법 1. IOS 설정 변경
IOS 설정을 관리하는 Info.plist 에는 NSAllowsArbitraryLoads 나 모든 HTTP/HTTPS 트래픽을 허용하는 보안 예외 설정이다. 대부분 해당 설정을 하면 애플의 ATS(Apple Transport Security Settings)에서 발생하는 보안 문제를 우회할 수 있다.
하지만 해당 설정의 경우, react-native webview에서는 제대로 작동하지 않는 것으로 확인되고, 이와 관련돼서 계속 안된다는 이슈 또한 꽤 있어 나 또한 다른 방법을 찾아보기로 했다.
해결법 2. http로 낮추기
http 통신을 하면 괜찮지 않을까? 라는 생각을 가지고 http로 바꿔서 해봤지만 다른 문제가 터졌다.
로그인을 통해 받는 쿠키는 samesite:lax 속성이 걸려 있는데, 해당 속성은 http 통신에서 브라우저 정책 단에서 알아서 쿠키를 차단하기 때문에 로그인이 유지되지 않는 문제가 있었다. 그렇다고 samesite: None을 하면 Secure 속성이 필수이기 때문에 https 통신을 해야 했고, 진퇴양난에 빠졌다.
이곳을 지나기 위해선 날 뚫어라
해결법 3. Proxyman을 통한 SSL Proxy
Proxyman 은 프록시 프로그램으로, 내가 컴퓨터에서 보내는 모든 요청에 대해서 중간자 역할을 할 수 있는 응용 프로그램이다.
주로 디버깅할 때, 네트워크의 request와 response를 가독성있게 보기 좋았기 때문에 종종 사용했었는데, 해결책을 생각해보다가 우리가 주로 인프라를 구성할 때 ssl 인증서를 리버스 프록시인 웹서버 단에서 두고 사용하는 방식에서 착안하여 프록시에서 SSL 프록시를 해준다면 HTTPS 통신을 우회할 수 있지 않을까? 라는 생각을 하게 되었다.
이런 생각을하고 찾아봤더니 놀랍게도 이미 SSL Proxing 기능이 탑재되어 있었다.
이와 함께 시뮬레이터에서도 인증서를 미리 proxyman의 인증서를 등록해놓을 수 있었다.
따라서 해당 프록시를 통해 ssl Proxing을 진행하였고 결과는…
정상적으로 프록시가 적용되어 통신이 가능해졌고, 웹뷰에서도 사용이 가능해졌다.
local.kokomen.kr은 내가 커스텀으로 로컬 dns에 편집해놓은 네임서버이다.
암튼 이렇게 https를 우회해서 프록시단에서 https 인증을 시행하였고, 문제없이 작동했다!