対策方法
根本的な原因はブラウザとWEBサーバー間の通信データの暗号化を行うSSLサーバー証明書が存在しないことなので、サーバー証明書と秘密鍵を生成して設置する。
(XAMPP for Windows 8.1.10 環境)

Chocolate をインストール
サーバー証明書と秘密鍵の生成には mkcer が必要で mkcer をインストールする為に先ずは Chocolatey をインストールする。

PowerShellを管理者権限で開き下記のコマンドを実行。

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

バージョン確認
インストール後、下記コマンドでバージョン確認

choco -v

バージョンが表示されればOK。

mkcert のインストール
続いて mkcert のインストール

choco install mkcert

認証局の作成、証明書リストへの追加

mkcert -install

サーバー証明書と秘密鍵を生成
下記は localhost ドメインに対してサーバー証明書と秘密鍵が作成される。

mkcert localhost

作成された localhost.pem (サーバー証明書)と localhost-key.pem(秘密鍵)を以下のように配置。

C:\xampp 環境が前提。

localhost.pem を下記のパス構造になるように設置

C:\xampp\apache\conf\ssl.crt

localhost-key.pem を下記のパス構造になるように設置

C:\xampp\apache\conf\ssl.key

Apacheの設定

C:\xampp\apache\conf\extra\httpd-vhosts.conf

以下の項目を最終行に追加

<VirtualHost *:443>
    DocumentRoot "C:\xampp\htdocs"
    ServerName localhost
    SSLEngine on
    SSLCertificateFile "conf/ssl.crt/localhost.pem"
    SSLCertificateKeyFile "conf/ssl.key/localhost-key.pem"
</VirtualHost>

 

Apacheを再起動

ブラウザで https://localhost/ にアクセスして確認。