I have been trying hard to make AJAX calls to my node.js server with no success.
I have done the following:
1) Installed the cors package in my node.js server. AJAX did work in the browser.
2) Added the following Content Security Policy to index.html:
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://maps.googleapis.com https://163.172.175.135">
3) Added a few lines to my config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="roda.X.XXXX" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Roda</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-navigation href="*" />
<allow-intent href="*" />
<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:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<engine name="android" spec="^6.2.3" />
<engine name="browser" spec="^4.1.0" />
<plugin name="cordova-plugin-geolocation" spec="^2.4.3" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
</widget>
What have I missed?
I later found out that AJAX would work in debug mode, but not in release mode. The problem was that I was using the IP address instead of the domain name to connect to the server, thus failing SSL verification. In debug mode, SSL certificates are not verified.
Phew. Problem solved!
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.
I'm new to cordova, i have an angular application with jwtModule for the authentication whit token.
When I compile the application and insert it in the 'www' folder of cordova everything goes well, even the emulation of the app on an android device, but when I try to authenticate myself the application does not send the data to the back-end.
I think it's a problem related to whiteListDomain! but if I try to emulate the application with a browser platform everything goes well
this is the index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drive</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type=”text/javascript” src=”cordova.js”></script>
</head>
<body class="bg-light text-dark">
<app-root></app-root>
</body>
</html>
this is the configuration of app.module.ts
JwtModule.forRoot({
config: {
tokenGetter: tokenGetter,
whitelistedDomains:'http://localhost:7850','http://192.168.1.190:7850']
}
})
This is the config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.mobile.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>MobileApp</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" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<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:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>
I have successfully developed a Phonegap hybrid App, it worked well on emulators but unable to post to a remote server when installed on android device. I configured white list plugin and my config.xml contains
<plugin name="cordova-plugin-whitelist" version="1" />
<access origin="*"/>
<allow-navigation href="http://*/*"/>
<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:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
and my index page contains
<meta http-equiv="Content-Security-Policy" content="default-src 'self' gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src *; connect-src *">
I am using Cordova 5.3.3
but yet nothing seems to work.
Please can anybody tell me what I am doing wrong.
Thanks
Try the following
<plugin name="cordova-plugin-whitelist" source="npm" spec="1.1.0" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" />
<preference name="permissions" value="none"/>
The white-listing configuration and the Content Security Policy I posted in my question are correct and sufficient to get an hybrid app deployed on android platform connected to a remote API.
The problem was the API itself, as the app does connected well with other API. Initially we are using a play framework to develop our API, which has some issue responding to client request on the hybrid APP.
We then create a PHP proxy script which gets the request from the client and passes same to the play server.
That is it.
Well i have multiple page
In cordova, when it start, this show first index.htmland trigger deviceready event on javascript, and when i clicked on link like to search.html, the WebView change and load the search.html but dont trigger deviceready javascript event.
So, right now i use onload in another pages because i think
deviceready event only trigger when the App is ready to work(only
one time at the start).
Example(index.html, this work well):
<!DOCTYPE HTML>
<html>
<head>
...
<script>
document.addEventListener("deviceready", function(){
console.log('Device is Ready!!');
}, false);
</script>
...
</head>
<body>
Go to search
</body>
</html>
Example( XYZ.html, this don't because never trigger deviceready):
<!DOCTYPE HTML>
<html>
<head>
...
<script>
document.addEventListener("deviceready", function(){
console.log('Device is Ready!!');
}, false);
</script>
...
</head>
<body>
Go to Index
</body>
</html>
Example of file structure:
+ www/
- .
- ..
+ js/
- jquery.min.js
- bootstrap.min.js
+ css/
- bootstrap.min.css
+ img/
- logo.png
- default.png
+ icons/
- alert.png
- danger.png
- important.png
- icon.png
- index.html
- searh.html
- favorites.html
- contacts.html
- configuration.html
- about.html
Config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.cordovacrosswalk.app" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>CordovaAndCrosswalkApp</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" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<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:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<preference name="xwalkVersion" value="15+" />
<preference name="xwalkCommandLine" value="--disable-pull-to-refresh-effect" />
<preference name="xwalkMode" value="embedded" />
<preference name="xwalkMultipleApk" value="true" />
</widget>
Thanks a lot!
#olaf,
you need to read the documentation and blogs Phonegap Build and Cordova. Cordova/Phonegap is a mess. NOTE: Cordova is the base for *many* hybrid platforms, including Phonegap,Phonegap Build, Ionic, Sencha Touch, etc, et al.
These FAQs should also help.
Top Mistakes by Developers new to Cordova/Phonegap
HOW TO apply the Cordova/Phonegap the whitelist system
Core Plugins Setup.
Your Fixes
replacement config.xml
addition to your index.html
About your confusion with onload() and deviceready.READ 4. In the code, did not listen for the 'deviceready' event. IN Top Mistakes by Developers new to Cordova/Phonegap
Just to be clear on this point. deviceready waits until things are load. So in theory, it is waiting for onload to complete. I can verify this. I just finished a new boilerplate for the latest version (cli-5.2.0) of Phonegap Build.
The load order is Splash screen -> onload() -> ondeviceready() -> splash screen hide().
UPDATE: One last thing. I have several programs that work with multiple pages, so I know most of the gotchas
Best of Luck
1. replacement config.xml
NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.
<?xml version='1.0' encoding='utf-8'?>
<!-- your header is off. READ http://docs.build.phonegap.com/en_US/configuring_basics.md.html#The%20Basics -->
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.cordovacrosswalk.app"
version = "0.0.1"
versionCode = "10"> <!-- versionCode is optional and Android only -->
<name>CordovaAndCrosswalkApp</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>
<!-- ONLY needed for IDE/SDK -->
<!-- <content src="index.html" /> -->
<!-- Tool Set Version -->
<!-- <preference name='phonegap-version' value='3.7.0' /> --> <!-- turns off required whitelist -->
<!-- <preference name='phonegap-version' value='cli-5.2.0' /> -->
<!-- Target Platforms -->
<platform name="android" />
<platform name="ios" />
<platform name="windows" />
<!-- You'll very likely need this on different platform. So you can tell them apart -->
<plugin name="cordova-plugin-device" source="npm" version="1.0.1" />
<!-- WHITELIST * WHITELIST * WHITELIST -->
<!-- https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/the-whitelist-system.md -->
<plugin name="cordova-plugin-whitelist" source="npm" spec="1.1.0" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" /> <!-- Required for iOS9 -->
<plugin name='org.crosswalk.engine' version='1.3.0' source='pgb' />
<preference name="xwalkVersion" value="15+" />
<preference name="xwalkCommandLine" value="--disable-pull-to-refresh-effect" />
<preference name="xwalkMode" value="embedded" />
<preference name="xwalkMultipleApk" value="true" />
</widget>
2. addition to your index.html
NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.
Add to the top of every HTML file.READ HOW TO apply the Cordova/Phonegap the whitelist system The section on CSP
<meta http-equiv="Content-Security-Policy"
content="default-src *;
style-src 'self' 'unsafe-inline' 'unsafe-eval';
script-src 'self' 'unsafe-inline' 'unsafe-eval';">
I am building a cordova app and i am stuck with a problem since three days.. I tried every thing i found on Stack or Google. My point is I can show a google map on android but not on iOS. There is just a grey div. On debug, when clicking on this div, I get this error : TypeError: undefined is not an object (evaluating 'a.x')
Another thing : I have a Gif loader that stay over the grey div, and it should go under the map div.
I am using gmap v3 with or without API key : same issue.
I copy my config.xml :
<?xml version='1.0' encoding='utf-8'?>
<widget id="co.brandyapp.applitest8" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>applitest8</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="*.google.com" />
<access origin="*.gstatic.com" />
<access origin="*.googleapis.com" />
<access origin="*.brandyapp.co" />
<allow-navigation href="http://*.google.com" />
<allow-navigation href="http://*.googleapis.com/*" />
<allow-navigation href="http://*.gstatic.com/*" />
<allow-navigation href="http://*.brandyapp.co/*" />
<plugin name="cordova-plugin-whitelist" version="1" />
<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:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>
The strange thing is I get the same issue with this tuto : http://www.christianengvall.se/phonegap-and-google-maps/
Thank you for your help ! This issue is driving me crazy ! :)