[Cordova] 기본 meta태그 및 보안설정

format-detection

스마트폰의 브라우저는 전화, 주소, 이메일 등을 발견하면 자동으로 링크를 걸게됩니다. 이를 제어하기 위해 아래 meta 태그를 사용합니다.

<meta name="format-detection" content="telephone=no, address=no, email=no" />

위 설정은 브라우저가 컨텐트 내의 전화, 주소, 이메일을 발견해도 링크를 자동으로 걸지 않게 합니다.

tap-highlight

IE 11에서 링크를 탭할 경우, 터치된 대상을 명확하게 표시하기 위해 시각적으로 강조하는 기능이 있습니다. 이 기능은 대체로 유용하지만, 이미지링크 혹은 스타일이 적용된 링크의 경우 사용자 경험을 떨어뜨리는 요인이 되기도 합니다. 이를 위해 다음과 같은 <meta> 태그 설정은 이러한 시각적 강조기능을 제거합니다.

<meta name="msapplication-tap-highlight" content="no">

cordova-plugin-whitelist

cordova에서 지원하는 보안설정을 위 플러그인 입니다. 이 플러그인은 Cordova App에서 화이트리스트 정책을 구현할 수 있게 합니다.

지원플랫폼

• Android 4.0.0 이상
• iOs 4.0.0 이상

Navigation Whitelist

App의 WebView가 이동할 수 있는 URL을 통제할 수 있습니다. Top-level 네비게이션에만 적용할 수 있습니다. 안드로이드에서는 Http(s) 스킴이 아닌 iframe에도 적용됩니다.

기본적으로 네비게이션은 file:// URL만 허용하도록 정의됩니다. 다른 URL을 허용하기 위해서는 <allow-navigation> 태그를 config.xml에 추가해야합니다.

<!-- example.com 링크를 추가합니다. -->
<allow-navigation href="http://example.com/*" />

<!-- 프로토콜, 호스트 접두사, 접미사에 와일드카드를 적용할 수 있습니다. -->
<allow-navigation href="*://*.example.com/*" />

<!-- 모든 네트워크, 프로토콜에 대해 허용하기 위해서는 아래를 사용합니다. (보안 상 권장하지 않음) -->
<allow-navigation href="*" />

<!-- 위의 *은 아래 3줄의 선언과 동일합니다. -->
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />

Intent Whitelist

앱은 시스템이 특정 URL을 실행하도록 요청할 수 있습니다. Intent Whitelist는 시스템에 요청 가능한 URL을 통제할 수 있습니다. 기본 값은 어떤 URL도 열수 없도록 되어 있습니다. Intent Whitelist 설정은 안드로이드에서 BROWSEABLE 유형의 Intent를 보내는 것과 동일합니다.

이 Whitelist는 플러그인에는 적용될 수 없으며, 오로지 window.open()에 대한 호출 또는 hyperlinks에만 적용할 수 있습니다.

config.xml에서 다음과 같이 <allow-intent>를 설정하세요.

<!-- 브라우저에서 웹페이지로의 모든 http, https링크를 열수 있도록 허용합니다. -->
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

<!-- example.com 링크가 브라우저에서 열리도록 허용합니다. -->
<allow-intent href="http://example.com/*" />

<!-- 프로토콜, 호스트 접두사, 접미사에 대해 와일드카드를 적용할 수 있습니다. -->
<allow-intent href="*://*.example.com/*" />

<!-- SMS 링크가 메시징 앱을 열수 있도록 허용합니다. -->
<allow-intent href="sms:*" />

<!-- 전화번호 유형의 링크가 전화를 걸 수 있도록 합니다. -->
<allow-intent href="tel:*" />

<!-- 지도의 좌표를 나타내는 링크가 맵을 열수 있도록 허용합니다. -->
<allow-intent href="geo:*" />

<!-- 모든 유형의 URL을 허용합니다. 즉, 모든 URL이 모든 유형의 앱을 실행할 수 있습니다. (보안 상 권장되지 않음) -->
<allow-intent href="*" />

Network Request Whitelist

어떤 네트워크 유형(이미지, XHR, 기타 등등)을 허용할 지 통제할 수 있습니다. (cordova native hooks를 경유하여)

Network Request Whitelist 대신에, 가능하다면 Content Security Policy(CSP) 설정을 사용할 것을 권장합니다. CSP가 보다 더 안전하고, 폭넓은 보안설정을 가능케 합니다.

Network Request Whitelist는 CSP를 지원하지 않는 WebView를 지원하는데 사용할 수 있습니다.

아래와 같이 config.xml에 <access> 태그를 설정하세요.

<!-- google.com의 이미지, XHR, 기타 등등의 네트워크 요청을 허용합니다. -->
<access origin="http://google.com" />
<access origin="https://google.com" />

<!-- maps.google.com의 하위 도메인에 대한 네트워크 요청을 허용합니다. -->
<access origin="http://maps.google.com" />

<!-- google.com의 하위 도메인에 대한 네트워크 요청을 허용합니다. -->
<access origin="http://*.google.com" />

<!-- content: URLs에 대한 요청을 허용합니다. -->
<access origin="content:///*" />

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

<access>태그를 설정하지 않으면, file:// URL만 허용됩니다. 그러나, 기본 Cordova Application에는 <access origin="*">이 포함되어 있습니다.

안드로이드는 기본적으로 https://ssl.gstatic.com/accessibility/javascript/android/에 대한 요청을 허용합니다. 왜냐하면 TalkBack(시각장애인을 위해 문자를 음성으로 읽어주는 기능)이 정상적으로 동작하는데 필요하기 때문입니다.

Content Security Policy (CSP)

어떤 네트워크 요청(이미지, XHR, 기타 등등)이 만들어 질 수 있는지 통제할 수 있습니다. (WebView에서 직접 요청을 통제하는 기능)

위의 Newwork Request Whitelist는 기본적으로 안드로이드나 iOS에서 모든 요청을 필터링 할 수 없습니다. (예: <video>, WebSocket는 필터링 되지 않습니다.) 따라서 Newwork Request Whitelist와 더불어 CSP를 사용하는 사용해야 합니다.

안드로이드에서는 CSP에 대한 지원이 kitkat(버전 4.4)부터 지원됩니다. 이를 위해, Crosswalk WebView를 이용하면 안드로이드 기본WebView의 버전별 파편화 문제 및 CSP미지원 문제를 해결하실 수 있습니다. (참고자료: WebView와 Crosswalk)

CSP는 다음과 같이 .html 페이지의 <meta> 태그를 통해 설정하실 수 있습니다.

<!-- 
    권장 기본설정
    * gap: iOS(UIWebView를 이용할 때)를 위해 필요합니다. 또한 JS->Native 커뮤니케이션에도 필요합니다.
    * https://ssl.gstatic.com은 안드로이드에서만 필요하며 TalkBack이 정상적으로 동작하는데 필요합니다.
    * XSS 취약점의 위험을 완화하기 위해서 eval()과 인라인 스크립트의 설정이 비활성화 됩니다. 이 설정을 바꾸기 위해서는,
        * 인라인 스크립트 실행하기: 'unsafe-inline'을 default-src에 추가해주세요.
        * eval() 활성화 하기: 'unsafe-inline'을 default-src에 추가해주세요.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">

<!-- example.com으로 요청을 가능케 합니다. -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' example.com">

<!-- 모든 요청, 인라인 스타일, eval()을 가능케 합니다. -->
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

<!-- https에서만 XHR이 허용되도록 합니다. -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:">

<!--  iframe이 https://example.com/에 접속할 수 있도록 합니다. -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://example.com">