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

[WordPress] 使用SSL憑證加密網站-CloudFlare-AWS-Lightsail

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

什麼是 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 安全連線成功換上啦!


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

Leave a Reply