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. :)
Related
I need to access files in a Cordova app targeting Android. I need to be able to do it by passing a URI (e.g. "file://..." or "https://...") because that's the format I need to pass an API that will open the files (Howler.js to play .mp3 files).
This seems to rule out cordova-plugin-file, as far as I understand it. I have tried both hosting locally and remotely. I have tried installing cordova-plugin-whitelist. My config.xml contains
<access origin="*"/> <allow-navigation href="*"/> and my html contains <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data:"/>.
I'm thus covering as many bases as I can find mentioned in any documentation, but no joy - permission to access the files is always denied. Suggestions much appreciated.
EDIT -------------------
In response to Eric below I have tried editing my config.xml and it is now as follows:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloCordova</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html"/>
<access origin="*"/>
<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:*"/>
<access origin="*"/>
<preference name="AndroidInsecureFileModeEnabled" value="true" />
</platform>
<platform name="ios">
<allow-intent href="itms:*"/>
<allow-intent href="itms-apps:*"/>
</platform>
<!-- <hook src="node_modules/cordova-import-npm/scripts/importNpmPackages.js" type="before_prepare"/> -->
</widget>
However my build now crashes with an error message visible here
You can try to add
<preference name="AndroidInsecureFileModeEnabled" value="true" />
to your config.xml, most probably a CORS issue.
We have a PhoneGap application using Ionic framework. In this app we can have an iframe containing links with any target: _parent, _top, _self, ...
We capture the clicks with target _parent, _top and _blank to open them in a browser. We don't capture links with target _self or no target because we want them to be opened inside the iframe.
This worked fine when we were using version 3.9.1 for platform-ios, but when we updated to 4.1.0 the links with _self or no target stopped working for some reason. We click them and nothing happens. Nothing is written in the console either.
We have the following in the config.xml:
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*"/>
And the CSP in index.html:
<meta http-equiv="Content-Security-Policy" content="default-src * filesystem: gap: https://ssl.gstatic.com; img-src * filesystem: gap: data: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline' filesystem: cdvfile: file:; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://localhost:* filesystem: cdvfile: file:">
Are we missing something in order to make it work?
I am trying to build an Android phonegap/cordova application using AngularJS. I am trying to make a POST request but I keep getting a 404 Not Found (from cache).
My POST request
return $http({
method: 'POST',
url: myURL ,
data: {data: dataObj}
})
.then(function (res) {
return res.data;
});
I have the whitelist plugin installed in my config.xml
<plugin name="cordova-plugin-whitelist" spec="~1.2.1" />
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
And I have a Content-Security-Policy set in my index.html
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
But I am still getting the 404 from cache error. Any ideas of what I am doing wrong?
Thanks
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.
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.