Geolocation APIの位置情報へのアクセス許可ダイアログがでない

環境

MacOSでVagrantを使用。
ゲストOSは、CentOS7.4。
Webサーバは、Apache2.4です。
今回の場合、環境に依存するようなものではないので、必要ない情報だと思います。

事象

ローカル(http://localhost)でのアクセス時でのみ、”ドメイン名”にあなたの位置情報へのアクセス許可をしますか?のダイアログがなぜか表示されない。

原因

Geolocation APIは、HTTPSでの通信でしか使用することが出来ない!ということでした。
このことを全く知らず、Geolocation APIで位置情報を取得しようとすると位置情報へのアクセスが許可されていないというエラーが出る状態でした。
言われてみればアクセス者の位置情報を取り扱うのに通信が暗号化されていないというのはセキュリティ的にまずいから当たり前ですね。
ただ、Geolocation APIの動作はブラウザの実装に依存するので、HTTPS通信必須でないものも存在するかもしれないですが、そこまでは調べてないです。
少なくとも、Google ChromeとFirefoxではHTTPS通信でしかGeolocation APIが動作しないようです。

Mozilla developersサイト

Secure context
This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Googleのdevelopersサイト

Starting with Chrome 50, Chrome no longer supports obtaining the user’s location using the HTML5 Geolocation API from pages delivered by non-secure connections. This means that the page that’s making the Geolocation API call must be served from a secure context such as HTTPS.

対処法

ローカルでHTTPS通信をする為に、オレオレ証明書を作成し、設定する。
これで、「”ドメイン名”にあなたの位置情報へのアクセス許可をしますか?」のダイアログが表示されるようになりました。
オレオレ証明書作成に関しては、いつも参考にしている良記事がありますので、参考にしてみてください。
Vagrantでオレオレ証明書(Self-Signed SSL Certificate) の設定を行う

所感

HTML5の機能として、簡単に位置情報の取得を行うことができるのは、本当にすごいと思いました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

山中 雅彦

大分でWebシステム受託開発会社のバックエンドエンジニアとして働いてます。 Laravel5でのシステム開発を中心に仕事してます。 高校卒業後に鉄鋼会社で電気整備の仕事をする傍ら、HTML、CSS、JS、PHP、MySQL、サーバ関連技術を独学で勉強。 2017年9月にWebシステム開発会社に入社し、システム開発をしています。 Web技術全般が好きなPHPerです。