Reputation: 2589
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
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
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
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
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