Search code examples
cordovaionic-frameworkcordova-plugins

How to implement Cordova white list plugin in ionic?

I've been following numerous blogs and tutorials on how to achieve this but with no luck. I have a feeling that I'm missing a step in the process (most likely something that is so obvious, the authors of the tutorials don't feel it necessary to mention). I'm using the ionic framework for my apps, and was following this tutorial.

First I run this from the cli:

ionic plugin add https://github.com/apache/cordova-plugin-whitelist.git

I then add this in my config.xml:

<allow-navigation href="*" />

Yet I still don't think this is working. Is there something I need to do in my index.html? My app.js perhaps? I'm a little lost here.

PS - I can see that the 'cordova-plugin-whitelist' folder is in my [app root]/plugins/ directory. But again, I have a feeling I should reference it somewhere.

UPDATE

I added the following to my index.html file:

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

However when do do that I get the following errors in my app:

Refused to load the script 'http://maps.googleapis.com/maps/api/js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'".

(index):99 Refused to load the script 'http://localhost:35729/livereload.js?snipver=1' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'".
(anonymous function) @ (index):99
angular-google-maps.min.js:5 Refused to load the script 'https://maps.googleapis.com/maps/api/js?v=3&libraries=&language=en&sensor=false&callback=onGoogleMapsReady773' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'".
Solution

  • You have to enable script loading from HTTPS urls in your content-security-policy meta tag:

    script-src 'self' 'unsafe-eval' https:;

    You could restrict to the specific google domains:

    script-src 'self' 'unsafe-inline' https://*.googleapis.com https://maps.gstatic.com 'unsafe-eval'