建立本地端的 Wildcard SSL 給開發環境使用

Google、Apple 都在推 HTTPS 的情況，在線上可以買憑證、或者用 Let's encrypt 來產生憑證，但是在「開發環境」裡面，想要有 SSL 的支援，就會有些麻煩。

• 註1：開發環境可以使用 http，線上在使用 https，不過現在網域通常切分開的情況，能夠有個本地端的憑證，還是比較方便。
• 註2：可以把線上的憑證存到本地端，但是這本身跟安全性違背，另外一個是，每2~3個月都要換憑證，還是蠻麻煩的。
• 註3：此憑證建立後，查看的單位名稱為：Internet Widgits Pty Ltd

建立本地端的 Wildcard SSL 給開發環境的瀏覽器使用

現在想要做的憑證有下面幾個：

• example.com
• test.example.com # .example.com
• abc.com # 以下都是本身 + wildcard
• def.com

憑證期限、名稱：

• 將上述憑證做一張 10年的來用
• 因為有多個 Domain，所以建議直接用公司名字，或者 dev 來當 key 的名字，下述就用 dev-company-name 當名字
• 先將此憑證放在 /etc/apache2/ssl.local 或 /etc/nginx/ssl.local

想要將上述憑證全部做成同一張，可以依照此篇的做法來達成。

• 註1：為何不全部直接 * 的憑證都做起來？
  • 因為這樣子會讓機器連所有網站的 HTTPS 都開通，連其它網站怕會有意外或者詐騙等行為的發生
• 註2：製作憑證需要 openssl 等環境，下述於 Debian、Ubuntu Linux 完成

製作開發機憑證

1. ssh dev.machine # ssh 到開發機
2. cp /etc/ssl/openssl.cnf /tmp/openssl.cnf
3. 對 /tmp/openss.cnf 做下述修改，修改範例、位置如下面步驟
   • 增加 x509extensions = v3ca ([v3_req] 區塊最後面)
   • 增加 subjectAltName = @altnames ([v3ca] 區塊最後面)
   • [altnames] 下面的就是要加入憑證的 Domain ([v3ca] 區塊後面，直接連著加)
4. vim /tmp/openssl.cnf # 對此檔案做下述修改

   [v3_req]
   ...
   x509_extensions = v3_ca
   
   [v3_ca]
   ...
   subjectAltName = @alt_names
   [alt_names]
   DNS.1 = *.example.com
   DNS.2 = example.com
   DNS.3 = *.abc.com
   DNS.4 = abc.com
   DNS.5 = *.def.com
   DNS.6 = def.com
   

5. openssl req -x509 -nodes -days 3650 -newkey rsa:2048 -keyout dev-company-name.key -out dev-company-name.crt -config /tmp/openssl.cnf
   • 產生出 dev-company-name.key 和 dev-company-name.crt
6. scp dev-company-name.key dev-company-name.crt /etc/apache2/ssl.local/
7. vim /etc/apache2/site-enabled/example.com-ssl.conf # 假設 SSL 設定檔案為這個 (其它 Domain 設定檔也都得加上，SSL 區塊其它設定請參考其它文件)

   SSLEngine on
   SSLCertificateFile /etc/apache2/ssl.local/dev-company-name.crt
   SSLCertificateKeyFile /etc/apache2/ssl.local/dev-company-name.key

8. sudo systemctl reload apache2.service
9. 到此開發機的憑證設定完成
10. nginx 設定如下：

    ssl on;
    ssl_certificate /etc/nginx/ssl.local/dev-company-name.crt;
    ssl_certificate_key /etc/nginx/ssl.local/dev-company-name.key;

開發憑證載入 瀏覽器設定(Chrome、Firefox)

再來要讓開發機的憑證被自己的瀏覽器接受，要做下述步驟：

1. 將開發機的憑證存下來 (下述步驟只要做一次，對所有上述已經建立好的 憑證 Domain 都通用，下述以 example.com 為例)
2. openssl s_client -connect example.com:443 -showcerts </dev/null 2>/dev/null | openssl x509 -text | sed -ne '/-BEGIN CERTIFICATE-/,/-END CERTIFICATE-/p' > dev-company-name.pem
   • 產生檔案：dev-company-name.pem
3. 將 dev-company-name.pem 匯入瀏覽器，下述分 Firefox 與 Chrome
   • Firefox：只要再不信任的網域，按進階，取得憑證，永久信任此憑證即可
   • Chrome
     • 設定 -> 進階 -> 管理憑證 -> 授權單位 -> 匯入 (.pem) (Internet Widgits Pty Ltd)
       • 信任設定
       • 勾選：信任這個用於識別網站的憑證
       • 再確定即可
     • 若要使用 CLI 工具直接載入
       1. sudo apt install libnss3-tools
       2. certutil -d sql:$HOME/.pki/nssdb -A -t "P,," -n dev-company-name.pem -i dev-company-name.pem
       3. certutil -d sql:$HOME/.pki/nssdb -L # 可查看
       4. certutil -D -d sql:$HOME/.pki/nssdb -n -.dev-company-name # 移除
       5. certutil -D -d sql:$HOME/.pki/nssdb -n dev-company-name.pem # 移除 nick 為 dev-company-name.pem 的
       6. certutil -d sql:$HOME/.pki/nssdb -L # 檢查

再來只要將網址 DNS / IP 設定好，瀏覽器就可以看到 HTTPS 通過的資訊囉~

相關網頁

• Add Self-Signed SSL To Google Chrome on Ubuntu 16.04
• OpenSSL SAN 證書
• 使用openssl為ssl證書增加"使用者備用名稱（DNS）"
• How to get HTTPS working on your local development environment in 5 minutes
• Certificates for localhost - 製作 localhost 憑證
• GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names you'd like.