X

建立本地端的 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: 對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
Related Post