localhostの自己署名SSL証明書をブラウザに信用させてHTTPSで通信する（Mac）
やりたいこと
以下のようになるのを、
https://gyazo.com/1f08b361539d52ca461a11f4b02c882b
以下のようにブラウザに信用させたい。
https://gyazo.com/f7c842b85ff660c1db13364a425d0b27
やりかた
以下のコマンドでserver.keyとserver.crtを今いるディレクトリに生成する。
code:bash
openssl req \
-newkey rsa:2048 \
-x509 \
-nodes \
-keyout server.key \
-new \
-out server.crt \
-subj /CN=localhost \
-reqexts SAN \
-extensions SAN \
-config <(cat /etc/ssl/openssl.cnf \
<(printf 'SAN\nsubjectAltName=DNS:localhost,IP:192.168.0.1')) \ -sha256 \
-days 3650
上記のsubjectAltName=DNS:localhostが重要。
Finderで開くと以下のようになると思う。open .
https://gyazo.com/fddb84504d88f96a343f255bfcce1353
MacのKeyChainアプリケーションを開く。
https://gyazo.com/183fc7f37fb718949ddd2844ca1f69fd
以下だとコマンド開ける。
code:bash
open -a 'keychain access'
以下のようにSystemを選んで、鍵などがたくさん一覧されているところに作ったserver.crtをドラッグアンドドロップする。
https://gyazo.com/36d4c57b7e18457fa181c83278c69f8b
すると以下のようにパスワードを要求されるので入力する。
https://gyazo.com/79fabf63d2d53dad4588ddfd3cbc785b
うまくドラッグアンドドロップできる以下のように追加される。
https://gyazo.com/4752f0217e90a172e046cdb775e44b35
上記の"localhost"をダブルクリックすると、以下のようなウィンドウが開く。
https://gyazo.com/7f0be56412334bc9fcc48a6b575f8d7c
"Trust"を開いて、"Always Trust"に変える。
https://gyazo.com/f553930bfb07937e32966d1fef5d70d3
変えたら、赤いばってんマークで閉じようとする。
https://gyazo.com/9f23b0e791c79ac68614732a15ac994f
閉じようとすると以下のようにパスワードが求められるので入力する。
https://gyazo.com/162b44b21c00c776c4037f9eabc32a58
動作を確認する
Node.jsが入っていれば、server.keyやserver.crtと同じディレクトリで以下のコマンドを叩くとにHTTPSのサーバーが立ち上がる。 code:bash
echo -e 'const https = require("https");\nconst fs = require("fs");\n\nconst serverKeyPath = "server.key";\nconst serverCrtPath = "server.crt";\nconst httpsPort = 8443;\n\nhttps.createServer(\n {\n key: fs.readFileSync(serverKeyPath),\n cert: fs.readFileSync(serverCrtPath),\n },\n (req, res) => {\n res.end("hello, world");\n }\n).listen(httpsPort, () => {\n console.log(Listen HTTPS on ${httpsPort}...);\n});\n' | node
ブラウザはリロードするだけで良い。ブラウザ自体を再起動する必要はなかった。
https://gyazo.com/f7c842b85ff660c1db13364a425d0b27
https://gyazo.com/ad67f4d3b03799a0a5384cfa09dbc06b
ただしFirefoxは以下のようになる。（MOZILLA_PKIX_ERROR_SELF_SIGNED_CERT） https://gyazo.com/c97eb3b77540b022b0c7ef176b48ce7f
おまけ
上記で使ったコードは以下。
code:js
const https = require("https");
const fs = require("fs");
const serverKeyPath = "server.key";
const serverCrtPath = "server.crt";
const httpsPort = 8443;
https.createServer(
{
key: fs.readFileSync(serverKeyPath),
cert: fs.readFileSync(serverCrtPath),
},
(req, res) => {
res.end("hello, world");
}
).listen(httpsPort, () => {
console.log(Listen HTTPS on ${httpsPort}...);
});
https://gh-card.dev/repos/FiloSottile/mkcert.svg https://github.com/FiloSottile/mkcert