Ionic-native: geolocation plugin access to geolocation was blocked over insecure connection

[jgw96]

_From @zefrench on November 8, 2016 19:55_

Since the update to RC2 I'm unable to use the native plugin Geolocation..

Did someone get the same problem ?

Here is the error I get:
geolocation plugin access to geolocation was blocked over insecure connection

_Copied from original issue: driftyco/ionic#9082_

[jgw96]

_From @msio777 on November 8, 2016 20:54_

It happens just if you use livereload -l on emulator (tested with ios emulator). try without it a it will work

[jgw96]

_From @zefrench on November 8, 2016 20:56_

I don’t use livereload.
I just type ionic run iOS

On Nov 8, 2016, at 2:55 PM, Michal Vranec [email protected] wrote:

It happens just if you use livereload -l on emulator (tested with ios emulator). try without it a it will work

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/driftyco/ionic/issues/9082#issuecomment-259256636, or mute the thread https://github.com/notifications/unsubscribe-auth/AIFLHMZeTgUYAZ5X8Ma9QSndWkul9BbBks5q8OGogaJpZM4Ks1yX.

[zefrench]

@jgw96 I hope you will help... Cos now I had to downgrade to RC1

[ihadeed]

@zefrench could you provide steps to reproduce this issue?

This usually just happens when you're running on livereload or using your IP address to preview the app instead of localhost. Also make sure that you have the plugin cordova-plugin-geolocation installed as it will use native code to retrieve your location instead of using the web API.

[shaneparsons]

I'm having similar issues, but only in safari. It doesn't seem to be a problem in chrome.

[ihadeed]

@shaneparsons make sure you have the plugin installed

[shaneparsons]

@ihadeed cordova-plugin-geolocation rather than import { Geolocation } from 'ionic-native'?

[ihadeed]

@shaneparsons you need to do both. Importing Geolocation from the ionic-native package will not install the plugin for you. You need to install cordova-plugin-geolocation and then use the API provided by ionic-native.

[shaneparsons]

@ihadeed Ah yeah I already have that done actually. I am using ionic serve though, which seems to be launching livereload automatically... Judging by your above comments, that could very well be my problem.

[ihadeed]

@shaneparsons ionic serve runs your app as a website on the browser. You can't test plugins that way.

[shaneparsons]

@ihadeed The way I'm using it works just fine in Chrome & Firefox though, my problems only exist in Safari. My understanding is that the geolocation plugin is one of the few that does work in the browser.

[zefrench]

Sorry but everything I read here is totally out of the problem I have with the geolocation plugin in Ionic 2 rc2.
You are taking about browser not iOS or android device.

[ihadeed]

@shaneparsons this is just something that has to do with the browser, not with with the plugin/ionic-native. You can't get the location on non-https hosts. On the browser the plugin uses Web API to get your location, Chrome & Firefox are ok with giving location to localhost because they know it's for development. Safari is not ok with that, they need https no matter where you are.

[ihadeed]

@zefrench I already replied to you. See my first comment on this issue.

[zefrench]

@ihadeed I'm using the native plugin. On ionic2 RC0 and RC it woks perfectly. I get the error only with the RC2 update.

[ihadeed]

@zefrench do you only get this issue with livereload?

[zefrench]

No, I never use live reload. Just a simple ionic run iOS.

[arjunbanker]

i also see this problem, only when running in the ios emulator (e.g. ionic cordova emulate ios --target="iPhone-6") any one find a workaround?

[cocomo]

Same running ionic serve

Ionic Framework: 3.3.0
Ionic App Scripts: 1.3.7
Angular Core: 4.1.2
Angular Compiler CLI: 4.1.2
Node: 6.4.0
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/602.2.14 (KHTML, like Gecko) Version/10.0.1 Safari/602.2.14

Let me know if you need more details.

[HudsonAfonso]

+1

[adamduren]

I made the mistake of doing npm install cordova-plugin-geolocation vs cordova plugin add cordova-plugin-geolocation.

Running npm rm cordova-plugin-geolocation followed by cordova plugin add cordova-plugin-geolocation fixed the problem for me.

[vovikdrg]

@adamduren are you running UIWebView or WKWebView?

[adamduren]

That's using WKWebView.

[fdambrosio]

I have the same problem.
In my case I can't use cordova-plugin-geolocation with
ionic cordova run android --livereload
because it's forbidden to get geolocation from unsecured origins.
Ref:
https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only
https://forum.ionicframework.com/t/ionic-geolocation-only-secure-origins-are-allowed-error/61333

[vovikdrg]

In case some body have similar problem make sure that you are calling methods after platform ready other wise you are talking to browsers api

[charan-kanaparthi]

hello guys , i am new to ionic , currently i m developing a android and ios app using ionic 3 my requirement is to show client current location in google maps, using gmaps java script api i have done in it , it is working fine in chrome so i build android app but in app its is not working , after a small research i found that issues is due to geolocation plugin access to geolocation was blocked over insecure connection.. please help how to get current location using ionic 3 in android

[vovikdrg]

@charan-kanaparthi are you calling getLocation after platform ready or before?

[charan-kanaparthi]

i didnt kept any platform ready , so callling before only

---

Best regards,
K Venkata Charan,
Student,MSIT,
mobile no:7382777766
E-mail : [email protected] [e-mail]
" laziness level *∞ *..".

On Fri, Dec 8, 2017 at 8:18 AM, Volodymyr [e-mail] wrote:

@charan-kanaparthi https://github.com/charan-kanaparthi are you calling
getLocation after platform ready or before?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic-native/issues/780#issuecomment-350157435,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AgxI94WV3lnMMk2BRI3RrljTdJOaSLSbks5s-KN0gaJpZM4KttEf
.

[vovikdrg]

@charan-kanaparthi read my comment :) https://github.com/ionic-team/ionic-native/issues/780#issuecomment-345865381

[charan-kanaparthi]

ok i kept platfor ready
this is my code
this.platform.ready().then(() => {
this.gett();

});

}

gett(){
this.geo.getCurrentPosition(this.options).then((resp) => {
var Latitude=resp.coords.latitude;
var Longitude=resp.coords.longitude;
this.getMap(Latitude, Longitude);
console.log(resp.coords.latitude); // resp.coords.latitude
console.log(resp.coords.longitude);// resp.coords.longitude
}).catch((error) => {
console.log('Error getting location', error);
});
}

// ionViewDidLoad() {
// console.log('ionViewDidLoad Menu_3Page');
// }
// // Get map by using coordinates

getMap(latitude, longitude) {

  var mapOptions = {
      center: new google.maps.LatLng(0, 0),
      zoom: 1,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  this.map = new google.maps.Map
  (document.getElementById("map"), mapOptions);


  var latLong = new google.maps.LatLng(latitude, longitude);

  var marker = new google.maps.Marker({
      position: latLong
  });

  marker.setMap(this.map);
  this.map.setZoom(15);
  this.map.setCenter(marker.getPosition());

}

// Success callback for watching your changing position

onMapWatchSuccess = function (position) {

  var updatedLatitude = position.coords.latitude;
  var updatedLongitude = position.coords.longitude;

  if (updatedLatitude != this.Latitude && updatedLongitude != this.Longitude) {

      this.Latitude = updatedLatitude;
      this.Longitude = updatedLongitude;

      this.getMap(updatedLatitude, updatedLongitude);
  }

}

// // Error callback

onMapError(error) {
console.log('code: ' + error.code + 'n' +
'message: ' + error.message + 'n');
}

// Watch your changing position

watchMapPosition() {

  return navigator.geolocation.watchPosition
  (onMapWatchSuccess, onMapError, { enableHighAccuracy: true });

}
}

[charan-kanaparthi]

still it is working only in chrome

[vinigg2]

Has anyone found a solution?

[kierandesmond]

I'm using geolocation with iOS on an emulator. Just getting a vague error message each
time I toggle it on.

Location Error: {"line":1833,"column":29,"sourceURL":"http://localhost:8080/Users/user130871/Library/Developer/CoreSimulator/Devices/746A03D7-1956-4921-A67C-E98A27629BF2/data/Containers/Data/Application/CAC81053-CE52-4B58-A88A-FD2F37D20DB9/Library/Application%20Support/83e9315f-8234-4da6-a14c-06a31c671594/build/main.js

Is this related?

Thanks

[danielsogl]

Safari is blocking this plugin if you don't use a secure HTTPS connection. Im using this plugin in production without any errors.
I think thats cousins this error for you.

[andrewaolwatson]

Possible solution: https://forum.ionicframework.com/t/blocked-access-to-geolocation-was-blocked-over-insecure-connection-to-http-localhost-8080/120364

[lathanbritz]

This is an API change from google

https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

[rafialikhan]

@lathanbritz agree this is a change at Google and other geolocation provider's end ...

How do we overcome this in ionic app?

Can we reopen this to explore options to run ionic in https on the Android and iOS apps.

[bayanAbuawad]

I was able to solve it by enabling gelocation API and adding it to my project

Add it to project

[abhimanyu96edu]

It worked for me by disabling the live server on visual studio.
And manually opening and refreshing the html file.

[CedLP]

Just test it with chrome it's ok, with safari you need to use https.
that when i solve mine