安裝了 SSL 憑證卻還顯示不安全

最後更新時間:2020 年 12 月 8 日

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

SSL 失效

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

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

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

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

1. 什麼是混合內容?

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

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

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

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

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

2. 該如何解決?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.3 方法三:去資料庫下 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://

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

3. Elementor 專用方法

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

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

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

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

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

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

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

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

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

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

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

define('FORCE_SSL_ADMIN', true);
安裝了 SSL 憑證卻還顯示不安全?3 個解決 WordPress 網站 https 失效的方法 | 16

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

5. 結語

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

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

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