mkcertを使ってlocalhostをHTTPS化して開発する

証明書

以前も同じ内容の記事を書きましたが、auth0のブログにあった方法のほうが便利そうなので、試してみました。
auth0のブログの内容をちょこちょこ翻訳しながら紹介します。

元になったブログ記事はこちら

Why and How to Use HTTPS in Your Local Development Environment

auth0はOAuth・OIDCなどの認証認可基盤とよばれるようなシステムの開発会社です。認証認可（サインインやログインなど）に関するブラウザ等の機能（例：FIDO2認証）にはHTTPSが必要とされることがあり、ローカル開発環境にもHTTPSが必要になのでしょう。

試した環境

Windows 10
Chocolatey v0.12.1
- mkcertをインストールするために必要
mkcert v1.4.3
- HTTPSに必要な証明書などを作成するツール
Node.js v12.22.5

手順

mkcertのインストール

HTTPSに必要な証明書などを作成するツールmkcertをインストールします。
OpenSSLが最もよく知られていて最も強力ですが、公開鍵基盤について充分な知識が必要なため、今回はmkcertを使うとのことです。

mkcertのインストール方法はmkcertのGitHubに記載されているとおりですが、WindowsなのでChocolateyを使います。WSLを使ってLinux版のインストール手順で実行することもできそうですね。

Chocolateyのインストール方法も公式サイトに記載されているとおりで出来ました。

Chocolatey Software | Installing 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://community.chocolatey.org/install.ps1'))

完了するまで待ち、完了したら以下のコマンドで確認します。

choco

バージョン情報が帰ってくれば完了です。
改めてmkcertのインストールをします。

choco install mkcert

インストールが完了すると、インストール成功という情報とバージョンの情報が返ってきました。

mkcertでローカル認証局を作成する

以下のコマンドを実行します。

mkcert -install

ポップアップ画面で以下の画像のようなセキュリティ警告が表示されました。
どうやら、Firefoxの機能・設定に関する警告（Setting Up Certificate Authorities (CAs) in Firefox | Firefox for Enterprise Help）であり、Firefoxを使わないのであれば無視してよいそうです。

mkcert

今回は「はい」を選ぶことにしました。

証明書の作成

まず、Node.js上に構築するアプリのフォルダを作成します。フォルダ名はブログ記事の内容と同じにしてmy-secure-appとします。
作成したフォルダ内に入ります。

フォルダ内で以下のコマンドを実行し、localhostというホスト名に対する証明書（localhost.pem）と秘密鍵（localhost-key.pem）を作成します。

mkcert localhost

サーバのソースコード

先のmy-secure-appフォルダ内にserver.jsというファイルを作成し、以下のコードを書いて保存します。

const https = require('https');
const fs = require('fs');

const options = {
  key: fs.readFileSync('localhost-key.pem'),
  cert: fs.readFileSync('localhost.pem')
};

https.createServer(options, function (req, res) {
  res.writeHead(200);
  res.end("I'm HTTPS-enabled!");
}).listen(8080);

console.log("The server is listening to port 8080 with HTTPS enabled.");

実行

my-secure-appフォルダ内でPowerShellかコマンドプロンプトを立ち上げ、以下のコマンドを入力します。

node server.js

これによってhttps://localhost:8080でサーバがアクセスを待っています。
実際に上記のURLをChromeに入力すると、「I'm HTTPS-enabled!」というメッセージがブラウザに表示されます。

アドレスを変更してhttp://localhost:8080にしてHTTPで接続を試みると、「ページは動作していません」というブラウザのエラー画面になります。

また、Firefoxでhttps://localhost:8080にアクセスを試みると、以下の画像のように警告が表示されます。証明書が無効になっているHTTPSのサイトにアクセスしたときに表示される画面と同じです。
mkcertでローカル認証局を作成したときの警告と関連しており、Firefoxがこの認証局を信頼していないということが原因です。

Firefox