"콘텐츠 보안 정책 메타 태그를 찾을 수 없습니다." 내 phonegap 응용 프로그램의 오류

시스템에서 Cordova 5.0을 업데이트 한 후 새 애플리케이션을 작성합니다. 그 당시 장치에서 내 응용 프로그램을 테스트했을 때 콘솔 로그에 오류가 발생했습니다.

No Content-Security-Policy meta tag found.
Please add one when using the Cordova-plugin-whitelist plugin.: 23.

헤드 섹션에 메타를 추가합니다

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src: 'self' 'unsafe-inline' 'unsafe-eval'>

그러나 다시, 동일한 오류가 발생했습니다. 애플리케이션에서 인앱 브라우저 플러그인과 다른 웹 사이트 링크 7 개를 사용합니다.

cordova-plugin-whitelist를 추가 한 후 구체적으로 유지하려면 모든 웹 페이지 링크 또는 특정 링크에 대한 액세스를 허용하도록 애플리케이션에 지시해야합니다.

애플리케이션의 루트 디렉토리에서 찾을 수있는 config.xml에 간단히 추가 할 수 있습니다.

문서에서 권장 되는 사항 :

<allow-navigation href="http://example.com/*" />

또는:

<allow-navigation href="http://*/*" />

플러그인 문서에서 :

탐색 허용 목록

WebView 자체를 탐색 할 수있는 URL을 제어합니다. 최상위 탐색에만 적용됩니다.

단점 : Android에서는 비 http (s) 스키마의 iframe에도 적용됩니다.

기본적으로 file : // URL에 대한 탐색 만 허용됩니다. 다른 URL을 허용하려면 config.xml에 태그를 추가해야합니다.

<!-- Allow links to example.com -->
<allow-navigation href="http://example.com/*" />

<!-- Wildcards are allowed for the protocol, as a prefix
     to the host, or as a suffix to the path -->
<allow-navigation href="*://*.example.com/*" />

<!-- A wildcard can be used to whitelist the entire network,
     over HTTP and HTTPS.
     *NOT RECOMMENDED* -->
<allow-navigation href="*" />

<!-- The above is equivalent to these three declarations -->
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />

앱의 헤드 섹션에 CSP 메타 태그를 추가해야합니다. index.html

당 https://github.com/apache/cordova-plugin-whitelist#content-security-policy

콘텐츠 보안 정책

허용되는 네트워크 요청 (이미지, XHR 등)을 제어합니다 (웹뷰를 통해 직접).

Android 및 iOS에서 네트워크 요청 허용 목록 (위 참조)은 모든 유형의 요청을 필터링 할 수 없습니다 (예 : <video>& WebSockets가 차단되지 않음). 따라서 허용 목록 외에도 모든 페이지에 콘텐츠 보안 정책 <meta> 태그를 사용해야 합니다.

Android에서 시스템 webview 내의 CSP 지원은 KitKat으로 시작됩니다 (그러나 Crosswalk WebView를 사용하는 모든 버전에서 사용 가능).

다음은 .html페이지에 대한 몇 가지 CSP 선언의 예입니다 .

<!-- Good default declaration:
    * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
    * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
    * Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
        * Enable inline JS: add 'unsafe-inline' to default-src
        * Enable eval(): add 'unsafe-eval' to 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 *">

<!-- Allow requests to foo.com -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' foo.com">

<!-- Enable all requests, inline styles, and eval() -->
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

<!-- Allow XHRs via https only -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:">

<!-- Allow iframe to https://cordova.apache.org/ -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://cordova.apache.org">

메타 태그에 오류가 있습니다.

당신 것:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src: 'self' 'unsafe-inline' 'unsafe-eval'>

수정 됨 :

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>

"script-src"뒤의 콜론과 메타 태그의 끝 큰 따옴표에 유의하십시오.

나를 위해 화이트리스트 플러그인 을 다시 설치하는 것으로 충분했습니다 .

cordova plugin remove cordova-plugin-whitelist

그리고

cordova plugin add cordova-plugin-whitelist

이전 버전의 Cordova에서 업데이트하지 못한 것 같습니다.

나에게 문제는 내가 오래된 버전의 cordova android 및 ios 플랫폼을 사용하고 있다는 것입니다. 따라서 android@5.1.1 및 ios@4.0.1로 업그레이드하면 문제가 해결되었습니다.

다음 특정 버전으로 업그레이드 할 수 있습니다.

cordova platforms rm android
cordova platforms add android@5.1.1
cordova platforms rm ios
cordova platforms add ios@4.0.1

연결에 대한 또 다른 문제가 있습니다. 일부 Android 버전은 연결할 수 있지만 일부는 연결할 수 없습니다. 그래서 또 다른 해결책이 있습니다

AndroidManifest.xml에서 :

<application ... android:usesCleartextTraffic="true">
        ...
    </application>

'android : usesCleartextTraffic = "true"'를 추가하세요.

그리고 마침내 문제가 해결되었습니다.