[React Native] IOS에서 http:// 로 구성된 WebView 화면이 출력되지 않는 경우 해결방법!

최근 회사 일이 앱 런칭일정으로 인해 사이드 프로젝트에 시간을 많이 투자하지 못하고있었습니다.

현재 진행중인 사이드 프로젝트 "Flambus(플램버스)"는 내 근처 맛집을 탐험하며 아케이드 형식 게임 방식으로 맛집을 탐방하며, 맛집 정보를 공유하는 플랫폼 입니다

대학생 디자이너 3명, 취준 프론트엔드 개발자 1명, 백엔드개발자 2명과 함께 진행하고 있습니다. 저는 백엔드 개발로 참여했지만, 회사에서는 ReactNative 앱을 개발하고 있기 때문에 프론트엔드 개발자인 "섭우"님에게 많이 배우기 위해 앱 개발도 조금씩 참여하기러 했습니다!

서비스의 아키텍쳐와 ERD 등 개발의 관련된 글은 정리해서 또 포스팅할 예정이에요

---

현재 저희 프로젝트는 섭우님이 카카오맵 기반의 웹뷰로 맵을 구현하고 앱과 통신 브릿지를 통해 웹뷰와 앱이 통신시키는 방식으로 개발을 진행중입니다
몇일 전 섭우님에게 카톡을 통해 해당 이슈를 파악하게 되었어요.

(텍스트에서도 빡침이 느껴네요)

저도 너무 궁금해서 원인을 파악하고싶은 맘에 칼퇴근을 하고 호기롭게 에뮬레이터를 킨 순간
IOS에서만 웹뷰 화면에서 백지가 출력되었습니다.

물론 사파리, 혹은 PC크롬으로 웹서버 접근시 정상적으로 맵이 출력이 되는데 말이죠.

1차 시도

일단 카카오 SNS 로그인을 구현할때도 https:// 인증 관련한 이슈가 많았기 때문에 로컬
http://localhost로 리다이렉팅 되는게 문제인거 같아서 "mkcert" 를 이용해 로컬 https 인증 도메인을 달면 해결되겠지 생각했습니다.

mkcert 로컬 환경에서도 https:// 보안 인증서를 사용할수있어요 !
https://github.com/FiloSottile/mkcert

https://도메인을 달고도 IOS 화면에서는 백지가 계속 출력되었습니다.

다른 플랫폼들에서는 정상동작 하기에 확실히 IOS 정책상 인증되지않은 도메인을 차단하는것이라고 생각했는데 안되서 당황했습니다.

2차 시도

2차 시도까지 오기에 1~2시간 가량의 삽질이 있었습니다.
로컬이 아닌 실제 서버에도 웹서버를 올려도 봤지만 결과는 FAIL 그래서 "근본적인 문제"를 해결 할 수 있는 방법이 있는지 찾기 시작했습니다.

바로 IOS 자체에서 해당 정책을 풀 수 있는지 말이죠!

그래서 찾게된것이 바로 ATS (App Transport Security) 입니다.
2015년부터 IOS 9 버전부터 도입된 보안사항 입니다.
이 시큐리티 보안 정책이 인증되지않은 http 컨텐츠의 로드를 막고있었던 모양이네요.

해결방법

Xcode를 열어주세요 (IDE에서 ios폴더에서 바로 info.plist 열어두되요!)

info.plist 를 열고 "App Transport Security Settings" 카테고리에서
"Allow Arbitray Loads in Web Content"
"Allow Arbitray Loads"
2개를 추가하고 "Yes"로 해주시고 새로 빌드해주세요!

결과

정상적으로 웹뷰 화면이 출력이 되네요
물론 정식 배포할때는 웹서버에서 https 인증도메인이 달려서 나가겠지만, 개발할동안은 로컬에서도 편하게 사용할 수 있도록 풀어두는게 좋을것 같네요!

레퍼런스

https://developer.apple.com/news/?id=jxky8h89