Darryl Huffman
Darryl Huffman

Reputation: 2589

Using geolocation.getCurrentPosition while testing on local network

I am trying to access my phone's geolocation via navigator.geolocation.getCurrentPosition by connecting to a website hosted on a local machine via local IPv4 address. Problem is, when running the code from my phone I get the error "Origin does not have permission to use Geolocation service". After researching, I believe my phone is blocking that browser method because I am not hitting my local website over HTTPS or localhost.

Does anyone know of a way for me to test this locally? Do I have to publish my in-development code to a web server with HTTPS just to test this?

Any help would be very appreciated. Thanks in advance!

Upvotes: 4

Views: 3444

Answers (4)

Christos Lytras
Christos Lytras

Reputation: 37318

You can easily run a local HTTPS server using http-server NPM package. You just generate your own certificate using openssl in the same directory with your site using something like this:

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

and it will work starting the server by executing:

http-server -S -C cert.pem -o -p 80

inside the directory with your local website. Take care of the filenames of the key and the certifacate because http-server default key filename is key.pem but of course you can change that using the -K <filename> parameter.

You can even use that certificate to other local servers (Apache, Express, Nginx, etc.) to serve the site with HTTPS using that cert. The site will get flagged as unsecure by Chrome because you'll have a self-signed certificate, but that does not affect the usage of the Geolocation API and you should be able to test it out. And as you have found, you can even trust that self-signed certificate and add it to browsers like Chrome ("create a trusted self-signed SSL cert for localhost").

Also check if you have any other resources that are being served over single HTTP in that page because there will be issues if there are. You should create a simple page just containing the geolocation.getCurrentPosition code so to test it out.

Upvotes: 2

miknik
miknik

Reputation: 5941

If you are using chrome on your mobile then you can set a flag for this.

In chrome navigate to:

chrome://flags/#unsafely-treat-insecure-origin-as-secure

then enter the address you are serving your site from and chrome will treat it as a secure site

Upvotes: 1

sourabhR4ikwar
sourabhR4ikwar

Reputation: 82

if you are using chrome browser on your phone which is recommended. Then you could head over to

chrome://flags

and search for these 2 options and Enable them.

Allow invalid certificates for resources loaded from localhost.

and

Insecure origins treated as secure

Upvotes: 4

Samson Ugwu
Samson Ugwu

Reputation: 104

You will need to deploy your website to a production server like heroku, aws or any other production server of your choice for you to be able to get what you want.

You can't run a local server on your smart phone because the site can only run locally on the host system where it lives.

I hope this helps!

Upvotes: -1

Related Questions