94

After update Cordova 5.0 in my system, I create new applications. When I tested my application on a device that time I get an error in the console log:

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

I add meta in the head section 

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

But again, I got the same error, in the application I use in-app browser plugin and 7 of other website links.

Manikandan C
  • 592
  • 7
  • 15
  • 3
    Have you correctly installed the `cordova-plugin-whitelist` - https://github.com/apache/cordova-plugin-whitelist plugin? After that, you will have to add `` to your **config.xml** – Keval May 13 '15 at 15:53
  • 1
    Thanks Keval, after add now my application works fine. Thanks ones again. –  May 13 '15 at 17:39
  • related [How to configure Cordova-android 4.0 with white-list](http://stackoverflow.com/a/29730105/383414) – Richard Le Mesurier Aug 20 '15 at 14:20
  • 3
    When an error can be created when one character is missing in code, why doesn't SO allow edits that are less than six characters? This one's pretty easy to fix, was just trying to save someone else a few seconds in the future. There's a double quote missing at the end of the meta tag's content attribute. – Jason D. Nov 09 '15 at 02:01

6 Answers6

86

After adding the cordova-plugin-whitelist, you must tell your application to allow access all the web-page links or specific links, if you want to keep it specific.

You can simply add this to your config.xml, which can be found in your application's root directory:

Recommended in the documentation:

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

or:

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

From the plugin's documentation:

Navigation Whitelist

Controls which URLs the WebView itself can be navigated to. Applies to top-level navigations only.

Quirks: on Android it also applies to iframes for non-http(s) schemes.

By default, navigations only to file:// URLs, are allowed. To allow other other URLs, you must add tags to your 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:*" />
Sylvain Leroux
  • 44,729
  • 6
  • 86
  • 107
Keval
  • 3,311
  • 2
  • 22
  • 41
  • @AmeePrajapati try http://stackoverflow.com/questions/37044969/cordova-5-1-1-there-was-a-network-error-message-in-onreceivederror-method-when – Kush Patel Mar 21 '17 at 10:50
38

You have to add a CSP meta tag in the head section of your app's index.html

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

Content Security Policy

Controls which network requests (images, XHRs, etc) are allowed to be made (via webview directly).

On Android and iOS, the network request whitelist (see above) is not able to filter all types of requests (e.g. <video> & WebSockets are not blocked). So, in addition to the whitelist, you should use a Content Security Policy <meta> tag on all of your pages.

On Android, support for CSP within the system webview starts with KitKat (but is available on all versions using Crosswalk WebView).

Here are some example CSP declarations for your .html pages:

<!-- 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">
tomtastico
  • 5,734
  • 2
  • 20
  • 28
  • When I add the CSP Decleration, the following piece of code for google map fails like this. Any idea ? var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); //line 173 11-09 21:17:30.724: D/SystemWebChromeClient(25692): file:///android_asset/www/index.html: Line 173 : Uncaught ReferenceError: google is not defined – shamaleyte Nov 09 '15 at 19:18
  • 1
    I needed to close the meta tags with /> to be recognized – metamagikum Dec 02 '15 at 16:46
23

There are errors in your meta tag.

Yours:

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

Corrected:

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

Note the colon after "script-src", and the end double-quote of the meta tag.

Kae Verens
  • 3,806
  • 3
  • 19
  • 36
  • 3
    when I include `` live reload with ionic framework stops working so beware others out there – CommonSenseCode Oct 06 '15 at 19:07
  • @codePlusPlus to activate Ionic livereload again, add `http://localhost:35729` to the script-scr directive and `ws://localhost:35729` to the connect-src directive. – kolli Mar 31 '16 at 16:00
  • @kolli, can you show what the new diretives would look like? it's not clear how to add them to the directives. – jessewolfe Apr 24 '16 at 04:02
  • I see the info is in the original post. But to clarify: Note that by 'adding', this means you can replace `script-src 'self' 'unsafe-inline' 'unsafe-eval'` with `script-src 'self' http://localhost:35279 'unsafe-inline' 'unsafe-eval'` and you would add a new directive with a separating semi-colon to the end of the content attribute: `; script-src ws://localhost:35279` – jessewolfe Apr 24 '16 at 04:29
  • Correction to above... for the second part, it should be `; connect-src 'self' ws://localhost:35279` . Note that I was getting an error (could not access file:// due to CSP violation) until I added 'self'. – jessewolfe Apr 24 '16 at 05:03
  • @jessewolfe Yes, that's exactly what I meant ;) – kolli Apr 24 '16 at 08:53
  • I got this message any clue for this The Content Security Policy 'default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'' was delivered via a element outside the document's , which is disallowed. The policy has been ignored. – Yosra Nagati May 16 '16 at 15:07
  • @YosraNagati, you probably figured this out already, but I didn't see the reply when you posted. The tag must be between the and tags to be processed properly. – jessewolfe Apr 09 '17 at 02:49
2

For me it was enough to reinstall whitelist plugin: 

cordova plugin remove cordova-plugin-whitelist

and then

cordova plugin add cordova-plugin-whitelist

It looks like updating from previous versions of Cordova was not succesful.

Maxim
  • 10,077
  • 5
  • 26
  • 43
1

For me the problem was that I was using obsolete versions of the cordova android and ios platforms. So upgrading to android@5.1.1 and ios@4.0.1 solved it.

You can upgrade to these specific versions:

cordova platforms rm android
cordova platforms add android@5.1.1
cordova platforms rm ios
cordova platforms add ios@4.0.1
Community
  • 1
  • 1
Pierre-Alexis de Solminihac
  • 1,635
  • 2
  • 10
  • 14
0

There is an another issue about connection. Some android versions can connect but some cannot. So there is an another solution

in AndroidManifest.xml:

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

Just add 'android:usesCleartextTraffic="true"'

and problem solved finally.

Enes Yurtlu
  • 1