"Tidak ada tag meta Kebijakan Keamanan Konten." error di aplikasi phonegap saya


94

Setelah memperbarui Cordova 5.0 di sistem saya, saya membuat aplikasi baru. Ketika saya menguji aplikasi saya pada perangkat saat itu saya mendapatkan kesalahan di log konsol:

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

Saya menambahkan meta di bagian kepala

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

Tapi sekali lagi, saya mendapat error yang sama, di aplikasi saya menggunakan plugin browser dalam aplikasi dan 7 tautan situs web lainnya.


3
Sudahkah Anda menginstal plugin cordova-plugin-whitelist- github.com/apache/cordova-plugin-whitelist dengan benar ? Setelah itu, Anda harus menambahkan <allow-navigation href="http://*/*" />ke config.xml
Keval

1
Terima kasih Keval, setelah menambahkan <allow-navigation href = "http: // * / *" /> sekarang aplikasi saya berfungsi dengan baik. Terima kasih sekali lagi.


3
Ketika kesalahan dapat dibuat ketika satu karakter hilang dalam kode, mengapa SO tidak mengizinkan pengeditan yang kurang dari enam karakter? Yang ini cukup mudah diperbaiki, hanya mencoba menyelamatkan orang lain beberapa detik di masa depan. Ada tanda kutip ganda yang hilang di akhir atribut konten tag meta.
Jason D.

Jawaban:


86

Setelah menambahkan daftar putih-plugin-cordova , Anda harus memberi tahu aplikasi Anda untuk mengizinkan akses semua tautan halaman web atau tautan tertentu, jika Anda ingin membuatnya tetap spesifik.

Anda cukup menambahkan ini ke config.xml Anda , yang dapat ditemukan di direktori root aplikasi Anda:

Direkomendasikan dalam dokumentasi:

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

atau:

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

Dari dokumentasi plugin:

Daftar Putih Navigasi

Mengontrol URL mana yang dapat dinavigasi oleh WebView itu sendiri. Berlaku hanya untuk navigasi tingkat atas.

Quirks: di Android, ini juga berlaku untuk iframe untuk skema non-http (s).

Secara default, navigasi hanya ke file: // URL, diperbolehkan. Untuk mengizinkan URL lain, Anda harus menambahkan tag ke config.xml Anda:

<!-- 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:*" />


38

Anda harus menambahkan tag meta CSP di bagian kepala aplikasi Anda index.html

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

Kebijakan Keamanan Konten

Mengontrol permintaan jaringan mana (gambar, XHR, dll) yang diizinkan untuk dibuat (melalui tampilan web secara langsung).

Di Android dan iOS, daftar putih permintaan jaringan (lihat di atas) tidak dapat memfilter semua jenis permintaan (mis. <video>& WebSockets tidak diblokir). Jadi, selain daftar putih, Anda harus menggunakan tag Kebijakan Keamanan Konten <meta> di semua halaman Anda.

Di Android, dukungan untuk CSP dalam tampilan web sistem dimulai dengan KitKat (tetapi tersedia di semua versi menggunakan Crosswalk WebView).

Berikut beberapa contoh deklarasi CSP untuk .htmlhalaman Anda :

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

Ketika saya menambahkan Decleration CSP, potongan kode berikut untuk peta google gagal seperti ini. Ada ide ? var pos = new google.maps.LatLng (position.coords.latitude, position.coords.longitude); // baris 173 11-09 21: 17: 30.724: D / SystemWebChromeClient (25692): file: ///android_asset/www/index.html: Line 173: Uncaught ReferenceError: google tidak ditentukan
shamaleyte

1
Saya harus menutup tag meta dengan /> agar dikenali
metamagikum

23

Ada kesalahan dalam tag meta Anda.

Milikmu:

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

Dikoreksi:

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

Catat titik dua setelah "script-src", dan tanda kutip ganda di akhir tag meta.


3
ketika saya menyertakan <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>pemuatan ulang langsung dengan kerangka kerja ionik berhenti bekerja jadi waspadalah terhadap orang lain di luar sana
CommonSenseCode

@codePlusPlus untuk mengaktifkan Ionic livereload lagi, tambahkan http://localhost:35729ke direktif script-scr dan ws://localhost:35729ke direktif connect-src.
kolli

@ Kolli, dapatkah Anda menunjukkan seperti apa arah arah baru itu? tidak jelas bagaimana menambahkannya ke arahan.
jessewolfe

Saya melihat infonya ada di postingan aslinya. Tetapi untuk memperjelas: Perhatikan bahwa dengan 'menambahkan', ini berarti Anda dapat mengganti script-src 'self' 'unsafe-inline' 'unsafe-eval'dengan script-src 'self' http://localhost:35279 'unsafe-inline' 'unsafe-eval'dan Anda akan menambahkan arahan baru dengan titik koma pemisah di akhir atribut konten:; script-src ws://localhost:35279
jessewolfe

Koreksi di atas ... untuk bagian kedua, seharusnya ; connect-src 'self' ws://localhost:35279. Perhatikan bahwa saya mendapatkan kesalahan (tidak dapat mengakses file: // <path to index.html> karena pelanggaran CSP) sampai saya menambahkan 'self'.
jessewolfe

2

Bagi saya itu cukup untuk menginstal ulang plugin daftar putih :

cordova plugin remove cordova-plugin-whitelist

lalu

cordova plugin add cordova-plugin-whitelist

Sepertinya pembaruan dari Cordova versi sebelumnya tidak berhasil.


1

Bagi saya masalahnya adalah saya menggunakan versi usang dari platform cordova android dan ios . Jadi memutakhirkan ke android@5.1.1 dan ios@4.0.1 menyelesaikannya.

Anda dapat meningkatkan ke versi khusus ini:

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

maksud Anda android 5.1.1 ?
mix3d

Saya mengikuti keduanya, saran @Maxim dan Pierre-Alexis de Solminihac, dan akhirnya Aplikasi saya berfungsi dengan baik. Terima kasih!
Zalakain

0

Ada masalah lain tentang koneksi. Beberapa versi android dapat terhubung tetapi beberapa tidak. Jadi ada solusi lain

di AndroidManifest.xml:

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

Cukup tambahkan 'android: usingCleartextTraffic = "true"'

dan masalah akhirnya terpecahkan.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.