[하이브리드앱] cordova-plugin-whitelist 분석

WhiteList ?

Cordova App에서 Navigation(화면이동), Intent(scheme 호출), network Request(image, XHR, 등) 의 권한정책을 설정하는 플러그인 입니다.

하이브리드앱 이라는건 애초에 화면에 대한 리소스를 App 내부 Assets 에서 가지고 있는 상태에서 이 리소스를 사용하여 앱을 구성하는 것 입니다.

허나 데이터를 불러오는 ajax, 앱을 호출하는 intent, webview내에서의 화면이동 등을 이용하여 좀 더 유연하게 하이브리드앱 / 웹앱을 구현할 수 있도록 플러그인 형태로 제공하는 

것 입니다.

기본값으로는 외부 Navigation이 막혀있기 때문에 webview 내부에서 외부 http / https로의 주소이동 시 웹뷰내에서의 이동이 아닌 외부 브라우저를 통해서 새창이 뜨는 걸 확인

할 수 있습니다.

리소스를 앱 내부가 아닌 웹페이지를 패킹한 앱같은 경우에는 웹뷰가 해당웹에 접속이 가능하도록 Navigation 정책과 image, ajax를 허용할 수 있도록 network request 정책도 같이 풀어줘야 합니다.

Navigation Whitelist

다음은 Navigation의 정책을 허용하는 방법입니다.

화이트리스트의 설정을 config.xml 내부에서 설정하도록 되어있습니다.

기본적으로  file : // URL 만 탐색 할 수 있습니다.

<!-- http://example.com 도메인의 웹뷰연결 허용 -->
<allow-navigation href="http://example.com/*" />

<!-- 와일드카드 * 을 이용하여 http / https 같은 프로토콜과 호스트도 모두 허용할 수 있습니다. -->
<allow-navigation href="*://*.example.com/*" />

<!-- 또한 모든 타입을 허용할수도 있습니다. -->
<allow-navigation href="*" />

<!-- http / https 의 모든 도메인, 호스트를 허용하는 설정입니다. -->
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />

Intent Whitelist

Intent 호출의 정책을 설정할 수 있는 intent whitelist 입니다.

허나 모든 intent의 호출을 허용은 안되며 Browsable 카테고리에 해당되는 tel, email, sms 등의 인텐트만 허용됩니다.

browsable의 인텐트만 허용되므로 일반적인 결제 모듈에서의 동작이 원활하지 않습니다.

웹앱(웹을 바라보고있는 하이브리드앱)에서의 결제 모듈을 사용하시려면 whitelist를 거치지 않고 intent를 실행할 수 있도록 커스텀 작업이 필요합니다.

여기서 지정된 intent는 하이퍼링크를 통한 이동이나 window.open 함수를 통한 호출에만 해당됩니다.

<!-- 모든 웹페이지를 시스템 브라우저로 오픈합니다. -->
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

<!-- http 프로토콜의 example.com 의 도메인을 허용합니다. -->
<allow-intent href="http://example.com/*" />

<!-- 모든 프로토콜과 모든 호스트 example.com 도메인을 허용합니다. -->
<allow-intent href="*://*.example.com/*" />

<!-- sms 링크를 허용합니다. browsable 인텐트랑 사용가능합니다. -->
<allow-intent href="sms:*" />

Network Request Whitelist

network request의 정책을 설정할 수 있는 network request WhiteList 입니다.

기본허용된 값은 file:// 스키마만 허용됩니다.

여기서 network request 란 img 태그의 src, script 태그의 src, iframe 태그의 src, ajax 등 크롬 개발자도구 network 탭에서 볼수있는 요청들은 network request에 해당됩니다.

<!-- 구글의 http / https 를 허용합니다. -->
<access origin="http://google.com" />
<access origin="https://google.com" />

<!-- 모든 요청을 허용합니다. -->
<access origin="*" />

시간이되면 이외에 Content-Security-Policy도 다뤄볼까 합니다.

웹앱 구성시 코르도바에서 가장문제가 되는 결제모듈 에서의 결제 앱 호출실패 등 스키마 호출부분은 whitelist로 인해서 호출이 불가능합니다.

이경우 whitelist의 실행을 우회해서 intent / scheme 를 호출할 수 있도록 커스텀 작업을 진행해야지만 올바르게 작동합니다.