"No Content-Security-Policy meta tag found." error in my phonegap application
CordovaPhonegap PluginsWhitelistCordova Problem Overview
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.
Cordova Solutions
Solution 1 - Cordova
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
>
>
>
>
>
>
Solution 2 - Cordova
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:
>
>
> https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">
>
>
>
>
>
>
>
>
>
>
>
> https://cordova.apache.org">
Solution 3 - Cordova
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.
Solution 4 - Cordova
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.
Solution 5 - Cordova
For me the problem was that I was using obsolete versions of the cordova android and ios platforms. So upgrading to [email protected] and [email protected] 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
Solution 6 - Cordova
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.