Using geolocation.getCurrentPosition while testing on local network

Question

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!

Answer 1

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

Answer 2

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.