Cordova + JqueryMobile: Ajax fails with

16
votes

(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" ).
5
androidcordovagoogle-chromejquery-mobilephonegap-plugins

5 Answers

25
votes

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.

10
votes

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:

But not the following:

(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.
3
votes

You can check the following:

https://github.com/apache/cordova-plugin-whitelist#content-security-policy

There are many configurations for Content Security Policy.

0
votes

Error message:

Refused to connect to 'http://some-address' 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.

Cordova 4/5/6 "cordova create" command

cordova create yourproject com.yoursite.yourproject yourproject

Is generating projects with this meta tag

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

Check your index.html file

vi YourProject/plattforms/ios/www/index.html

or

vi YourProject/plattforms/android/www/index.html

You can comment that line out but just have in mind that this a policy you could fit your own app's needs, there is actually a link you could see for more guidance:

README: content security policy

Some notes:

        * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
        * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
        * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
            * Enable inline JS: add 'unsafe-inline' to default-src
0
votes

Just place 

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

It helped me