0

I have a PhoneGap app that I am using AngularJS with. I'm using a pretty simple $http call to my Node backend:

$http.get("http://localhost:6969/random")
   .then(function(response) {
        $scope.images = response.data;
  });

No matter what, PhoneGap never hits the backend. I have tested it in a normal browser and it works as expected.

I have obviously read a bunch about it and most people fix it using whitelisting, but in my config.xml, my whitelisting is about as open as can be:

<plugin name="cordova-plugin-whitelist" source="npm" spec="1.1.0" />
  <allow-navigation href="*" subdomains="true" />
  <allow-intent href="*" subdomains="true"/>
  <access origin="*" subdomains="true"/> <!-- Required for iOS9 -->

What do I have to change? Been wrestling this bug for a few days off and on and it's a bit annoying to not be able to actually create new cool features in my free time.

EDIT: I am serving the app using phonegap serve and testing it using the PhoneGap Developer App.

Jaron Thatcher
  • 814
  • 2
  • 9
  • 24
  • Did you install the whitelist plugin? What does cordova plugin -l return? – user1027620 Apr 20 '16 at 00:04
  • Yep, I just tried to reinstall it to make sure and it says `client git:(master) ✗ cordova plugin add cordova-plugin-whitelist Plugin "cordova-plugin-whitelist" already installed on android. Plugin "cordova-plugin-whitelist" already installed on browser.` – Jaron Thatcher Apr 20 '16 at 00:07
  • Sorry @user1027620 here is output of `cordova plugin -l`: `cordova-plugin-whitelist 1.2.2-dev "Whitelist"` – Jaron Thatcher Apr 20 '16 at 00:09
  • @user1027620 Bit more info added to bottom of post for clarity – Jaron Thatcher Apr 20 '16 at 00:11
  • Is the problem affecting Android only? – user1027620 Apr 20 '16 at 00:20
  • @user1027620 Right now I'm testing using the PhoneGap Developer app on an Android, so I'm not sure. It works in a browser on my desktop, the browser on my phone, but not the PhoneGap Developer app – Jaron Thatcher Apr 20 '16 at 00:28
  • I don't have any experience with the PG developer app, however try to uninstall and reinstall the plugin. This might sound silly but sometimes it works. – user1027620 Apr 20 '16 at 00:34
  • @user1027620 I tried it and unfortunately no luck :( really confused as to what's going on – Jaron Thatcher Apr 20 '16 at 00:37
  • Maybe this can help: https://github.com/phonegap/connect-phonegap/issues/51#issuecomment-45758634, does the request reach your API if you omit the data parameter? – user1027620 Apr 20 '16 at 00:41
  • What does your Content Security Policy meta tag in the head of your index.html look like, also can you open up a browser on your device and "see" your server at http://localhost:6969/random to make sure it's not a DNS problem? – Simon Prickett Apr 20 '16 at 00:52
  • @SimonPrickett I can hit the API no problem it is set up perfectly as far as I can tell. As far as my CSP goes, I've been trying `` as well as nothing but haven't gotten anything working yet – Jaron Thatcher Apr 20 '16 at 01:01

1 Answers1

1

I would suggest your Content Security Policy might need to be modified to include a connect-src clause to specify where Ajax requests can go to.

Taking the CSP meta tag that you posted in the comments:

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

I would suggest amending this to open up Ajax requests to anywhere, see if that helps then reign it in to just domain(s) you want to support after.

Suggested CSP would be:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src *">

If that works and you want to lock down to just one domain later you'd want something like:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src http://api.mydomain.com">

Additionally I think you will need to change your app's code to connect to your server by hostname or IP address, so so that on the device it doesn't confuse 'localhost' with the device itself and try to make a connection to port 6969 on the device.

So:

$http.get("http://localhost:6969/random")

May need to become:

$http.get("http://myhost.mydomain.com:6969/random")

Or

$http.get("http://xxx.xxx.xxx.xxx:6969/random")

There's some resources on this online:

Simon Prickett
  • 3,838
  • 1
  • 13
  • 26
  • It didn't really change much on first try. I'm reading through your blog post and hopefully that will help. Is there a change that the PhoneGap Developer App isn't respecting changes in my config.xml or tag? – Jaron Thatcher Apr 20 '16 at 01:22
  • Have you tried deploying for real on a device / emulator? I'm not familiar with the ins and outs of the PhoneGap Developer App unfortunately. – Simon Prickett Apr 20 '16 at 01:23
  • I haven't yet because I was more or less prototyping at this point, but it seems like I'm going to start having to test on an emulator instead of this app. I'll come back here and update with what I find out. Thanks for your help so far! – Jaron Thatcher Apr 20 '16 at 01:27
  • From my blog post note the comments on here newer versions of Cordova don't require you to manage non SSL backends in a .plist on iOS as the CLI does this for you although you do still need to get the Content Security Policy right in all cases. – Simon Prickett Apr 20 '16 at 01:29
  • You may also want to try using the backend's IP address rather than localhost to make sure it resolves properly and that the PhoneGap app isn't trying to make a request to localhost being the phone itself. – Simon Prickett Apr 20 '16 at 01:40
  • Hey @SimonPrickett as soon as you mentioned the `localhost` discrepancy, I knew that was the cause. Silly mistake but after deploying on Heroku it loads perfectly. If you want to edit your answer to include that I will accept it ASAP. Thanks a lot for your keen eye! – Jaron Thatcher Apr 20 '16 at 14:01
  • Here was the final CSP I ended up with ` ` – Jaron Thatcher Apr 20 '16 at 14:05