5分でローカル開発環境でHTTPSを機能させる方法

今日アクセスするほとんどすべてのWebサイトはHTTPSで保護されています。まだの場合は、そうする必要があります。サーバーをHTTPSで保護するということは、HTTPSで保護されていないサーバーからこのサーバーにリクエストを送信できないことも意味します。これは、すべてが//localhostすぐに使用できるため、ローカル開発環境を使用する開発者にとって問題となります。

私が参加しているスタートアップでは、セキュリティを強化するための動きの一環として、AWS Elastic LoadBalancerエンドポイントをHTTPSで保護することにしました。ローカル開発環境からサーバーへの要求が拒否され始める状況に遭遇しました。

後でグーグルで簡単に検索したところ、このような記事、これ、またはこれにHTTPSを実装する方法の詳細な説明が記載された記事がいくつか見つかりましたlocalhost。私がそれらに忠実に従った後でさえ、これらの指示のどれもうまくいかなかったようです。ChromeはいつもNET::ERR_CERT_COMMON_NAME_INVALID私にエラーを投げました。

問題

私が見つけたすべての詳細な指示は、それらが書かれた時点で正しいものでした。もう違います。

大量のグーグルの後、ローカル証明書が拒否された理由は、Chromeが証明書でのcommonNameマッチングのサポートを非推奨にし、事実上、2017年1月からsubjectAltNameを必要としていることを発見しました。

ソリューション

OpenSSLを使用してすべての証明書を生成します。

ステップ1:ルートSSL証明書

最初のステップは、Root Secure Sockets Layer(SSL)証明書を作成することです。このルート証明書を使用して、個々のドメイン用に生成する可能性のある任意の数の証明書に署名できます。SSLエコシステムに精通していない場合は、DNSimpleのこの記事で、ルートSSL証明書を紹介できます。

RSA-2048キーを生成し、ファイルに保存しますrootCA.key。このファイルは、ルートSSL証明書を生成するためのキーとして使用されます。この特定のキーを使用して証明書を生成するたびに入力する必要のあるパスフレーズの入力を求められます。

openssl genrsa -des3 -out rootCA.key 2048

生成したキーを使用して、新しいルートSSL証明書を作成できます。rootCA.pem。という名前のファイルに保存します。この証明書の有効期間は1、024日です。自由に変更してください。その他のオプション情報の入力も求められます。

openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

ステップ2:ルートSSL証明書を信頼する

新しく作成されたルートSSL証明書を使用してドメイン証明書の発行を開始する前に、もう1つの手順があります。Macにルート証明書を信頼するように指示して、Macによって発行されたすべての個々の証明書も信頼されるようにする必要があります。

Macでキーチェーンアクセスを開き、システムキーチェーンの[証明書]カテゴリに移動します。そこに到達したら、rootCA.pem[ファイル]> [アイテムのインポート]を使用してインポートします。インポートした証明書をダブルクリックし、[信頼]セクションの[この証明書を使用する場合:]ドロップダウンを[常に信頼]変更します。

これまでの指示に正しく従えば、証明書はKeychainAccess内で次のようになります。

ステップ2:ドメインSSL証明書

ルートSSL証明書を使用して、にあるローカル開発環境専用の証明書を発行できるようになりましたlocalhost

新しいOpenSSL構成ファイルをserver.csr.cnf作成して、コマンドラインで入力する代わりに、証明書の作成時にこれらの設定をインポートできるようにします。

[req] default_bits = 2048 prompt = no default_md = sha256 distinguished_name = dn [dn] C=US ST=RandomState L=RandomCity O=RandomOrganization OU=RandomOrganizationUnit [email protected] CN = localhost

v3.extX509v3証明書を作成するためにファイルを作成します。subjectAltNameここでどのように指定しているかに注意してください。

authorityKeyIdentifier=keyid,issuer basicConstraints=CA:FALSE keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment subjectAltName = @alt_names [alt_names] DNS.1 = localhost

localhost保存されている構成設定を使用するための証明書キーを作成しますserver.csr.cnf。このキーはに保存されserver.keyます。

openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <( cat server.csr.cnf )

証明書署名要求は、のドメイン証明書を作成するために以前に作成したルートSSL証明書を介して発行されlocalhostます。出力は、と呼ばれる証明書ファイルですserver.crt

openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

新しいSSL証明書を使用する

これでlocalhost、HTTPSでセキュリティを保護する準備が整いました。移動server.keyし、server.crtサーバー上のアクセス可能な場所にファイルを、サーバーの起動時にそれらを含めます。

In an Express app written in Node.js, here’s how you would do it. Make sure you do this only for your local environment. Do not use this in production.

I hope you found this tutorial useful. If you’re not comfortable with running the commands given here by yourself, I’ve created a set of handy scripts you can run quickly to generate the certificates for you. More details can be found on the GitHub repo.

I love helping fellow web developers. Follow me on Twitter and let me know if you have any suggestions or feedback. If you’d like to show your appreciation towards any of the work I’ve done, be it a blog post, an open source project or just a funny tweet, you can buy me a cup of coffee.