panos sakalakis j9EtVGr0piI unsplash

安裝了 SSL 憑證卻還顯示不安全?3 個解決 WordPress 網站 https 失效的方法

最後更新時間:2020 年 9 月 23 日

你與這個網站的連線可能有安全漏洞,攻擊者可能會看到你正在這個網站上瀏覽的圖片,並以修改圖片內容的方式讓你受騙。瞭解詳情

SSL 失效

你是不是也曾遇過、或正在遭遇這種情況呢?明明就有正確的安裝 SSL 憑證,但是卻不知道為什麼,有一天你的 WordPress 網址就突然顯示 https:// 不安全。

雖然網站顯示不安全,並不會馬上影響到你網站的功能;但是它卻有可能影響觀看者的閱讀體驗,以及降低你的 SEO 排名,因此建議的作法,還是不能放任它繼續顯示不安全,要想辦法解決。

接下來這篇文章,將會傳授給你 3 個解決連線不安全的方法,如果想知道怎麼解決這個問題的話,記得要看到文章的最後面唷!

在進入正題之前,你得先知道這個問題的名稱,它其實有一個專業的學名,叫做:混合內容 ( Mixed Content Error )

什麼是混合內容?

混合內容顧名思義,就是你網站啟用了 SSL ( https:// ),但是卻有一些內容的連結沒有使用 https:// 作為開頭,這種網站同時存在部分加密、部分沒有加密的內容,容易遭到資料攔截或是攻擊,因此會被瀏覽器判定為不安全。

通常發生在 WordPress 網站上,主要的原因都是因為部分上傳的圖片,使用了 http:// 而非使用 https://

你可能很會好奇,為什麼你之前上傳其它張圖片都沒事,都是顯示 https://,而就是這次上傳某幾張圖片就變成 http://

但我必須誠實地告訴你,詳細的發生原因我目前也不知道,猜想可能跟 WordPress 處理上傳照片的程式碼或外掛有關,這部分留待更專業的 WordPress 專家解答。

自己碰上這個問題只有兩次,一次是因為懶得壓縮,所以直接上傳過大的圖片 ( 大概 6MB ) 所導致;另外一次就是這次,直接匯入佈景主題主題提供 Demo,可能因為 Demo 圖片太舊而導致。

該如何解決?

瞭解了是什麼造成瀏覽器顯示不安全的原因,接下來我們就知道該如何對症下藥了,而在這邊 Weblai 整理了 3 種方法幫助你解決:

  1. 用開發人員工具檢查 ( 推薦 )
  2. 用外掛 ( 最簡單 )
  3. 去資料庫下 SQL 指令

方法一:開發人員工具 ( 推薦 )

這是我最推薦你的解決方法,利用瀏覽器內建的開發人員工具直接找出問題圖片的所在,並且將其移除,簡單又有效,而且零副作用。

接下來我會以 Chrome 瀏覽器為教學,Safari、Firefox的話作法也差不多,不過如果可以的話,建議你還是用 Chrome 跟著我做一遍比較保險。

2020 05 19 02 03 15

來到出問題的網站,點選滑鼠右鍵,並且選擇檢查

2020 05 19 02 07 15

這時候你的畫面就會跳出一些你可能沒看過密密麻麻的東西,而這就是我們工程師在看開發人員工具,接著點選上方的 console

2020 05 19 02 08 30

點選console後,找到有寫 Mixed Content 開頭的字樣,基本上裡面會有一個http://開頭的連結,找到之後就反白並複製。

如果沒有東西就按一下 f5 重新整理頁面,它就會出來了。

2020 05 19 02 24 33

複製之後,依序進行以下 3 個步驟:

  1. 回到左邊的 Element
  2. 按下 ctrl + f ( Mac 是cmd + f ),開發人員工具的下方會出現一個搜尋框,按下 Enter 進行搜尋
  3. 這個就是你出問題的圖片的所在位置

找到問題圖片的位置之後,比較簡單的作法是再開一個新視窗 ( ctrl + N ),並將連結複製貼上,看看是哪張圖片,接著再去把它移除掉。

2020 05 19 02 20 59

以我的為例,它連到的是佈景主題商的 Demo 網站的一張沙發照,而那個 Demo 網站並沒有啟用https://,因此導致了這次問題的發生。

2020 05 19 01 04 03 1

將圖片移除後,https:// 的鎖頭就回來了,順利解決。

開發人員工具這招其實蠻實用的,除了用在解決這個 SSL 之外,也能應用在其它很多問題上,這部分就留給你自己嘗試了。

方法二:啟用 SSL Insecure Content Fixer 外掛

如果你覺得用開發人員太複雜的話,我這邊還有一個更簡單的懶人作法,那就是所有 WordPress 站長都會的一千零一招:用外掛。

我們會啟用一個叫 SSL Insecure Content Fixer 的外掛,啟用之後就解決了,沒錯,用外掛就是這麼簡單暴力,台北暴徒就是這麼暴。

但是這個外掛可能會跟你的一些 SSL 外掛衝突,例如 Siteground 的SG Optimizer,因此要特別注意。

但是我要先聲明,這個作法「可能」會有副作用,只是我目前使用下來並沒有傳出災情,因此如果你使用了後網站出現問題,歡迎你在下方留言告訴我。

2020 05 19 00 45 47

前往 WordPress 後台中的外掛專區,搜尋 SSL Insecure Content Fixer 並啟用。

2020 05 19 00 46 46

接著在左邊工具列的設定中找到 SSL Insecure Content Fixer

2020 05 19 00 48 05

這外掛非常容易使用,它總共給你 5 種程度的修復方案,依照情節來幫你將 http:// 改換成 https://

  1. Simple – 改一些小東西,主要是載入 CSS/JS 的部分
  2. Content – 上面有的,加上 WordPress 文章、頁面的內容、文字類型的小工具
  3. Widgets – 上面有的,加上包含所有小工具
  4. Capture – 上面有的,加上整個頁面的所有東西,除了 Ajax 的函式,通常選到這邊就會修好了
  5. Capture All – 網站上的所有東西,基本上選了就修好了,但出問題的可能性也高。

簡單來說,解決方案的程度越高,修好的可能性也就越高,但也代表網站受到影響的可能性也就越大。

因此建議的做法是先從 Simple 開始測試,如果解決不了,再一步一步往下調整,通常選到 Capture 時都能順利解決。

當然,如果解決不了,就只能往下選到 Capture All 了,基本上 99% 會修好。

2020 05 19 01 04 03

我這個網站最後是選擇Capture才解決,經過測試之後其實也沒什麼大礙,所以也相當歡迎你用這個作法。

方法三:去資料庫下 SQL 指令

如果你今天遇到大量的圖片有這個問題,但是用方法二卻又解決不了時,那就可以用這最後一招,透過修改資料庫的方式來達成。

這招算是比較專業、進階的方法了,我假定要使用這招的人都是對程式有一定瞭解的人,為了避免新手嘗試出問題,因此我不會做詳細教學。

先去備份網站,因為任何要直接修改資料庫的動作都是不可逆的。

前往後台資料庫

  • 一般 cPanel 就去 phpMyAdmin
  • Cloudways 主機的去 Database Manager
  1. 輸入以下 SQL 指令:
UPDATE wp_posts 
SET post_content = ( Replace (post_content, 'src="http://', 'src="//') )
WHERE Instr(post_content, 'jpeg') > 0 
 OR Instr(post_content, 'jpg') > 0 
 OR Instr(post_content, 'gif') > 0 
 OR Instr(post_content, 'png') > 0
 OR Instr(post_content, 'svg') > 0;
  1. 再輸入以下 SQL 指令:
UPDATE wp_posts 
SET post_content = ( Replace (post_content, "src='http://", "src='//") )
WHERE Instr(post_content, 'jpeg') > 0 
 OR Instr(post_content, 'jpg') > 0 
 OR Instr(post_content, 'gif') > 0 
 OR Instr(post_content, 'png') > 0
 OR Instr(post_content, 'svg') > 0;

這串兩串指令會幫助你將從原本 src="http://xxx.jpg" 開頭的圖片,改成src="//xxx.jpg""的方式。

而如果前面沒有任何 http:的字樣,瀏覽器就會依照你網站目前的通訊協定進行傳輸,所以只要你有 SSL,那麼就會自動變成https://

這兩個指令看起來很像,差別只在於第一個是改變雙引號、第二個是改變單引號,如果聽不懂也沒有關係,反正照做就對了。

Elementor 專用方法

如果你是使用 Elementor 的話,Elementor 內建有一個功能可以直接解決這個問題,就不需要用到上面那幾種方法了。

2020 05 19 02 59 27

去 Elementor 後台 > 工具 > 替換網址。

2020 05 19 03 01 06

分別輸入 http://你的網域 以及 https://你的網域,再按下替換網址。

2020 05 19 01 04 03 2

接著就解決了,但是之後可能你還是會遇到這種情況,所以如果覺得每次都要替換網址很麻煩的話,就用方法二一勞永逸吧!

如果是後台顯示不安全呢?

如果是在你的 WordPress 後台 (https://你的網域/wp-admin) 發生不安全的情況,就是前往你的 WordPress 根目錄 ( 通常叫 public_html ) 中,找到一個叫做 wp-config.php 的檔案。

如果不知道怎麼找到 wp-config.php,可以參考 WordPress 網站掛掉了怎麼辦?利用內建的 debug 功能,找到讓網站掛掉的原因,裡面有講到怎麼編輯 wp-config.php

並在其中放入以下程式碼:

define('FORCE_SSL_ADMIN', true);
2020 05 19 15 15 39

這樣子就能強制迫使後台執行 https:// 了!但要注意的是,請務必在確認你有 SSL 的情況下才去做這件事情,否則可能會導致錯誤產生。

結語

這邊還有一個叫做 Why No Padlock 的網站,可以幫你檢測是哪一張圖片出了問題,但我個人覺得它不太可靠。

因為我這次遇到的不安全問題它就沒有把問題圖片找出來,反而是告訴我完全沒問題,但我還是放在這邊給你做個參考。

總之,遇到了這個問題,就採取這 3 種作法,基本上應該都能迎刃而解,如果解決不了也歡迎你在下方留言詢問我。

參考資料:
MDN 混合內容
How to Fix the Mixed Content Error in WordPress (Step by Step)

額外資訊

獲得更多 WordPress 最新資訊

我目前正在製作一部 WordPress 網站的線上課程,主要內容會是教你如何從完全不懂程式碼的新手,透過學習架設 WordPress 網站與 SEO,打造出一個在一年內能為你帶來 100 萬收入的個人網站。如果你有興趣的話,歡迎填寫下方的訂閱表單,我將會告訴你最新的開課資訊。

加入 FB 討論社團

另外,我最近 ( 2020/06/14 ) 開設了一個 Facebook 社團,叫做「WordPress 網站架設 | 網路賺錢 | 部落格經營 – WebLai 交流區」,社團中討論的主題主要會是關於 WordPress 網站架設部落格經營、以及網路賺錢

如果你也對這些內容有興趣的話,歡迎你點擊下方的連結進行加入,我將會在那邊發佈一些這些主題的相關議題與討論,當然,對於 WordPress 有問題的話也可以直接在裡面詢問我唷!

你可能會想看

網路賺錢
部落格經營
基礎教學
站長必學
網站行銷
疑難雜症
進階技巧
Elementor
Woocommerce
學習資源

留言回應

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

Scroll to Top