XAMPP設定Https開發環境,一鍵openssl自簽SSL憑證,配置 Apache Localhost

開發者通常都會在本地端電腦建立一個 localhost 的伺服器來模擬遠端生產環境或測試環境的狀態,進行相關程式碼的開發、測試,而 https 安全網站目前成為主流,為盡可能接近遠端伺服器,勢必本地端伺服器也需要安裝SSL憑證,筆者本地開發環境使用的是 XAMPP,所以本文主要是議介紹 XAMPP 的 https 配置,本文主要是「方便」開發為目地,而非「安全」為目地,介紹如何開發環境中設定SSL憑證,這僅適用於開發環境,切記 ! 不適用於正式生產環境。

本文 XAMPP版本為:XAMPP 7.4.8 ( Windows 64bit )

openssl 自簽憑證

本文使用的 XAMPP 版本已自帶 openssl 所以無需再另外安裝 openssl

準備工作

在 XAMPP 中的 Apache 根目錄中建立一個名為 ssl 子目錄,這目錄用來存放之後產生出來的證書檔案,目錄絕對路徑可能長得像下方這樣

C:\xampp\apache\ssl

複製 openssl 配置檔範例

openssl 自簽憑證需要一個配置檔,熱心網友 Adrian Suter 在 Github 上已經寫好配置檔範本,我們在剛建立的 ssl目錄中,建立一個名為 cert-template.conf 的檔案,並貼上下方範本網址中的代碼

檔案位置:C:\xampp\apache\ssl\cert-template.conf

複製 make-cert.bat 範例

熱心網友 Adrian Suter 在 Github 把 openssl 簽發憑證的流程寫成 Windows bat 檔案,簡化操作流程,克服指令障礙,非常佛心,如果配置檔配置正確,Enter,Enter,Enter一鍵就可以完成指定域的SSL憑證簽發,非常方便,開啟下方連結,並於上述的 ssl 目錄中建立一個名為 make-cert.bat 的檔案,並貼上下方網址中的代碼

檔案位置:C:\xampp\apache\ssl\make-cert.bat

執行make-cert.bat

執行 make-cert.bat 前,請確保 cert-template.conf 已同一目錄

執行 make-cert.bat 前,請確保 cert-template.conf 已同一目錄

執行 make-cert.bat,要求輸入要簽發的網域( 以 example.com 為例 )
輸入 example.com 按 Enter

XAMPP設定Https開發環境,一鍵openssl自簽SSL憑證,配置 Apache Localhost

再來會要求填入一些相關資料,不理它直接Enter、Enter、Enter下去就好,沒有輸入會帶預設值,因為本文介紹只是方便開發用的,不是正式環境使用,所以這些資訊並不必是真實的

XAMPP設定Https開發環境,一鍵openssl自簽SSL憑證,配置 Apache Localhost

當看到請按任意鍵繼續的文字,代表已經完成,下圖就是完成的截圖

XAMPP設定Https開發環境,一鍵openssl自簽SSL憑證,配置 Apache Localhost

此時 ssl 目錄就會多一個 example.com 的子目錄

XAMPP設定Https開發環境,一鍵openssl自簽SSL憑證,配置 Apache Localhost

開啟 example.com 目錄,裡面應該會有 server.crt 及 server.key 這兩個檔案,這就是憑證檔案,如果看到這兩個檔案,恭喜~憑證簽發完成! 這做法非常簡單

XAMPP設定Https開發環境,一鍵openssl自簽SSL憑證,配置 Apache Localhost

Windows 安裝憑證

openssl 自簽憑證沒有信任組織背書,仍會被瀏覽器標示為不安全,需要在 Windows 手動安裝信任此憑證,打開 server.crt 如下圖,按下「安裝憑證」按鈕

XAMPP設定Https開發環境,一鍵openssl自簽SSL憑證,配置 Apache Localhost

會跳出憑證匯入精靈,存放位置選「本機電腦」,下一步

XAMPP設定Https開發環境,一鍵openssl自簽SSL憑證,配置 Apache Localhost

選擇「將所有憑證放入以下存放區」,按憑證存放區的「瀏覽」按鈕

XAMPP設定Https開發環境,一鍵openssl自簽SSL憑證,配置 Apache Localhost

選擇「受信任的根憑證授權單位」,確定

XAMPP設定Https開發環境,一鍵openssl自簽SSL憑證,配置 Apache Localhost

下一步

XAMPP設定Https開發環境,一鍵openssl自簽SSL憑證,配置 Apache Localhost

按「完成」按鈕以完成憑證匯入

XAMPP設定Https開發環境,一鍵openssl自簽SSL憑證,配置 Apache Localhost

看到此彈跳視窗即匯入完成

XAMPP設定Https開發環境,一鍵openssl自簽SSL憑證,配置 Apache Localhost

設定 httpd-vhosts.conf

檔案位置:C:\xampp\apache\conf\extra\httpd-vhosts.conf
設定 XAMPP 的虛擬主機設定

<VirtualHost example.com:443 >
   DocumentRoot "D:/xampp/htdocs/example.com"
   ServerName eloe.pokerba.com
   SSLEngine on
   SSLCertificateFile "ssl/example.com/server.crt"
   SSLCertificateKeyFile "ssl/example.com/server.key"
</VirtualHost>

設定 Hosts

檔案位置:C:\Windows\System32\drivers\etc
在檔案最下方加入下方這一行,將網域指向本機,流量就不出站了

127.0.0.1 example.com

完成設定

完成上述動作,再來就是要測試是否可以正常運行,在這之前先完成幾個步驟

  1. Ping 網域是否正確指向 127.0.0.1
  2. 重新啟動 XAMPP
  3. 暫時關閉防毒軟體及防火牆
  4. 清除 Windows DNS快取
  5. 清除瀏覽器 DNS 快取
  6. 瀏覽器關閉後重新開啟

最後打開瀏覽器,開啟所設定的網域,正常網址前方應該是不會出現「不安全」字樣,應該會出現鎖頭圖標,點擊網址前方鎖頭圖標,會顯示「已建立安全連線」的小視窗,如果有看到代表已經設定成功囉

如果沒看到也可以再嘗試一下多清除幾次瀏覽器的快取,或關閉瀏覽器再開啟,我發現瀏覽器這部分似乎有快取,有時設定成功卻仍顯示不安全,所以可以特別去注意這部分,若還是不行就重新操作一遍,或瀏覽文章下方參考連結參考原文

檢視或刪除已信任憑證

當我們完成階段性任務,不需要再使用開發環境某一個域的憑證時,可以參考下面這篇來刪除憑證

Windows 刪除已信任的https憑證、管理憑證

Windows 刪除已信任的https憑證、管理憑證
Windows 刪除已信任的https憑證、管理憑證

參考資料

https://shellcreeper.com/how-to-create-valid-ssl-in-localhost-for-xampp/
https://a091234765.pixnet.net/blog/post/403840004
https://gist.github.com/turtlepod/3b8d8d0eef29de019951aa9d9dcba546#file-cert-conf
https://www.cnblogs.com/kidsitcn/p/10561979.html
https://odan.github.io/2017/10/29/installing-an-ssl-certificate-under-apache-xampp.html

如果文章對您很有幫助
請我喝杯咖啡吧

Bitcoin 比特幣錢包:

18fCwNnEJ7UfMNS3GcUczPNa72NMsWcvaU



ann71727

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

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