讓 Windows 環境的 localhost 啟用 HTTPS 連線

相信很多 Web 開發人員在 local 的開發環境用的設定跟產品一樣是 HTTPS
不過畢竟 production 用的 TLS  certificate 不是簽給 localhost 用的
所以若沒調整則在瀏覽器會看到 Your connection is not private 的訊息
Chrome 的網址列也會顯示連線不安全
這個當然不是什麼問題，點個忽略警告大家還是可以照常開發

不過開發人員也可以選擇在 local 產生一張簽給 localhost 的 self-signed certificate
調整過後可以從此不需要再去點忽視警告
然後開發時看到的瀏覽器網址列的提示也會是安全連線，視覺爽度加分
這篇說明怎麼在 Windows 環境生效，以下開始步驟

首先在 Linux 產生 certificate

#產生私鑰
openssl genrsa -out rootCA.key 4096

#產生證書(有效日期可以自行調整 days參數)
openssl req -x509 -new -nodes -key rootCA.key -newkey rsa:4096 -sha256 -days 2048 -out rootCA.pem

#產生CSR(Certificate Signing Request)
openssl req -new -newkey rsa:4096 -sha256 -nodes -keyout localhost.key -out localhost.csr

#製作等等會用到的設定檔
vi localhost.ext

#填入以下內容

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost
IP.1 = 127.0.0.1


#產 CRT 格式證書(有效日期可以自行調整 days參數)
openssl x509 -req -in localhost.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out localhost.crt -days 2048 -sha256 -extfile localhost.ext

#轉換成我的環境需要的帶有私鑰的 PKCS12 certificate，不需要的不用執行這一步
openssl pkcs12 -export -in localhost.crt -inkey localhost.key -out keystore

生成完畢後讓我們要用的 web container  套用這張簽給 localhost 的 certificate
第二步驟則是要讓 browser 能持續性的允許認證
畢竟我們自己簽的證書並沒有國際性的憑證機構背書，得在瀏覽器設定

Firefox

選項 -> 隱私權與安全性(或是可以用網址about:preferences#privacy) -> 憑證 -> 檢視憑證 -> 憑證機構 -> 匯入 -> rootCA.pem

Chrome

Setting -> Manage certificates
                 Manage HTTPS/SSL certificates and settings

Tab/Trusted Root Certification Authorities -> Import -> rootCA.pem


Chrome 的策略其實是去認 windows 的憑證區
也許會有一些文章提到執行 Windows 的 MMC.exe 匯入到 Trusted Root Certification Authorities
實際狀況跟 Chrome 的這步驟是一樣的
也因此透過 Chrome 匯入後，是能夠讓 Edge 也一併生效 (Edge當然認 windows 的憑證區)

如此大功告成

參考內容： getting-chrome-to-accept-self-signed-localhost-certificate