Ajax calls with Javascript on PhoneGapp app

Question

I'm trying to load data from a server (that I made, I have full access) using JS with the jQuery library. This works perfectly in the browser. But now I'm trying to get it to work on phonegap. This doesn't work for some reason.

• It is not jQuery, I tried changing colors with it and it works fine.
• I have internet access, when I try to load a picture from a website it works fine.

I added the following settings to config.xml:

<access origin="*"/>
  <plugin name="cordova-plugin-whitelist" version="1"/>
  <allow-intent href="http://*/*"/>
  <allow-intent href="https://*/*"/>
  <allow-intent href="tel:*"/>
  <allow-intent href="sms:*"/>
  <allow-intent href="mailto:*"/>
  <allow-intent href="geo:*"/>
  <platform name="android">
    <allow-intent href="market:*"/>
    <allow-intent href="*"/>
  </platform>
  <platform name="ios">
    <allow-intent href="itms:*"/>
    <allow-intent href="itms-apps:*"/>
  </platform>

I have added some HTML meta-tags as well:

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

And this is my AJAX call:

    $.ajax({
         url: "http://domain.com/Rooster/schedule",
         data: {token : 's0m3r4nd0mt0k3n', user : '~me'},
         type: "GET",
         crossDomain: true,
         success: function( response ) {
              \\irrelevant success function.
            }
      });
}

hoping someone could get this to work!

Answer 1

@David
You have made a common mistake. You need to apply the whitelist system. It is required as of Cordova Tools 5.0.0 (April 21, 2015). For Phonegap Build, that means since cli-5.1.1 (16 Jun 2015)

Replace what you have (listed above) in config.xml with the following:

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

NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP. Modify your index.html with the following:

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

NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.

QUICK TIP: you can by pass much the CSP (Content-Security-Policy) by removing all "inline" javascript and style (css). Put those in a separate file. I will blog on this later this month. The new "best of practice" for Hybrid Apps moves "inline" to separate files.

This whitelist worksheet should help you secure your app.
HOW TO apply the Cordova/Phonegap the whitelist system -- Best of Luck

Answer 2

Your content security policy likely needs a connect-src adding to it listing the servers you want to connect to, or * for all. Here's an example:

<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://domain.com">

connect-src controls which external servers you can make Ajax type requests to. For a full explanation check out this blog post and the Content Security Policy Reference site.

Answer 3

Do you have whitelist plugin included? This is usually the origin of this errors

https://github.com/apache/cordova-plugin-whitelist