Cordova + JqueryMobile: Ajax fails with

Question

(Have been at it for the last 6 hours) I am trying to make a phonegap/Cordova App. I am not able to make an Ajax call via the Android emulator(API ver 22, Android > 4.4). The Ajax call works on Firefox desktop but fails even on the chrome browser (with the same exception as on the emulator)

cordova --version 5.0.0

Code:

$.ajax({
    url: serverUrl,
    type: 'GET',
    contentType: "application/json",
    async: true,
    dataType: 'jsonp',
    callback: 'callback',
    jsonpCallback: 'yourcallback',
    crossDomain: true,
    success: function (result) {
            $("#message").html("location sent");
        },
        error: function (request, error) {
            alert('Error ' + error);
        }
    });

The Error I see is:

On the chrome remote debugger:

Refused to connect to 'http://10.0.2.2/test/getLocation.php' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

I have see all kinds of settings on blogs and posts but no use. Putting some here to remove the usual suspects.

$.support.cors = true;
$.mobile.allowCrossDomainPages = true;

AppManifest has Internet access:

<uses-permission android:name="android.permission.INTERNET" />

Config.xml:

<access origin="*" /> (have tried all variation, with putting actual server name here like "http://10.0.2.2" ).

Answer 1

My Bad...

I was using Phonegap example html template..which had the following meta tag that was blocking XSS.

<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 *">

I am not sure putting such things in a example code, is the right thing or not..for me it wasted my 2 days.

Answer 2

You should keep the content security policy for security reasons:

A critical security mechanism is the Same-origin policy. This restricts how a document or script from origin A can interact with a resource from origin B. This means the URL http://store.comany.com/dir/page.html can access the following URLs:

• http://store.company.com/dir2/other.html
• http://store.company.com/dir/inner/another.html

But not the following:

• https://store.company.com/secure.html -> Different protocol
• http://store.company.com:81/dir/etc.html -> Different port
• http://news.company.com/dir/other.html -> Different host

(More on: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)

However, attackers can bypass this policy with Cross-site scripting (XSS)

To prevent XSS and data injection attacks you can use Content Security Policy (from Here):

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware. CSP is designed to be fully backward compatible; browsers that don't support it still work with servers that implement it, and vice-versa. Browsers that don't support CSP simply ignore it, functioning as usual, defaulting to the standard same-origin policy for web content. If the site doesn't offer the CSP header, browsers likewise use the standard same-origin policy.

---

tl;dr

It's actually nice that this is already in the example code. But maybe commend would be nice =). You really should keep this configuration for more security.

In your case you would have to change the configuration to 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 'self' http://10.0.2.2">

connect-src limits the origins to which you can connect (via XHR, WebSockets, and EventSource). You have to put here 'self' (for the Scripts that are on your device) and the remote URL (e.g. http://10.0.2.2)

1. @Harry Martel provided a nice link with examples on how to configure your Content Security Policy.
2. Here is also an article with an overview of the configuration properties.