ローカルでの HTTPS テスト環境の構築post

ローカルでのウェブアプリの開発では、もはや https が必須ということで動作確認に難儀していましたが、 しばらく前にローカルで認証局を簡単に設置できる mkcert なるツールがあると知ったので、使い方を調べてみました。

PC上での使い方は結構サクッと出てきたので、実際のユースケースも念頭に Android でもオレオレ証明書が正規の証明書として利用できるような設定方法も調べてみました。

20200501_local_https_secure3

mkcert の Windows へのインストール

mkcert の Windows セクションを参考にしてください。

mkcert の macOS へのインストール

homebrew を使ったインストールが簡単です。

brew install mkcert とターミナルで入力し実行するだけ。

$ brew install mkcert
Updating Homebrew...
==> Auto-updated Homebrew!
           :
==> Downloading https://homebrew.bintray.com/bottles/mkcert-1.4.1.mojave.bottle.tar.gz
==> Downloading from https://akamai.bintray.com/91/9100c7f044d91e6ca0c483ed572217de28daa34c04fa6e2a130116175ba162e9?__gda__=exp=1588341913~hmac=516f50b8cbb6930276b
######################################################################## 100.0%
==> Pouring mkcert-1.4.1.mojave.bottle.tar.gz
🍺  /usr/local/Cellar/mkcert/1.4.1: 6 files, 5.3MB

Firefox で利用する場合は

$ brew install nss

も必要なようです。

システムへのローカルの認証局のインストールは mkcert -install を実行するようです。

$ mkcert -install
Created a new local CA at "/Users/▒▒▒▒/Library/Application Support/mkcert" 💥
Sudo password: ******
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊

証明書の作成

証明書の作成は mkcert {hostname_or_ip} ... のような感じで、コマンドの後に証明書に含めたいホスト名もしくはIPを指定します。

$ mkcert 0.0.0.0 localhost 127.0.0.1 ::1
Using the local CA at "/Users/▒▒▒▒/Library/Application Support/mkcert" ✨

Created a new certificate valid for the following names 📜
 - "0.0.0.0"
 - "localhost"
 - "127.0.0.1"
 - "::1"

The certificate is at "./0.0.0.0+3.pem" and the key at "./0.0.0.0+3-key.pem" ✅

実行時のカレントディレクトリに *.pem = 公開鍵、と *-key.pem = 秘密鍵、が作成されるので、https として動作させる場合の公開鍵と秘密鍵として指定します。

macOS で利用する場合の設定

mkcert をインストールしたPCでは、すでに、システムにローカル認証局の証明書がインストールされているので特に何かする必要はないです。

もし、他のPCで利用する場合は、下記に記載の方法で証明書のエクスポートをし、それをシステムにインストールしてください。

Android で利用する場合の設定

証明証のエクスポート

macOS の場合

20200501_ser_export_from_macos_key_chain

  1. 「キーチェーン」を開く
  2. 左部「ログイン」を選択し mkcert ▒▒▒▒▒▒▒▒▒▒▒▒ を探す、
  3. 右クリックメニューから「"mkcert ▒▒▒▒▒▒▒▒▒▒▒▒"を書き出す」を選んでファイルに保存
  4. 最後に、保存したファイルをなんとかして Android にコピーします。

証明書のインストール

  1. 「設定」アプリを開く
  2. 「セキュリティ」→「詳細設定」→「暗号化と認証情報」「ストレージからのインストール」
    20200501_android_ser_install1   20200501_android_ser_install2   20200501_android_ser_install3
  3. エクスポートした証明書を選択
    20200501_android_ser_install4
  4. 「証明書の名前を指定する」欄は、適用に、「認証情報の使用」欄は「VPNとアプリ」を選択
    20200501_android_ser_install5
  5. 「信頼できる認証局」→「ユーザー」タブを選択し、インストールした証明書が含まれていたらOK
    20200501_android_ser_install6   20200501_android_ser_install7

証明書の利用

適当なウェブサーバーを使って確認します。

Node.js がインストール済みの場合は http-server - npm が簡単そうなので、

$ npm install -g http-server

としてインストールして試してみます。

HTML は適当に

<html>
  <head>
  </head>
  <body>
    Is this page visible on https?
  </body>
</html>

みたいな感じに作ります。

カレントディレクトリに、前述の 0.0.0.0+3.pem0.0.0.0+3-key.pem を保存し

$ http-server . -S -C 0.0.0.0+3.pem -K .0.0.0.0+3-key.pem

とするとローカル認証局の証明書がインストールされていれば、有効な証明書として利用されます。

Chrome for Android で確認するとこんな感じ

20200501_local_https_secure120200501_local_https_secure2

Chrome for macOS で確認するとこんな感じ

20200501_local_https_secure4

参考


   /   変更履歴  /   Permalink  /  このエントリーをはてなブックマークに追加 
 カテゴリ: ブログ  /   タグ: macOS, https, ssl, brew, nodejs, mkcert