つよつよエンジニアになりたい

つよつよエンジニアになりたいエンジニアが日々の学びや気づきをアウトプットしていきます

ローカル環境でHTTPS通信を実現する

localhostHTTPS(HTTP over SSL/TLS)通信を実現する方法をまとめます。

mkcertというライブラリを用いることで簡単に開発用の証明書を作成できます。 https://github.com/FiloSottile/mkcert

viteを使っている場合は@vitejs/plugin-basic-sslというプラグインがあるのでそちらを使いましょう。

https通信をするにはサーバ証明書と呼ばれる証明書が必要で、なりすましや改竄を防ぐことができます。通常、サーバの公開鍵とその他必要な情報をCA(認証局)に送信してサーバ証明書が発行されます。証明書を発行する認証局ルート認証局中間認証局下位認証局 の様な階層構造となっており、証明書の正当性は上位の認証局によって担保されています。ルート認証局は自身で正当性を担保できます。

mkcertで証明書の発行・認証局の作成

自己証明書
いわゆる”オレオレ証明書”。自身の秘密鍵で署名した証明書のことです。

自己認証局
自己証明書を発行するための機関のことです。自身を認証局としてサーバ証明書を発行し署名します。認証局の証明書(ルート証明書)をブラウザの証明書リストに追加すれば警告なしでhttps通信できます。

mkcertのインストール

brew install mkcert

自己認証局を作成

mkcert -install

ブラウザの(今回はChrome)の設定から「プライバシーとセキュリティ」→「セキュリティ」→「デバイス証明書の管理」から追加した認証局を確認できます。

サーバ証明書の発行

mkcert localhost

上記を実行すると

が作成されます。

これを使用して開発環境でhttps通信が実現できます。

Nodeでサーバを立ててHTTPSを実現する

🚧 Under Construction…

viteの@vitejs/plugin-basic-sslを使う

🚧 Under Construction… https://github.com/vitejs/vite-plugin-basic-ssl