建立本地端的 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 通過的資訊囉~

相關網頁

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.

在〈建立本地端的 Wildcard SSL 給開發環境使用〉中有 1 則留言

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。