WEBサイト制作に関するTips

xampp » AndroidデバイスからXAMPP開発環境にSSLでアクセス

【前提１】
・自己署名証明書でXAMPPでSSLを有効にしている
・同一ネットワークに接続中のスマホからプライベートIPを使ってXAMPP環境にアクセス可能
という状況で、プライベートIPに対して自己署名証明書を作成すると
XAMPP構築端末に割り振られるIPが変わった場合に面倒なことになる

【前提２】
Android端末のhostsの書き換えはroot権限が必要なようで
自分ひとりならまだしも、デザイナーの環境まで整えようと思った場合、かなり高いハードルになる

【前提３】
Android11以降では自己署名証明書を入れようとすると
「証明書をインストールするには、秘密鍵が必要です」
というアラートが表示されインストールできないので
「X509v3 Basic Constraints: CA:TRUE」となるCA証明書を作成する必要がある

【行った作業の概要】
実在する運用中のドメインに localhost.mydomain.com というような形のサブドメインを設定し、
その向き先に 192.168.0.5 とXAMPP環境端末に割り当てられているプライベートIPを設定、
そしてその localhost.mydomain.com に対して自己署名証明書を作成し、
Android端末にも自己署名証明書をインストールしてSSL通信できるようにした

【作業内容詳細】
1. php.iniで下記内容がコメントアウトされている場合は解除し、XAMPPのSSLを有効にする

extension=php_openssl.dll
2. /xampp/apache/conf/extra/https-ssl.confに下記を追記

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

3. /xampp/apache/conf/openssl-san.cnf を作成し、以下の内容を記載

[req]
distinguished_name = req_distinguished_name
x509_extensions = v3_req
prompt = no

[req_distinguished_name]
CN = localhost.mydomain.com

[v3_req]
keyUsage = critical, digitalSignature, keyEncipherment
extendedKeyUsage = serverAuth
subjectAltName = @alt_names
basicConstraints = critical, CA:true

[alt_names]
DNS.1 = localhost.mydomain.com

4. Git Bashで以下のコマンドを実行

$ cd /c/xampp/apache/conf

# openssl-san.cnfを読み込んでCA:trueな証明書を作成
openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout ./ssl.key/localhost.mydomain.com.key -out ./ssl.crt/localhost.mydomain.com.crt -config openssl-san.cnf

# Androidで使用する.cerを作成
openssl x509 -in ./ssl.crt/localhost.mydomain.com.crt -outform DER -out localhost.mydomain.com.cer

# 将来的に秘密鍵とセットになった形式が必要になった場合のために、PKCS#12 (.pfx) ファイルも念のため作成しておく
openssl pkcs12 -export -out localhost.mydomain.com.pfx -inkey ./ssl.key/localhost.mydomain.com.key -in ./ssl.crt/localhost.mydomain.com.crt

5. 作成した自己署名証明書をインストール

・Windows
localhost.mydomain.com.cer をダブルクリック
» 証明書のインストール
» 現在のユーザー
» すべての次のストアに配置
» 信頼されたルート証明機関
» はいを選択
・Android
設定アプリを起動
» セキュリティおよびプライバシー
» その他のセキュリティ設定
» ストレージからインストール
» CA証明書
» localhost.mydomain.com.cer を選択

2024-09-04 19:16:30