I have searched on web but got nothing concrete about this issue.
I'm using ionic v1, in which I'm loading my adfs url to ask user for login though adfs web page but only on some phones I see login page and on others I see blank screen.
I tried debugging it but I got nothing[only the url] constructive so far.
I'm loading url using
window.open("https://inve....", '_system');
So far we've encountered with this issue on Android phones only, but I'm targeting iPhones also.
Any help will be appreciated. Thanks
app browser and loading adfs login page with url in it for this ionic app.
The prob I was facing was because of certificates, The server is using self signed certificate so when I'm trying to load it on the device who don't even opened server pages on browsers the app used to stuck on white screen.
If your server is signed with proper certified certificate by CA then this prob will not occur as browsers able to validate these certificates easily.
That's why earlier with right certificate My android app used to work on all android phones.
Here is link to understand the process if you want to specify the certificates locally.
For other guys looking for help in this situation.
For open external url you need to use plugin for ionic which is compatible for both android and ios:
Install cordova-plugin-inappbrowser using below line:
cordova plugin add cordova-plugin-inappbrowser
after that put this code in your html file:
<button class="button" ng-click="openurl('https://..........')">
Click here
</button>
and then call click event through controller:
.controller('MyCtrl', function($scope, $cordovaInAppBrowser) {
var options = {
location: 'yes',
clearcache: 'yes',
toolbar: 'no'
};
$scope.openurl = function (url) {
window.open(url, '_system', options);
}
OR
$scope.openurl = function (url) {
$cordovaInAppBrowser.open(url, '_system', options);
}
})
Also change in your config.xml file
<allow-intent href="*" />
<allow-navigation href="*" />
<allow-intent href="http://*/*" launch-external="yes" />
<allow-intent href="https://*/*" launch-external="yes" />
<feature name="StatusBar">
<param name="ios-package" onload="true" value="CDVStatusBar" />
</feature>
For further reference you can go through:
https://github.com/apache/cordova-plugin-inappbrowser
Related
I'm using Cordova 7.0.1, and trying to set the contents of an iframe using a generated blob: url, but the result is an empty iframe, and no console errors.
If I disable blob: urls in the content security policy, I get an error as I would expect. So I'm fairly confident my problem is not the CSP.
I've also whitelisted * in config.xml to no avail:
<allow-navigation href="*" />
<allow-intent href="*" />
Constructing a data: url works. Why doesn't blob:?
Ages ago, probably with Cordova 5, I had this working. Is this no longer permitted? Is there a way to allow it again, or an alternative method?
To allow blob scheme, we have to set the following in config.xml:
<allow-navigation href="blob:*" />
More info on this is available on Issue:CB9558 under official apache cordova issue tracker.
This is driving me crazy. I'm working on a Ionic app (Cordova, Angular etc). I have a contact us link which contains a mailto: href
href="mailto:info#somedomain.net?subject=my%20App"
I've read countless posts on SO that say you have to remove
<access origin="*"/>
from the config.xml in the project root and replace it with:
<access origin="mailto:*" launch-external="true" />
Which I've done. When I run ionic build it gets added to the config.xml in platforms/android/res/xml. But no matter what I do the link doesn't open the mail app on any Android simulator (even when email is configured in the simulator).
Sadly I don't have a device to test on - so is this just a emulator thing or am I missing something?
You must install the cordova plugin whitelist:
cordova plugin add cordova-plugin-whitelist
or if you want to save the reference to your config.xml file:
cordova plugin add cordova-plugin-whitelist --save
and that you have to add the intent to your config.xml file:
<allow-intent href="mailto:*" />
You can find more info here.
Try this:
window.location.href = "mailto:your#ema.il?subject=Works on iOS too";
I just solved this thanks to the responses & articles above. I'm not sure what has or hasn't changed since the above postings, but for the reference of others; I now have http://, https://, tel:, & mailto: working with only the inappbrowser plugin installed and no manual edits to config.xml needed. I did everything mentioned above & it still wasn't working, so I started fiddling and found that I the window.open() call requires the second parameter of "_system" to work correctly (it tried to use the browser and "navigate" to http://mailto:xxx... without the "_system" flag).
However, for curiousity's sake, I uninstalled the whitelist plugin and removed the manual edits in config.xml and it still works.
Notes:
-I don't remember all the variations I tried, but onclick couldn't access the Ionic/Angular/Cordova scope(s), so I stuck with ng-click.
-I did not / have not tried using href="..." with any of the options.
(If I remember, I'll test them and update this to reflec my results.)
So, with only the cordova-plugin-inappbrowser installed and no config.xml edits, here are my working / tested solutions:
ng-click="window.open('http://somesite.com', '_system')"
ng-click="window.open('https://google.com', '_system')"
ng-click="window.open('tel:(123) 345-4567')"
ng-click="window.open('mailto:email#example.com', '_system')"
Tested 9/20/2016 Using:
HTC One M8, android 6 ,cordova v6.3.1, cordova-plugin-inappbrowser v1.5.0, ionic v2.0.0, jdk1.8.0_101, android SDKs 21, 23, & 24 installed
what if you replace "true" with "yes"... I use this in my app and it works.
<access origin="tel:*" launch-external="yes"/>
Ran into this today and noticed something that affected mailto, but not tel, links:
In addition to adding the intent to the cordova config as described by dave's answer
<allow-intent href="mailto:*" />
I also had to allow mailto links in the csp header of my page
<meta http-equiv="Content-Security-Policy" content="default-src 'self' mailto:*">
Didn't see any documentation around this behaviour of CSP headers.
Just in addition to use Cordova's WhiteListPlugin ;
It worked for me in this way:
in config.xml
<access origin="*"/>
<access origin="mailto:*" launch-external="true" />
<allow-intent href="mailto:*" launch-external="yes"/>
And specially for ios add :
<platform name="ios">
<allow-navigation href="mailto:*" launch-external="yes"/>
...
<platform name="ios">
Altering Cordova's WhiteListPlugin in config.xml did not work for me -- <access >,`. I tried many combinations, including those above. Doesn't mean these won't work necessarily, just for my setup it doesn't. (Building for Browser, Android, and iOS)
However, using the Cordova InAppBrowser Plugin worked:
As mentioned above, use the inAppBrowser plugin and set the target to _system.
This by passes the issues I was seeing in iOS with unsupported url, and launches the native systems web browser (i.e., Does not rely on WhiteListPlugin to allow the URL call).
Hope this helps.
Cordova version 6.3.1.
I recently upgraded my cordova based Android app from 3.5.0 to 3.6.3. The special links "tel", "sms", and "mailto" stopped working. When clicked, nothing happens. Is there anything I can do in the AndroidManifest.xml, or Confix.xml or anything else to get them back working?
I built two identical and very simple android apps to prove my suspicion, one with cordova 3.5.0 and one with 3.6.3. Both of them have a simple link:
Call
The first one works, the second one doesn't work.
I think they added a security feature that blocks intents somehow.
PS: both apps built like this:
cordova create app com.tmp.app "App"
cordova platform add android
and in index.html, I added the telephone link above on the device ready block.
Please help.
I finally found the answer. All you have to do is add the following to config.xml:
<access origin="tel:*" launch-external="yes"/>
<access origin="geo:*" launch-external="yes"/>
<access origin="mailto:*" launch-external="yes"/>
<access origin="sms:*" launch-external="yes"/>
<access origin="market:*" launch-external="yes"/>
It all started by IBM!!!
IBM Cordova Security Issues
I had an App built on 3.5.1 version and all special links were working fine. But when i upgraded on the latest version 3.6.3 then they did not work.
So I made below changes in the code and now they works fine.
Add InAppBrowser plugin
cordova plugin add org.apache.cordova.inappbrowser
Create custom function in your JS file to open special links within the InApp browser
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
openNativeAppWindow: function(data) {
window.open(data, '_system');
}
};
The place where you are invoking special links like sms or tel then
pass on your custom url with data and let it open the native browser
window which in turn will push the native App to handle the special
urls.
Few example:
<br><br><input type="button" onClick="app.openNativeAppWindow('http://google.com')" value="Open Google"/>
<br><br><a onClick="app.openNativeAppWindow('geo://0,0?q=dallas')" data-rel="external">google maps</a>
<br><br><a onClick="app.openNativeAppWindow('geo:0,0?q=Bacau')">Geolocation Test</a>
<br><br><a onClick="app.openNativeAppWindow('geo:0,0?q=34.99,-106.61(Treasure)')">longitude & latitude with a string label</a>
<br><br><a onClick="app.openNativeAppWindow('geo:0,0?q=1600+Amphitheatre+Parkway%2C+CA')">street address Test</a>
<br><br><a onClick="app.openNativeAppWindow('sms:2125551212')">SMS</a>
<br><br><a onClick="app.openNativeAppWindow('mms:2125551212')">MMS</a>
<br><br><a onClick="app.openNativeAppWindow('tel:2125551212')">Open Phone Dialer</a>
As of Cordova 4.0 you must include the whitelist plugin.
<gap:plugin name="cordova-plugin-whitelist" source="npm" />
<allow-intent href="tel:*" />
https://github.com/apache/cordova-plugin-whitelist
Modify the Cordova whitelist
One of the security fixes involves creating a new whitelist for non http/s protocols. If your application uses other protocols besides http:// and https://, such as sms:, mailto:, geo:,tel: etc., then you will need to make some configuration changes to add these protocols to the whitelist.
This is easy to do:
Open up the Cordova config.xml file, located at: yourProject --> apps --> yourProject --> android --> native --> res --> xml --> config.xml. Note: If you have a file located at yourProject --> apps --> yourProject --> android --> nativeResources --> res --> xml, you will have to make the changes to this file (under the nativeResources folder) instead, since if this file exists, it will overwrite the config.xml in /native/ folder when the app is rebuilt.
Scroll to your whitelist entries. You should see items listed like this:
<access origin="https://my.company.com/resources" />
<access origin="http://*.othersupplier.com" />
For every non http/https protocol that you use, you will have to add a whitelist entry like this:
<access origin="sms://*" launch-external="true" />
<access origin="mailto://*" launch-external="true" />
The launch-external attribute will tell Cordova to allow this URL to be handled by other applications in Android system - not by the currently running Cordova/Worklight application.
This will mean that when a user clicks on a <a href="sms:555..."> link, Android will let whatever application is registered to sms: handle the request.
If the only entry that is in your whitelist looks like this:
<access origin="*" />
then your application will allow resource requests to any internet resource, which could open your application to certain kinds of attacks.
You should list specific domains in this tag that you want to be able to access.
If your whitelist looks like this:
<access origin="https://www.ibm.com" />
<access origin="https://my-worklight-server.company.com" />
and inside your application you utilize the mailto: protocol to open a user's email client, and the geo: protocol to display a map, then you should modify the whitelist to look like:
<access origin="https://www.ibm.com" />
<access origin="https://my-worklight-server.company.com" />
<access origin="mailto://*" launch-external="true" />
<access origin="geo://*" launch-external="true" />
HTML :
Call
Add to file "config.xml" :
<access origin="tel:*" launch-external="yes"/>
source :
https://www.ibm.com/developerworks/community/blogs/worklight/entry/action_required_cordova_android_security_update?lang=en`
If you have these lines in your config.xml, then comment them out.
<!--<allow-navigation href="*" />
<allow-navigation href="*://*" />-->
I am getting problem while logging through facebook
"cordova Facebook connect plugin fail on login ! Facebook error: failed to receive access token"
On emulator its working fine. But on mobile device its getting trouble. Is there any problem in facebook settngs. Sandbox mode is also disabled
"Do you want to make this app and all its live features available to the general public?" its "yes"
please help me out of this.
Just verify following lines in your www directory:
index.html:
<script src="cdv-plugin-fb-connect.js"> </script>
<script src="facebook-js-sdk.js"></script>
config.xml:
<gap:plugin name="FacebookConnect">
<param name="APP_ID" value="xxxxxxxxxxxxxxx"/>
<param name="APP_NAME" value="BenTen"/>
</gap:plugin>
<access origin="*" subdomains="true">
I'm making an application using jQuery Mobile and Phonegap Build. The jQuery Mobile javascript code works fine, however the phonegap javascript code doesn't seems to be working. The application it's using a multiple html template, and I made the login the index file of the application.
I'm using phonegap version 3.1.0 (current default for build service)
I'm adding the following lines in the config.xml file:
<gap:plugin name="org.apache.cordova.device" />
<gap:plugin name="org.apache.cordova.file" />
Then, at index.html, I'm adding the following scripts at the header:
<script src="phonegap.js"></script>
<script src="js/settings_page.js"></script>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/jquery-mobile-events.js"></script>
<script src="js/jquery.mobile-1.4.1.min.js"></script>
The settings_page file includes some basic phonegap API interaction, which writes some default values in local storage in case they're not set:
console.log('added');
document.addEventListener('deviceready', deviceReady, false);
function deviceReady() {
console.log('called');
var application_settings = window.localStorage;
//if no settings have been created, create them
if (application_settings('defaults') === null) {
application_settings.setItem('defaults', 'true');
application_settings.setItem('type', 'all');
application_settings.setItem('sport', 'all');
application_settings.setItem('customer', 'all');
application_settings.setItem('order', 'date');
application_settings.setItem('refresh', 'never');
console.log('defaults set');
}
}
Using ripple emulator I can see the 'added' comment in the console log, however never reaches the 'called' one, and if I run the application and use weinre to debug it, none of the console logs registers.
In both cases none of the keys are being generated, but I'm not getting any errors either, am I missing something? I changed the features to plugins as suggested in here PhoneGap 3.1 Build Device Is Not Defined and here http://www.raymondcamden.com/index.cfm/2013/10/1/PhoneGap-Build-and-PhoneGap-30 but it's still not working, any help is highly appreciated
You need to run on your actual device or simulator. Run on ripple chrome extension won't help you.
Adding following line help me... I have done all tries but nothing helped me so finally I went through http://docs.build.phonegap.com/en_US/#googtrans(en) Configurations block..
<plugin name="cordova-plugin-whitelist" version="1"/>
<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>
Ok after hours of debugging and testing I solved the issue, I think this can be helpful for future references to any other phonegap build users so I'm gonna list step by step guide on what I did in here. I don't know if this is the best approach though, so I'd really appreciate some feedback on things that can be improved :)
To make jQuery work with Phonegap Build and Phonegap API you need to do the following in your application's index:
Please note the API calls won't run in the emulator, you need a real device to check this out. (Thanks #Dato' Mohammad Nurdin for this valuable information)
Add a reference to the phonegap script <script src="phonegap.js"></script> ideally this can be your first script reference, it doesn't requires any library to work and you don't need to have the library itself, phonegap build will add it once it compiles the code.
Add jQuery reference (in case you need it, since I was working with jQuery Mobile I'll need it)
Device ready will take place in your index file when you'll next add the event listener, adding this in other scripts will cause some issues with the device ready event. But if you need to check the device ready status in other scripts, you can add a global variable available for all of the scripts bellow, if you don't know how you can create a script with a variable, this will make it available for all the scripts referenced after this one. Example: <script>var phonegap_ready = false</script>
add a script with your event listener
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
phonegap_ready = true;
}
Add the source of jQuery Mobile and your js events and code files.
As a side note, checking for device ready while working with jQuery Mobile it's just a standard, after some test I ran, phonegap device ready fires way more faster than jQuery pageshow event (which makes sense considering all of the DOM manipulation jqm page events do) however I still recommend it just as a caution.
Once in your code you can use the deffered call $.when() to check asynchronously to not execute the phonegap calls until the phonegap framework is fully operational. As an example using the previously global variable created:
$(document).on('pageshow', '#login_page', function (parent_event) {
//do jQuery Mobile event handlings here
$.when(phonegap_ready === true).then(function () {
phonegapApiFunctionsCall();
});
});
If the features or plugins (calls to phonegap API are performed as features before Phonegap Build 3.0, and as of Phonegap Build 3.0 these were replaced for plugins) you'll be able to run the API commands from the phonegapApiFunctionsCall() and will avoid the initialization issues between phonegap deviceready event and jQuery Mobile page initialization events.