I am working on an simple Phonegap App with Cordova InAppBrowser. I am testing on my Android device.
In the config.xml I got the below code
....
<preference name="phonegap-version" value="cli-5.2.0" />
.....
<plugin name="cordova-plugin-whitelist" source="npm" />
<plugin name="org.apache.cordova.inappbrowser" source="pgb" />
.....
<access origin="*"/>
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
....
In Javascript I got the below code when a button is clicked
....
var ref = cordova.InAppBrowser.open('http://google.com', '_blank', 'location=yes','fullscreen=no');
....
index.html
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src * 'self' data:">
I use Phonegap Desktop App for testing purposes. In that when the button is touched a browser window got opened and I could see the google.
But when I build the same via http://build.phonegap.com and install on my device. Nothing opens after I touch the button. Something goes wrong here.
Looks strange for me. Any help is appreciated.
I posted the same question on Adobe Forums and got the solution for my problem.
https://forums.adobe.com/thread/2138992
After changing the below, it started working
<plugin name="org.apache.cordova.inappbrowser" source="pgb" />
to
<plugin name="cordova-plugin-inappbrowser" />
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 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!
I have a simple phonegap app that only have iframe that load external url, but the iframe is not loading. it's blank
i have searched and tried every other possible solution lke whitelisting the url
my config.xml contains this:
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
and the loaded url contains this csp:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval'; script-src * 'self' 'unsafe-inline' 'unsafe-eval';">
does anybody have an idea about this?
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';">