4

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!

Darryl Huffman
  • 2,499
  • 3
  • 18
  • 40
  • Starting to think I'm just in a pickle lol! I may have to resort to uploading it to a server like Heroku but then I need to worry about figuring out my database too.... – Darryl Huffman Apr 22 '20 at 19:05
  • You can easily run a local HTTPS server using [`http-server`](https://www.npmjs.com/package/http-server) NPM package. You just generate your own certificate using `openssl` in the same directory with your site and it will work using `http-server -S -C cert.pem -o -p 80` inside the directory with your local website, though I doubt this is the issue. Do you have any other resources that are being served over single HTTP in that page? You should create a simple page just containing the `geolocation.getCurrentPosition` code so to test it out. I can provide the steps to create it if you want. – Christos Lytras Apr 25 '20 at 20:16
  • 1
    Which local server are you currently using, Apache? You can even create your own certificate and enable that local server 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. I didn't have any issues to test the Geolocation API on Chrome desktop/mobile served by a local server using HTTPS even with a self-signed certificate. – Christos Lytras Apr 25 '20 at 20:22
  • 1
    @ChristosLytras can you post this as an answer? Between your response and https://stackoverflow.com/questions/21397809/create-a-trusted-self-signed-ssl-cert-for-localhost-for-use-with-express-node I was able to get this working. – Darryl Huffman Apr 30 '20 at 19:41
  • 1
    Nice you got this working Darryl. I've provided an answer. Check it out and even make any changes if you want. – Christos Lytras Apr 30 '20 at 20:22

4 Answers4

3

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

sourabhR4ikwar
  • 72
  • 4
  • 1
    I think unfortunately this answer doesn't work on IOS :( Looking at my chrome flags right now and this one doesn't exist. – Darryl Huffman Apr 30 '20 at 19:01
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.

Christos Lytras
  • 36,310
  • 4
  • 80
  • 113
1

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

miknik
  • 5,748
  • 1
  • 10
  • 26
  • I think unfortunately this answer doesn't work on IOS :( Looking at my chrome flags right now and this one doesn't exist. I was really excited about this answer because it seemed like the perfect solution during development. – Darryl Huffman Apr 30 '20 at 19:01
  • Can you get chrome beta / chrome dev versions on IOS? Might not be in release version – miknik Apr 30 '20 at 21:55
-1

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!

Samson Ugwu
  • 104
  • 2
  • 11
  • I don't know if this answer is entirely correct. On an iPhone, I am able to load the website from my machine locally via IPV4. However, my issue resides in the fact that my localhost (or local IP) is not served over HTTPS. I could potentially install an HTTPS cert on my local machine, but such a cert requires a domain name so I would also need to direct traffic from my domain to local network. I just wish and like to believe there may be some way to get around this via testing. – Darryl Huffman Apr 24 '20 at 21:13
  • Same thing as what am saying, you will need to make an http request via a production server to get what you actually want. – Samson Ugwu Apr 24 '20 at 21:31