2000年の初め頃、https（HTTPのSSLによる暗号化通信）は、Webサイトの一部のページやECサイトなど、機密情報を扱う部分のみで使われていました。

「ネット決済をするときは、URL横の鍵マークを確認しましょう！」と、注意喚起されていたのを覚えています。

現在は、機密情報を扱う・扱わないに関係なく、ほとんどのWebサイトがhttpsを採用しています。安全なサイトであることを証明するためです。

日本（2025年）におけるWebサイトのhttps使用率は95%に達しているそうです。ですから、httpsは必須と言えます。

ローカルWebサーバーのhttps化は不要ですが、アプリ開発環境であれば、実環境（一般ユーザにアプリを使ってもらう環境）に合わせて導入した方が良いでしょう！

※環境：XAMPP 8.2.12
　　　　　XAMPP Control Panel Version 3.3.0.
　　　　　Apache 2.4.58
　　　　　OpenSSL 1.1.1p
　　　　Chrome バージョン 142.0.7444.163 (Windows版)

XAMPPの初期状態

XAMPPはインストール直後の初期状態で、httpsによるアクセスへ対応しています。

しかし…

SSLによる接続が確立できない（ERR_CERT_AUTHORITY_INVALID）ため、Webパージは表示されません。

接続が確立できない理由は、証明書が「自己署名証明書」である事と、証明書が期限切れである事です。

また、WebページがXAMPP用に準備されたデフォルトのページであったり、証明書の証明対象のホスト名がlocalhostであったり、実用的とは言えません。

Webサーバーとやり取りするアプリ開発で使用できるように、httpsの設定を見直したいと思います。

ホスト名の設定

任意のホスト名でhttpsアクセス出来るように、/etc/hostsへホスト名とIPアドレスのペアを追加します。
※hostsの書き換えについては「Windowsの/etc/hosts書き換え」を参照

PS C:\Users\ユーザー名> cd /Windows/System32/drivers/etc
PS C:\Windows\System32\drivers\etc> cat hosts
# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#       127.0.0.1       localhost
#       ::1             localhost
        192.168.0.2    mysite.example.com

自己署名証明書の作成

opensslコマンドを使って証明書を作成します。以下の手順に従って下さい。

opnesslコマンドはXAMPP内にあります。所在は「XAMPPのインストール先\apache\bin」です。このopensslを使っても良いし、別途用意したopensslでも構いません。

XAMPPからShellを起動すれば、コマンド検索パスの設定されたターミナル（昔ながらのcmd.exe）が起動します。そのまま、ターミナル上でopensslが利用可能です。

# openssl version
OpenSSL 3.1.3 19 Sep 2023 (Library: OpenSSL 3.1.3 19 Sep 2023)

（1）秘密鍵の作成

秘密鍵を作成します。

# openssl genrsa -out server.key 2048

# type server.key  ... 作成された秘密鍵
-----BEGIN PRIVATE KEY-----
MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQD6FeEyM/XFpJJU
FKSA/kRRZeLVUZwKjsB6/Plp4mgpkqlOMCDKdrb2YTD1iwuLhn+FnoeP53Y1edJ0
...
BZy8zRR+tOFoSis4UtfbYYrNACvTgsG1N/w7nZJyeN7aOPxz1P4y0VFD1fdMHG1B
LQm8a1Vajjd9EmmjUVNQ0kE=
-----END PRIVATE KEY-----

（2）証明書署名要求（CSR)の作成

CSRを作成します。

Common NameはWebサーバーのホスト名にしてください。それ以外は、Webサーバーに適した文字列を入れてください。

また、公開鍵は、引数で指定した秘密鍵（server.key）から内部で自動生成されます。

# openssl req -out server.csr -key server.key -new
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [AU]:JP
State or Province Name (full name) [Some-State]:SampleKen
Locality Name (eg, city) []:SampleShi
Organization Name (eg, company) [Internet Widgits Pty Ltd]:SampleCorp
Organizational Unit Name (eg, section) []:SampleSect
Common Name (e.g. server FQDN or YOUR name) []:mysite.example.com
Email Address []:SampleAddr

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:[RET]
An optional company name []:[RET]

# type server.csr  ... 作成されたCSR
-----BEGIN CERTIFICATE REQUEST-----
MIIC3TCCAcUCAQAwgZcxCzAJBgNVBAYTAkpQMRIwEAYDVQQIDAlTYW1wbGVLZW4x
EjAQBgNVBAcMCVNhbXBsZVNoaTETMBEGA1UECgwKU2FtcGxlQ29ycDETMBEGA1UE
...
CpjTpvkWsuh9N5pXlDD09mIZDgE/+4aPjb45GsFIKRH7E1LqgaIHhWiLkmafzb2I
r0AvSX9vb8bNt9pWw3tBIuQ=
-----END CERTIFICATE REQUEST-----

（3）自己署名証明書（CRT）の作成

証明書を作成します。

署名に用いるキーが自身の秘密鍵（server.key）なので、自己署名証明書になります。

# echo subjectAltName=DNS:mysite.example.com > server.ext
# echo basicConstraints=CA:TRUE >> server.ext
# openssl x509 -req -days 365 -key server.key -in server.csr -out server.crt -extfile server.ext
Certificate request self-signature ok
subject=C = JP, ST = SampleKen, L = SampleShi, O = SampleCorp, OU = SampleSect, CN = mysite.example.com, emailAddress = SampleAddr

# type server.crt  ... 作成されたCRT
-----BEGIN CERTIFICATE-----
MIIDtzCCAp8CFBZ+7cHCkIrqpnBd2+Vzfdj40AIrMA0GCSqGSIb3DQEBCwUAMIGX
MQswCQYDVQQGEwJKUDESMBAGA1UECAwJU2FtcGxlS2VuMRIwEAYDVQQHDAlTYW1w
...
pckuvzhIWF57ayeogOzbhRg9s7wMjPthmBgj942NgLAdarhdteOUkqL4I4p48TQu
M9SVr3lu2g0ii0odgsFflwyd6FzsMKZOK1KBTPKUnZ7N4mTm3ghzzu2ksQ==
-----END CERTIFICATE-----

Chrome対応

最新のChromeは、証明対象のホストをSAN（Subject Alternative Name）で評価するようになりました。CN（Common Name）は使われません。

ですので、Chromeへ取り込む証明書は、SANを持つ必要があります。

また、Androidの証明書マネージャーは、取り込む証明書にCA証明書を期待します。「basicConstraints=CA:TRUE」を指定するとCA証明書になります。

以下は、証明書のダンプです。Chrome対応は赤字の部分が必要です。

# openssl x509 -text -in server.crt -noout
Certificate:
    Data:
        Version: 3 (0x2)
        Serial Number:
            76:8d:03:60:fa:d7:9c:0e:f0:cb:f9:df:a0:fd:bf:ba:9d:b4:19:34
        Signature Algorithm: sha256WithRSAEncryption
        Issuer: C = JP, ST = SampleKen, L = SampleShi, O = SampleCorp, OU = SampleSect, CN = mysite.example.com, emailAddress = SampleAddr
        Validity
            Not Before: Nov 20 13:53:37 2025 GMT
            Not After : Nov 20 13:53:37 2026 GMT
        Subject: C = JP, ST = SampleKen, L = SampleShi, O = SampleCorp, OU = SampleSect, CN = mysite.example.com, emailAddress = SampleAddr
        Subject Public Key Info:
            Public Key Algorithm: rsaEncryption
                Public-Key: (2048 bit)
                Modulus:
                    00:fa:15:e1:32:33:f5:c5:a4:92:54:14:a4:80:fe:
                    44:51:65:e2:d5:51:9c:0a:8e:c0:7a:fc:f9:69:e2:
                    ...
                    15:07:91:b8:8a:5b:cc:fe:8d:c6:22:d8:8a:15:94:
                    7c:3b
                Exponent: 65537 (0x10001)
        X509v3 extensions:
            X509v3 Subject Alternative Name:
                DNS:mysite.example.com
            X509v3 Basic Constraints:
                CA:TRUE
            X509v3 Subject Key Identifier:
                2A:53:5F:8A:D6:87:36:C7:69:44:1B:30:34:38:CB:77:63:91:57:EB
    Signature Algorithm: sha256WithRSAEncryption
    Signature Value:
        ac:26:d6:d3:77:7b:69:52:75:df:f8:9b:48:de:ab:9d:f2:da:
        3c:ce:16:25:42:e6:62:e9:ea:4e:e4:1e:ed:b1:1d:47:dd:92:
        ...
        fb:ba:a3:b7:82:9d:4f:17:c5:1f:ab:e6:a2:4d:a1:d1:1c:2e:
        b3:73:93:a8

httpsの設定

サーバー設定をhttpd-ssl.confに行います。所在は「XAMPPのインストール先\apache\conf\extra」です。

XAMPPからhttp-ssl.confをNotePadで開くことが出来ます。

ファイルの最後に次の記述を追加して下さい。

<VirtualHost *:443>								... すべてのIPに対応
DocumentRoot "G:/MyContent/"					... トップページのソースの所在
ServerName mysite.example.com					... 要求に応じたサーバ名
SSLEngine on									... SSL有効
SSLCertificateFile "conf/ssl.crt/server.crt"	... 証明書
SSLCertificateKeyFile "conf/ssl.key/server.key"	... 秘密鍵
</VirtualHost>

「自己署名証明書の作成」で作成した証明書ファイル（server.crt）をSSLCertificateFileへ、秘密鍵ファイル（server.key）をSSLCertificateKeyFileへ置きます。

# copy server.crt x:\XAMPP\apache\conf\ssl.crt\
x:\XAMPP\apache\conf\ssl.crt\server.crt を上書きしますか? (Yes/No/All): Y
        1 個のファイルをコピーしました。

# copy server.key x:\XAMPP\apache\conf\ssl.key\
x:\XAMPP\apache\conf\ssl.key\server.key を上書きしますか? (Yes/No/All): Y
        1 個のファイルをコピーしました。

最後に、httpdを再起動してください。再起動で設定が反映されます。

コンテンツの配置

DocumentRootに指定したフォルダへ、トップページのソース（html）を配置します。

今回はサンプルなので、簡素なトップページになっています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"/>
    <title>MyContent</title>
</head>
<body>
    <p id="text"></p>
    <script>
        const text = document.getElementById('text');
        const mesg = 'このパージのURLは「'+location.href+'」です。';
        text.innerHTML = mesg;
    </script>
    <center><p>【 My Content 】</p></center>
    <center><img src="./Droid.png" alt="Droid-Kun"></center>
</body>
</html>

httpsでアクセス

WindowsのChromeを使ってhttpsでアクセスした結果です。

通常、Chromeは自己署名証明書を「信頼できない証明書」と判断します。その結果、httpsによる接続は拒否されます。

上記の結果は、自己署名証明書を「信頼できる証明書」として、Chromeへ意図的に取り込んでいます。

httpsで接続が出来ているのは、そのためです。

※詳細は「自己署名証明書を取り込む（Windows Chrome編）」を参照

関連記事：