作者: Ken
XAMPP 是跨平台的架站工具，可以協助使用者輕鬆的用 PHP（Apache）和 MySQL 建立一個網站，而使用這兩種技術的內容管理系統（CMS）也相當眾多，如：Joomla! 和 WordPress 等等，因此我們可以知道 XAMPP 的功能強大，且應用範圍相當廣闊。
當你用 XAMPP 架好網站，並且可以透過其他電腦連線到網站後，你應該會考慮加強網站連線與使用者端的安全性。其中最常見的方式便是為網站加入 https 連線，來讓使用者和伺服器端的連線可以加密傳輸。
現今，網頁有加密連線似乎成為標準配備，沒有加密連線的網頁反而已是少數。各主流瀏覽器在使用者瀏覽沒有加密連線的網頁時，也會寫著「不安全」字樣，來告訴使用者不應在這個網頁留下任何敏感資訊。使用者看到「不安全」，也自然會有警戒的心態。為了要讓網頁永續經營，讓使用者安心上網，設定網站只能使用加密連線存取，是刻不容緩的任務。
很多人都知道加密連線。只要開頭為 https 的網頁，就是有採用加密連線的網頁。但 https 只是加密連線的其中一種應用，其實加密連線還可以用在很多傳輸協定，如取代了 Telnet 和 FTP 的 SSH（Secure SHell）也是加密連線的一種。
要讓網站採用 https 連線，絕對不是將原本的 http 網頁手動加上 s 就可以的。我們要為網站加入憑證，讓瀏覽器可以識別，才可以正確地使用加密連線瀏覽網頁。在加密連線裡，有一個詞很常見叫做 SSL，相信大家或多或少聽過，然而隨著 SSL 多年演進，已經有了更新的稱呼，稱作 TLS（Transport Layer Security，傳輸層安全性協定）。所以，我們要為網站加入 TLS 憑證，並且啟用加密連線。
以往要為網站加入 TLS 憑證必須砸大錢，向憑證發行公司取得憑證來啟用加密連線，然而自 Let’s Encrypt 和 CloudFlare 提供免費的 TLS 憑證後，所要花費的金錢成本也就大大降低了。CloudFlare 提供的 TLS 憑證需要使用 CloudFlare 的 CDN，Let’s Encrypt 則是單純的加密連線憑證服務，也有人製作出可以簡易引入 Let’s Encrypt 提供的 TLS 憑證，以下就來完整介紹如何使用 Let’s Encrypt 為網站加入加密連線。
申請 TLS 憑證
首先，我先假設你已經使用 XAMPP 建立好一個 WordPress 或 Joomla! 網站，且該網站可以使用 http 從任何有連線到網際網路的電腦連上你的網站。你也必須要有一個網域 (Domain)，子網域也可以，且這個網域已經透過 DNS 解析到你的主機空間，你也知道如何用 FileZilla 或遠端桌面（如：Teamviewer）存取你的伺服器檔案。如果以上步驟你有任何不懂的地方，請先 Google 如何用 XAMPP 架好一個網站。
驗證網站所有權
Step 1.
我們先連上 sslforfree.com，並把你的網站域名填到如下圖框格的左側，然後按下右側的「Create Free SSL Certificate」來驗證網站。
Step 2.
接著會來到如下畫面，這是要你確認這個網站域名真的是你所擁有。你可以讓網站透過 FTP 的登入資訊，自動驗證你的網站；你也可以手動在網站上傳一個檔案，來確保你對網站用有控制權限。這裡我選擇「Manual Vertification」，以手動驗證方式作為示範。
如果你的 FTP 有加密，或是你是透過 SSH 去存取 FTP 的功能，我建議你用手動驗證。
Step 3.
它還會跟你說要怎麼操作，我們就不用看了，直接按下「Manually Verify Domain」。
Step 4.
然後它會請你下載一個檔案，這就是要作為網站驗證用的檔案，我們就下載下來，無須對這個檔案進行任何修改。然後暫時離開這個視窗，打開 FileZilla，或是直接透過伺服器存取 XAMPP 的資料夾。
Step 5.
FileZilla 打開並連線後，確定你的資料夾是對應到 XAMPP 的 htdocs 資料夾內。因為我是把網站檔案直接放在 htdocs 資料夾之下，所以可以看到 WordPress 的所有檔案。如果你的 XAMPP 有架設多個網站，也就是有子網域的話，請你記得必須要切換到該網站檔案所在的資料夾喔。
Step 6.
在網站的根目錄下，先建立一個資料夾叫做「.well-known」，打開 .well-known 資料夾後，於其下再建立一個資料夾「acme-challenge」，如下圖所示。
於是你新建的資料夾結構應該會成為 /.well-known/acme-challenge。
Step 7.
把你剛剛從 sslforfree.com 所下載到的檔案放到這個資料夾底下。這個檔案其實是一個文字檔，裡面放著與檔名相同的文字內容。
那你知道為什麼需要這個檔案了嗎？
要授予一個網站 TLS 憑證，驗證網站擁有者是最好的方式。這個方式也就是要確認你是否有控制網站後端的能力，如果你可以上傳這個檔案，也就代表你對這個網站有控制權。
Step 8.
回到 sslforfree 網頁，點選 5. 下方的網址。如果打開之後可以發現一串與你下載的檔案名稱相同的英數字，就代表你上傳成功了。如果出現 Error 404 或無法打開網頁等訊息，就表示剛剛上傳沒有成功，請回到 Step 6. 重複做一次。
Step 9.
確定可以連線後，按下「Generate SSL Certificate」，網站會開始生成你的 SSL 憑證，請稍等候一下。
Step 10.
成功生成 TLS 憑證後，網頁會把憑證的內容顯示出來，這些內容很重要，請不要把他分享或外流給其他人。
為網站加入 TLS 憑證
Step 11.
我們不用複製那些內容，只需按下「Download All SSL Certificate Files」，把所有憑證檔案下載回來電腦。解壓縮後，可以發現下面三種檔案，分別是 ca_bundle.crt、cerificate.crt 和 private.key。
Step 12.
接著打開你的遠端桌面，或是你的伺服器。把憑證檔案放到伺服器上。
Step 13.
打開你的 XAMPP 根目錄（不是 htdocs！），並在其下方建立一個資料夾。名稱要什麼你可以自己決定（不要中文），為了方便我取名為「ssl」。在 ssl 資料夾內，把三個憑證檔案放入。
Step 14.
於是，三個檔案就都會在 ssl 的資料夾中了。為了待會設定方便，我把 certificate.crt 改名為 server.crt、private.key 改名為 server.key。這名稱你開心就好，你改成其他名字也沒關係，但不要使用中文。
修改 XAMPP 設定值
Step 15.
打開 XAMPP Control Panel，在 Apache 伺服器右側的 Config 按鈕，按下「Apache (httpd-ssl.conf)」來打開檔案編輯。
Step 16.
用 Ctrl+F 或記事本選單上的「尋找」功能來找到兩個設定值，分別是 SSLCertificateFile和SSLCertificateKeyFile。基本上這兩個會相鄰，所以你如果找到一個，就會找到另一個。
你會發現每一行的左邊都有一個「#」作為註解，為了要讓某些特定行成為 XAMPP 可以讀取的參數，我們必須要把要用的那行的 # 字樣刪除，並對應到我們剛剛放 SSL 檔案的路徑。
為各位複習一下，我們剛剛在 XAMPP 的根目錄下建立了一個資料夾，叫做「ssl」，在我範例中的這台伺服器內，這個資料夾的路徑是：
C:\xampp\ssl。裡面存放著三個檔案：server.crt、server.key、ca_bundle.crt。
接著，我們必須要將這兩個參數分別指向 server.crt 和 server.key，以便 XAMPP 可以發現我們的憑證，讓網站可以套用加密連線。其中，SSLCertificateFile參數要對應到 server.crt 檔案、SSLCertificateKeyFile要對應到 server.key 檔案。只要在參數名稱的後方加入檔案的路徑（並加上頭尾雙引號）就可以完成對應，如下示範：
SSLCertificateFile "C:\xampp\ssl\server.crt"
SSLCertificateKeyFile "C:\xampp\ssl\server.key"
注意以上兩行的開頭都沒有 # 符號！你會發現每一個參數，還會有兩個一模一樣、已經註解過的參數設定值，請將它維持原樣。如果它們沒有 # 符號，也請在該行開頭為它們加上。
修改好之後，把 httpd-ssl.conf 儲存並關閉。
Step 17.
同樣，我們再次打開 Apache 的 Config 選單，但這次我們選擇「Apache (httpd.conf)」，準備打開它進行編輯。
Step 18.
拉到 httpd.conf 的最下方（你也可以再次使用搜尋功能），你會發現有一個<VirtualHost *:443>的區塊，這便是採用 https 時，所使用設定值。
同樣的，你會發現有兩個參數叫做SSLCertificateFile和 SSLCertificateKeyFile。因為這兩個參數和我們剛剛在 httpd-ssl.conf 裡看到的參數相同，所以我們就直接填入剛剛分別填入的設定值（路徑）。
此外，如果你發現ServerName這個參數後方的設定值不是你的網站網址，你也可以順道修改一下；如果你發現SSLEngine後是off，也請把它改成on。
填完後同樣儲存這個檔案，然後關閉它。
重新開啟 XAMPP 並檢視結果
Step 19.
為了正確套用加密連線，Apache 必須重新啟動一次才行。所以我們按下 Apache 旁的 Stop 鈕。待其完全停止，出現「Start」後，按下 Start 便可重新啟動。
請注意這樣的操作（將 Apache 關閉再開啟）會造成網站運作停擺一段時間，如果你的網站正在進行重要的工作，請不要立刻做這個動作。等到網站閒置時再操作是較明智的選擇。
Step 20.
這時你可以輸入你的網站網址來確認是否已經有加密連線。有的話，恭喜你已經完成為網站加入加密連線的任務！
可能有些人會發現：還是顯示不安全的連線啊！哪有加密連線？
那是因為瀏覽器預設幫你採用 http 連線，因為你的網站還沒設定強制使用 https 連線，所以自然會先連到沒有加密的連線，就會顯示不安全囉。
這時候你可以試著將網址的http改成https，應該就會發現網站的加密連線成功啟用囉！看到綠色字樣和鎖頭是不是成就感很高呢？
強制讓網站使用加密連線 (WordPress)
在前面的 Step 20. 中，我們發現網站現在還不會強制套用 https 連線。如果沒有強制套用的話，加密連線就沒有意義了。所以我們必須要讓使用者連上網站時，就強制使用 https 連線。
我們可以使用 .htaccess 或 HTTP 301 來達成強制轉址。不過這些方式都是輸入一些程式碼，如果你是使用 WordPress 或是 Joomla!，我們可以使用軟體裡既有的功能來達成強制轉址。
以下示範 WordPress 如何達成強制轉成 https 連線。
請你打開「設定」的「一般」選項，你會發現有兩個選項，WordPress 位址 (網址) 、網站網址 (網址)。
請把這兩者的http改成https，其他的部分不需要更動，即可完成強制自動轉址。
現在你再測試看看，輸入 http 的連線，看看是否會強制轉成 https。如果還是不會強制使用 https，可以再使用 .htaccess 手動加入代碼的方式來輔助。你可以 Google 找一下教學。
Joomla! 的修改方式是雷同的。
定期更新 TLS 憑證 (Renew)
使用 Let’s Encrypt 的加密憑證有一個比較大的問題，那就是它每三個月就要更新一次憑證。如下面這張圖：
這憑證的到期日是 GMT+8 的 2020/2/27 20:32，也就是超過這個時間後，這個憑證會變成無效（過期），但根據我的經驗，通常到期時間過了之後，瀏覽器不會立刻告訴使用者該憑證無效，只會在網址列上顯示不安全。
如果這時候網站管理員繼續不理會憑證過期的問題，不久後你就會發現這樣的畫面：
以嚴重性來說，這比沒有加密連線還要嚴重。你的網站訪客將會因為看到這個畫面而離開網站，只有少數人知道、會按下進階內的繼續瀏覽，使用者對你網站的信任度也會降低。
試想一下，一個人跟你說他很安全，不會傷害你，但他沒辦法證明自己的身分，也沒辦法證明他如何能說他很安全。你是否會質疑這個人？甚至覺得這個人是危險的？
憑證過期的道理與這類似。過了一段時間（三個月）後，你如何跟使用者證明你還用有這個網站的控制權限？而不是轉手或被盜用？因此三個月後，你必須重新驗證，以確保你對網站仍有控制權。
幸運的是，驗證方式非常簡單。只要重做 Step 1～Step 13，把 XAMPP 資料夾內的 ssl 檔案換成新的、下載下來的憑證檔案，並重新啟動 Apache 伺服器，就能完成憑證的更新，憑證又會展延 3 個月。
因為先前已經讓 XAMPP 對應到憑證的存放位置，所以我們不需要打開 httpd-ssl.conf 和 httpd.conf 修改。但要注意的是新的憑證檔案一樣要改為 server.crt 和 server.key，才會正確的對應。
是否可以自動展延？(Auto-Renew)
目前還沒有人做出可以自動展延的方案，所以每三個月你就必須要重更新憑證一次。然而，sslforfree.com 提供了相當貼心的服務，只要你在該網站上註冊帳戶，他會記住你曾經申請過網站的憑證。憑證要過期的前一星期、一天前、當天，他會用電子郵件提醒你的網站該更新憑證了。
網站的右上角有一個「Certificates」，按下去即可確認你申請過的網站列表，申請和逾期時間。你可以選擇 Renew 來更新憑證，或是 Delete 來立刻讓憑證失效。
相比於使用 CloudFlare CDN 提供的 SSL 服務，這樣操作是稍嫌麻煩的地方。三個月聽起來很快吧，但其實也沒有很快，就當作一個例行公事，照顧好你的網站吧！
(本文原刊於作者的 Medium，網址為https://medium.com/@45EMC521/xampp-使用-lets-encrypt-ssl-開啟加密連線-完整教學-c05b5f97195a，感謝作者授權本站轉載)
ManHungTech 
發表迴響