“ ไม่พบเมตาแท็ก Content-Security-Policy” เกิดข้อผิดพลาดในแอปพลิเคชัน 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://*/*" />

จากเอกสารของปลั๊กอิน:

รายการที่อนุญาตสำหรับการนำทาง

ควบคุม URL ที่ WebView สามารถนำทางไปได้ ใช้กับการนำทางระดับบนสุดเท่านั้น

Quirks: บน Android ยังใช้กับ iframe สำหรับรูปแบบที่ไม่ใช่ http

โดยค่าเริ่มต้นจะอนุญาตให้ใช้การนำทางไปยังไฟล์: // 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 ฯลฯ ) ที่อนุญาตให้ทำได้ (ผ่าน webview โดยตรง)

ใน Android และ iOS รายการที่อนุญาตพิเศษของคำขอเครือข่าย (ดูด้านบน) ไม่สามารถกรองคำขอทุกประเภทได้ (เช่น<video>& WebSockets จะไม่ถูกบล็อก) ดังนั้นนอกเหนือจากรายการที่อนุญาตแล้วคุณควรใช้ แท็กนโยบายความปลอดภัยของเนื้อหา <meta>ในทุกหน้าของคุณ

บน Android การรองรับ CSP ภายใน Webview ของระบบจะเริ่มต้นด้วย KitKat (แต่มีให้บริการในทุกเวอร์ชันที่ใช้ Crosswalk WebView)

ตัวอย่างการประกาศ CSP สำหรับ.htmlเพจของคุณมีดังนี้

<!-- 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"'

และแก้ไขปัญหาได้ในที่สุด