自己署名証明書の開発環境においてブラウザの警告表示を消す

概要と経緯

• 自己署名した証明書を信頼することになる点をご理解してご利用ください
• Chrome などで 開発環境のHTTPSサーバーに対して REST API でアクセスするときに、 NET::ERR_CERT_AUTHORITY_INVALID や NET::ERR_CERT_COMMON_NAME_INVALID が発生するのを防ぎたい
• (自己署名証明書の利用時の警告マークを消したい)

環境

Server

• AWS
• Ubuntu 20.04.2 LTS
• nginx version: nginx/1.18.0 (Ubuntu)
• OpenSSL 1.1.1f 31 Mar 2020

Client

• Windows 10
• Chrome Version 94.0.4606.81 (Official Build) (64-bit)

Ubuntuでの作業

準備

• 対話形式で設定するのが手間がかかるので、ファイルから読み込む形式を採用
• crt.cnf と csr.cnf を任意のディレクトリに保存する
  • ２つのファイルの内容を適宜書き換える
  • commonName と DNSは統一する（nginxの設定、hostsの設定も含めて）

cd /home/ubuntu/
mkdir self_signed_cert
cd self_signed_cert
cp /path/to/crt.cnf .
cp /path/to/csr.cnf .

csr.cnf

[ req ]
default_bits       = 2048
distinguished_name = distinguished_name
req_extensions = req_extensions
prompt = no

[ distinguished_name ]
countryName                = JP
stateOrProvinceName        = MyState
localityName               = localityName
organizationName           = MyOrganization
commonName                 = hogehoge.com

[ req_extensions ]
subjectAltName = @alt_names

[ alt_names ]
DNS.1   = hogehoge.com

crt.cnf

subjectAltName = DNS:hogehoge.com

鍵の作成

openssl genrsa 2048 > server.key

証明書署名要求の作成と確認

openssl req -new -key server.key -config csr.cnf -out server.csr
openssl req -text < server.csr

証明書の作成と確認

openssl x509 -days 365 -req -sha256 -signkey server.key -extfile crt.cnf < server.csr > server.crt
openssl x509 -text -in server.crt -noout

PKCS #12 の作成

openssl pkcs12 -export -in server.crt -inkey server.key -out server.p12

nginx の設定（一部抜粋）

ssl_certificate /home/ubuntu/self_signed_cert/server.crt;
ssl_certificate_key /home/ubuntu/self_signed_cert/server.key;

server_name hogehoge.com;

Windows での作業

hostsの設定

• IPはAWSのグローバルIPを設定

100.100.100.100 hogehoge.com

Windowsに証明書をインポート

• 先ほど作成した PKCS #12 server.p12 を用意
• Chromeから [プライバシーとセキュリティー] - [セキュリティ] - [証明書の管理] を選択
• [信頼されたルート証明機関] - [インポート]
• server.p12 を選択してインポート

ブラウザで確認

• 念のためブラウザを再起動
• https://hogehoge.com/
• にアクセスして鍵のマークになることを確認

参考にしたサイト