WordPress

WordPress 教學 (I) – 啟用 Cloudflare SSL 無痛轉換 https

瀏覽次數: 1,144

　本文特別感謝架站大神 @龔慕賢 啟發與指導！

什麼是 SSL？

SSL (Secure Sockets Layer)，安全資料傳輸層。
簡單來說，如果網站有申請 SSL 憑證，使用者連線到網站伺服器時：
1. 會傳送要求建立安全連線的訊息
2. 經過加密比對後，網站伺服器會回傳數位憑證和金鑰，並以非對稱加密方式認證雙方的身份
3. 認證成功後，在連線關閉以前，所有資料都會在加密的狀態下傳輸。

那 SSL 和 HTTPS 的關係是？

  1. http 開頭的網址，資料以「明碼」傳輸，也就是壞人很容易竊取我們在網站上所傳輸的資料！
  2. https 開頭的網址，則透過「申請SSL憑證」，讓網站所有資料都經過加密才進行傳輸，提高對我們網站用戶的保護！
    所以如果你的網站會需要使用者傳輸重要個資、甚至是金流付款，建議務必改成 https，以防資料外洩、信用卡盜刷等負面消息影響網站名譽！

為什麼建議要把網站做 SSL 憑證加密？

網站做 SSL 憑證加密，也就是讓你的網站從 http 轉換到 https。
是 http 或 https，對網站的影響有兩種面向：

  1. 用戶體驗
    • 影響用戶信任感：Google 在 2016 年後，針對 http 網站，會在網址列前方標示「不安全」，並在跳轉時進入警示頁面，寫著『你與這個網站的連線不安全，請勿在這個網站上輸入任何機密資訊 (例如密碼或信用卡號碼)，以免遭到攻擊者竊取』。
      如果網站沒有轉換成 https，你的用戶便會時常接收到警示訊息、對網站的信任也會降低。
  2. SEO 表現
    • Google 在 2014 年宣布將「網站是否採用 SSL 憑證」納入 SEO 排名優化的要素之一，也因此 HTTPS 網站的搜尋排名，通常都比 HTTP 網站的排名來得高。
      • SSL 憑證的保密等級目前還不會對 SEO 排名造成影響；但部分發行商有被 Google Chrome 列為無效憑證，在申請時要注意囉 (Thawte, VeriSign, Equifax, GeoTrust, RapidSSL, Symantec)

[重點] 如何為網站使用 SSL 憑證加密？

本篇教學示範的 SSL 憑證採用：Cloudflare 免費 SSL/TLS
本站規格為：AWS LightSail 簡單虛擬私有伺服器、GoDaddy 網域管理員架設的 WordPress。Cloudflare 基本上各家伺服器都能用，只要確保你能夠正確的修改 NameServer 及 wp-config.php，離成功轉換 https 就不遠了！

跟著以下步驟開始GO！

(1) 申請 Cloudflare 免費 SSL/TLS 憑證

  1. 至 Cloudflare 註冊帳號之後，可以進入自己的 dashboard
    （由於我已經完成 jiunyiyang.me 的申請，你會看到他的狀態顯示為 Active）
  2. 點擊「+ Add a Site」、輸入你想要獲取憑證的網域
  3. 選取「免費方案」、點擊「繼續」（先不用更動 DNS 資訊）
  4. 複製網頁上 Cloudflare 的名稱伺服器 (NameServer) 資訊，修改到自己網域廠商原有的 NameServer。（以本站為例，就是到 Godaddy DNS 管理頁面修改）
  5. 以上步驟完成後，官方說明最慢等1天能成功為網站申請到 SSL 憑證；站長自己測試，大概5-10分鐘網站就能顯示 Active 了
Account dashboard (Cloudflare)
Enter your website domain (Cloudflare)
Choose the free plan (Cloudflare)
Copy the new NameServer (Cloudflare)
修改網域廠商的 DNS – NameServer 設定 (GoDaddy)

(2) 修改 wp-config.php

完成 SSL 憑證申請後，迎來最後一哩路：修改 WordPress 配置，讓網站配合到 DNS 的 SSL 終止代理 (SSL Termination Proxy)。它的目的是：將加密處理 off load 到另一台機器，來減輕主服務器上的負擔。
以下選譯自 AWS 官方文件 《Configure your WordPress instance to work with your distribution using SSL/TLS termination》：

1. 打開 web-based SSH(secure shell) Client

2. [！重要！] 先對 wp-config.php 原檔進行備份

sudo cp /opt/bitnami/apps/wordpress/htdocs/wp-config.php /opt/bitnami/apps/wordpress/htdocs/wp-config.php.backup

3. 使用 Vim editor 編輯 wp-config.php 

sudo vim /opt/bitnami/apps/wordpress/htdocs/wp-config.php

4. 將下面這段

define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST'] . '/');
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST'] . '/');

改為：

define('WP_SITEURL', 'https://' . $_SERVER['HTTP_HOST'] . '/');
define('WP_HOME', 'https://' . $_SERVER['HTTP_HOST'] . '/');
if (isset($_SERVER['HTTP_CLOUDFRONT_FORWARDED_PROTO'])
&& $_SERVER['HTTP_CLOUDFRONT_FORWARDED_PROTO'] === 'https') {
$_SERVER['HTTPS'] = 'on';
}

5. 從 Vim editor 儲存並退出
先按 Esc 、接著輸入 :wq!、鍵入 Enter

6. 重啟 Apache Service，等幾分鐘後重整網站，應該就能看到 https 生效囉！

sudo /opt/bitnami/ctlscript.sh restart Apache

6. [！注意！] 如果有任何錯誤產生（可能不小心改錯地方或動到什麼），記得可以先將我們第二步備份起來的 wp-config.php 復原回來

sudo cp /opt/bitnami/apps/wordpress/htdocs/wp-config.php.backup /opt/bitnami/apps/wordpress/htdocs/wp-config.php

以上完成後，可以到 SSL Server Test 這個網站測試你的憑證等級
希望你也能順利將 https 安全連線成功換上啦！

本篇文章到這邊告一段落，有任何相關問題歡迎下方留言提問！
要是你喜歡這篇的內容，也別藏私，記得分享到社群給更多朋友哦！

%d 位部落客按了讚：