レ点腫瘍学ノート

日記/2021年/5月1日/LAN内のWebページに自己署名証明書でHTTPS接続を可能にする の履歴差分(No.2)


#author("2021-05-01T10:24:41+09:00;1970-01-01T18:00:00+09:00","default:tgoto","tgoto")
#author("2021-05-01T10:56:56+09:00;2021-05-01T10:24:41+09:00","default:tgoto","tgoto")
#contents

*最近のNASはLAN内に簡単にWebページを設置できる [#u9371933]

Synology NASは非常に高機能で、自宅Webサーバーを簡単に設置することもできます。うちのSynology NASはファイルフォルダーとして使用しているほか、自宅WebサーバーとしてApache 2.4+PHP 7.4を稼働させて業務で使用する自分用のPukiwikiを設置しています(インターネットには公開せずLAN内のみからアクセス可能)。また、そのSynology NAS上でVPN serverを稼働させてOpen VPNで外部からLAN内にアクセスできるようにしています。こうすることで、VPN接続した端末では自宅外からもLAN内のPukiwikiにアクセスすることができるようになっているのです。

さて、Synology NAS上のApache 2.4で公開したウェブページはHTTPSを用いた暗号化通信を利用することができますが、この場合の証明書の設定がちょっとややこしいという問題があります。近頃のレンタルサーバーの場合であれば、独自ドメインを使ったサイトでもLet's encryptの証明書を使ったSSL通信が無料で利用できますので、ドメイン利用料のみでHTTPSを使ったウェブサイトを構築できます。しかし自宅Webサーバーで独自ドメインに対して発行したLet's encryptのSSL証明書を使うのは若干手間がかかります。

#ref(https://oncologynote.com/img/27eda7b291_url.png,nolink)

さらにうちのLAN内のPukiwikiは独自ドメインですらなく生のローカルIPアドレス 192.168.XXX.XXX というURL上においてあります。192.168.〜に対してLet's encryptの証明書を発行することはできません。となると、192.168.XXX.XXX でHTTPS通信を行うには自己署名証明書(いわゆるオレオレ証明書)を使うしかなさそうです。

*自己署名証明書(オレオレ証明書)で証明書の信頼性エラーの警告を表示しないようにする [#seb1f2ec]

Synologyのウェブサイトにオレオレ証明書でHTTPS接続するときに証明書の信頼性エラーの警告を表示しないようにします。

**証明書の発行 [#l09056b9]

まずDiskStationで証明書を発行します。

「コントロールパネル→セキュリティ→証明書」と進み、「追加」を選んで証明書を作成する画面に進みます。

#ref(https://oncologynote.com/img/27eda7b291_0.png,nolink)
#ref(https://oncologynote.com/img/27eda7b291_1.png,nolink)

どうせLAN内でしか使用しない自己署名証明書なので会社名などはテキトーでかまわないと思います。

#ref(https://oncologynote.com/img/27eda7b291_3.png,nolink)
#ref(https://oncologynote.com/img/27eda7b291_7.png,nolink)

証明書が完成したら下記のような証明書一覧の中にさきほど作成した証明書が配置されているはずです。

#ref(https://oncologynote.com/img/27eda7b291_4.png,nolink)

証明書が作成できたら、「追加」タブの中から「証明書をエクスポート」を選択します。zip ファイルでダウンロードできるので、これを解凍します。中には以下のような4つのファイルが含まれているはずです。なお拡張子は古いバージョンのディスクステーションの場合は若干異なる可能性があります。

#ref(https://oncologynote.com/img/27eda7b291.png,nolink)

- cert.pem
- privkey.pem
- syno-ca-cert.pem ←これをインストール
- syno-ca-privkey.pem

上記の4つのファイルが生成されます。このうちsyno-ca-cert.pemをMacにインストールしておきます。

**MacやWindowsに証明書をインストールする [#s29ee18b]

ダブルクリックするか、またはキーチェーンアクセスにドラッグドロップで簡単にインストールができます。Windowsの場合は右クリックでインストールできます。

**Firefoxに証明書をインストールする [#u536aaf9]

Firefoxの場合はMacやWindowsなどのOSに証明書をインストールしただけではエラー表示が消えてくれません。ブラウザに証明書をインストールする必要があります。

#ref(https://oncologynote.com/img/27eda7b291_ff.png,nolink)

Firefoxの設定画面から「セキュリティ→証明書→証明書を表示」へと進みます。
さらに「証明書マネージャー」が表示されたらその中から「認証局証明書」のタブをクリックし、「読み込む」からsyno-ca-cert.pemを読み込みます。これでブラウザを再起動するとFirefoxでその証明書が有効になります。

#ogp(https://jp.globalsign.com/support/faq/559.html)

**iPhoneに証明書をインストールする [#j53f6b89]

***iPhoneに証明書をプロファイルとしてインストールする。 [#td4de087]
***iPhoneに証明書をプロファイルとしてインストールする [#td4de087]

先ほどのsyno-ca-cert.pemファイルをAirDropなどでiPhoneに転送してあげましょう。するとiPhone側で「設定→一般」からプロファイルのインストール画面に進めるので、そのままインストールしてあげます。

#ogp(https://support.kaonavi.jp/function-admin/secure-access/025/)

ただし、iOS 13以降ではプロファイルをインストールしただけではSafariの証明書エラーの警告表示は消えません。インストールしたプロファイルの証明書を「証明書信頼設定」で全面的に信頼するという設定をしてあげる必要があります。

***証明書信頼設定 [#nd787f47]

設定画面から「設定→一般→情報→証明書信頼設定」の順に進んで、「ルート証明書を全面的に信頼する」で、証明書に対する信頼を有効にします。詳しくは下記のサイトに解説があります。

#ogp(https://support.apple.com/ja-jp/HT204477)

これで、FirefoxからアクセスしてもiPhoneのSafariからアクセスしても、ちゃんとSSLの南京錠のマークが表示されます。