The app gets json data from a php script on some server. it workes fine on my laptop, but does not work on the android phone.
I have this in my config.xml file
<access origin="*"/>
<allow-intent href="*"/>
<allow-navigation href="*"/>
It looks like the whitelist does not work.. What am i doing wrong?
Firstly remove whitelist plugin by cordova plugin remove cordova-plugin-whitelist, then install by cordova plugin add cordova-plugin-whitelist. Finally, add these tag in your index.html file
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
A while ago cordova changed to a more restrictive whitelisting method.
Since then you need to install cordova-plugin-whitelist to be able to access external resources.
The fact that things are working on your labtop and not on the mobile points in this direction as well.
Related
When I ran the project on Chrome browser the ajax requests worked fine but when I installed the app on Android the requests are not working anymore.
This is the code:
var xhr=new XMLHttpRequest()
xhr.onerror=function(){
var message=alert(txt('Please turn on mobile data or Wi-Fi','Ligue os dados moveis ou Wi-Fi'))
}
xhr.onreadystatechange=function (){
if (this.status== 200 && this.readyState == 4){
alert("trye")
eval(xhr.responseText)
}
}
xhr.open("POST",`http://dpreaction.ml?i=js`)
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
xhr.send()
the config.xml file
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.teste.teste" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>DP Reaction</name>
<description>Inrease your things</description>
<author email="gilluisfrancisco70#gmail.com" href="http://dpreaction.ml">
DP Reaction
</author>
<content src="index.html" />
<allow-intent href="*" />
<access origin="*" />
<allow-naviation href="*" />
</widget>
And this is my tag:
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
According to https://github.com/apache/cordova-android/issues/1354:
Content-Security-Policy is a different security mechanism than CORS (Cross-Origin Resource Sharing).
In cordova-android#10, they implemented a WebAssetLoader, which proxies requests through the https://localhost protocol. The WebAssetLoader acts like a private web server only accessible to your app. This was done because some web view features require you to be in a "secure context" (e.g. HTTPS) for the features to be enabled. In doing so, it does enable CORS enforcement.
Cordova android 9.x uses the plain old file system (file://), which didn't enforce CORs. This is why you see the XHR request work in 9. x but not in 10. x. You can make 10. x behave like 9. x by enabling the AndroidInsecureFileModeEnabled
So if you are using cordova-android#10 just add the following preference at config.xml:
<preference name="AndroidInsecureFileModeEnabled" value="true" />
I had the same problem and it solved it for me. :)
AJAX calls fail when running the app in release mode on Android (works on iOS). This is the error (a warning really) I see in the Chrome Dev Tools:
Provisional headers are shown
Request URL:https://server.com/api/index.php?ticket=ST-111111-ABCDEFG-cas
Request Headers
Provisional headers are shown
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Origin:file://
User-Agent:Mozilla/5.0 (Linux; Android 6.0; Google Nexus 5 - 6.0.0 - API 23 - 1080x1920 Build/MRA58K) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/40.0.0.0 Mobile Safari/537.36
Query String Parametersview sourceview URL encoded
ticket:ST-111111-ABCDEFG-cas
Form Dataview sourceview URL encoded
request:{"param1":"val1","param2":"val2"}
Everything works fine on Debug mode.
My last year release build for Android is still working fine also. So it may be related to the new version of Cordova.
Here is the tools versions I have:
Node version: v4.4.3
Cordova version: 6.2.0
cordova-android#5.1.1
Android SDK up to date
I did set these settings in the config.xml:
<allow-navigation href="*" />
<access origin="*" />
<allow-intent href="*" />
I am using the whitelist plugin:
<plugin name="cordova-plugin-whitelist" spec="1" />
I also set this meta in the index.html file:
<meta http-equiv="Content-Security-Policy" content="default-src *; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
Is there other Cordova settings I forgot to set?
FYI, I have removed and re-addd the Android platform to my project, updated all my plugins but I still get the same Ajax error.
Please help.
Had exactly the same problem. $.ajax works fine on debug version. Release Version fails with status code 0.
Issue was a week SSL certificate. I changed the https to http and then it worked in release too. See:
https://forum.ionicframework.com/t/cordova-plugin-whitelist-problem-only-in-release/43705/3
From API side api developers need to allow cross origin headers.
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: CUSTOM_HEADERS);
header('Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS);
Also when request come from cordova or using ajax, then there ajax request two call:
first call is for options, in which api returns only allowed headers & methods
after that second is actual api call which call api.
Is anyone able to get this to work in their PhoneGap build? :
$(function(){
$.getJSON("http://reddit.com/.json", function(data){
alert("Success!");
})
})
It works fine in browsers but when I build the app it doesn't run.
I've added these to my config.xml already to whitelist all domains
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
<allow-navigation href="*" />
<access origin="*" />
<allow-intent href="*" />
Also tried building it with this CSP and without
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">
which I got from here: https://github.com/apache/cordova-plugin-whitelist
I took a look at this and replicated your Ajax request in my own PhoneGap Build project.
What I noticed was that the URL you are using http://reddit.com/.json seems to get redirected on Android devices at least to https://www.reddit.com/.json
I discovered this by doing a PhoneGap Build build with debug turned on, running the .apk on a Nexus 7 with Chrome remote debugger tools attached, and seeing this in the JS Console:
"Refused to connect to 'https://www.reddit.com/.json' because it violates the following Content Security Policy..."
I fixed this by amending the Content Security Policy meta tag in index.html to include both https://www.reddit.com and http://reddit.com in the connect-src clause. Rebuilt on PhoneGap Build using this CSP and it works fine on the Nexus 7 now:
<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://reddit.com https://www.reddit.com">
So my PhoneGap application now looks like this and works:
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
var parentElement = document.getElementById('deviceready');
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
$.getJSON('http://reddit.com/.json', function(data){
alert('Success - got ' + data.data.children.length + ' children in JSON');
});
}
};
app.initialize();
For your convenience I put the complete app ready for PhoneGap Build in a Github repo here. Feel free to use this as you need.
We have a web app that's using LoopBack from Strongloop for the API and backend, and Angular on the frontend, with Cordova used to package for mobile. The web app and iOS target from Cordova work great as expected, but when we try to build for an Android device the app server is unreachable from the device. More specifically, after loading the client app and trying to log in, the device makes a POST to my API but never receives a response (and as far as I can tell the request never actually hits the server).
Here's what I've tried so far:
Make sure that access is set to origin="*" in config.xml
Make sure that a Content-Security-Policy meta tag is set in my (single-page) app's index.html, allowing remote network
Make sure that the INTERNET permission is being correctly set in the Android Manifest
Make sure that the app server is reachable from the device in browser
Make sure the generated lb-services.js Angular service has the correct API address
Try generating an Ionic Framework app and dropping my app code into that in case it generates something I need
Since I'm able to get my app running in iOS using Cordova without any issues, I'm thinking there must be something particular to my Android configuration here. I did encounter a separate issue where a plugin that was installed was not compatible with the latest Cordova, but removing that plugin seems to have resolved that. What is different about building for Android that would keep this from working?
EDIT:
I've switched to using Phonegap Build in the hopes that it would be an easier workflow, but I still see the same issues.. Here is the whitelist/CORS configuration that I'm doing:
meta tag in index.html:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'self' 'unsafe-inline'; script-src * 'self' 'unsafe-inline' 'unsafe-eval'">
config.xml (Phonegap Build, identifiable info removed):
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="..." version="1.0.0">
<name ... />
<description ... />
<author ... />
<icon src="icon.png" />
<gap:splash src="splash.png" />
<preference name='phonegap-version' value='cli-5.1.1' />
<gap:plugin name="com.indigoway.cordova.whitelist.whitelistplugin" version="1.1.1" />
</widget>
Install https://github.com/apache/cordova-plugin-whitelist since Cordova 5.0.0 is mandatory for CORS query.
Have you installed it ?
If not, this is certainly your issue ;)
It turns out that I was setting <access origin="*" /> in my original Phonegap configuration, but not in my Phonegap Build settings. Making sure that <access origin="*" /> is present in the config.xml used by Phonegap Build seems to fix this.
I am new to Ionic.
I am using Ionic Framework (1.3.20), Angular JS, Cordova 5.0.0
Template file browse.html code:
<div class="col-50"><img ng-src="{{availableImages[currentImage].src}}" /></div>
app.js code:
.state('app.browse', {
url: "/browse",
views: {
'menuContent': {
templateUrl: "templates/browse.html",
controller: 'Ctrl'
}
}
})
controller.js code
.controller('Ctrl',function($scope) {
$scope.currentImage = 0;
$scope.availableImages = [
{
src: "http://lorempixel.com/160/160/people/3"
}
];
console.log("reading image in controller !!!");
})
Header details:
Request URL:http://lorempixel.com/160/160/people/3
Request Method:GET
Status Code:404 Not Found (from cache)
Response Headers
Client-Via:shouldInterceptRequest
Request Headers
Provisional headers are shown
Accept:image/webp,*/*;q=0.8
User-Agent:Mozilla/5.0 (Linux; Android 5.0.2; XT1033 Build/LXB22.46-28; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/42.0.2311.129 Mobile Safari/537.36
Config.xml file:
<access origin="*"/>
Error on console:
GET http://lorempixel.com/160/160/people/3 404 (Not Found)
I verified the url http://lorempixel.com/160/160/people/3 is showing image in my mobile browser. but the image is not coming on the app.
Whitelisting the domains using cordova-plugin-whitelist solves the issue.
Add the plugin via CLI:
cordova plugin add cordova-plugin-whitelist
and then add the following line of code to your app's config.xml:
<allow-navigation href="http://*/*" />
and
this meta tag in your index.html
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
EDIT: The reason for this issue:
From Cordova 4.0.0 for Android's update:
Whitelist functionality is revamped
You will need to add the new cordova-plugin-whitelist plugin to continue using a whitelist
Setting a Content-Security-Policy (CSP) is now supported and is the recommended way to whitelist (see details in plugin readme)
Network requests are blocked by default without the plugin, so install this plugin even to allow all requests, and even if you are
using CSP.
This new whitelist is enhanced to be more secure and configurable, but the Legacy whitelist behaviour is still available via a separate
plugin (not recommended).
Note: while not strictly part of this release, the latest default app
created by cordova-cli will include this plugin by default.
Build this plnkr: http://plnkr.co/edit/GprtU3r8NDgYwO6jGRkp?p=preview
My html file:
<div><img ng-src="{{ availableImages[currentImage].src }}" /></div>
Javascript:
$scope.currentImage = 0;
$scope.availableImages = [{
src: "http://lorempixel.com/160/160/people/3"
}];
It seems that everything is alright...
Tested with angularjs 1.3.15