Chrome DevTools 檢查SSL沒有通過瀏覽器HTTP驗證的原因

網站掛上SSL後,為什麼網址列沒有亮綠燈?那是因為網站沒有通過SSL的安全性檢查,造成網址列的https不亮綠燈,面對此狀況,使用者必須檢查網站內容、程式碼,看看哪邊是否沒有正確的使用https連線的來源,不過逐一檢查對使用者來說真的蠻辛苦的。大多數會發生沒有通過SSL檢查都是外部使用的資源造成的,那我們該怎麼做檢查比較方便呢?

面對SSL的HTTPS檢查,除了可以使用香腸上回介紹的「Why No Padlock? 」服務之外,網友也有提到可以使用Chrome開發者工具「Chrome DevTools 」也能查出到底網站哪邊的連線沒有正確,聽起來似乎很方便,但是對SSL新手來說可能有點問號,不知道工具在何方?怎麼查看那些外部連線是沒有正確使用SSL的資料來源的。


一般SSL是用於線上交易、會員登入系統、金流系統、購物網站等,但是近年來因為Google的一句話改變了SSL的使用範圍,使得部落格站長們、各大網站都搶著用,不論網站有沒有會員機制、有沒有金流系統,大家都掛上SSL加密連線為的就是提升網站SEO排名。使用加密連線是好事情,提升網站的瀏覽安全,不過使用的同時也別忘了將自身網站內的連線全數修正好。

Chrome DevTools 檢查SSL沒有通過瀏覽器HTTP驗證的原因

透過Chrome開發者工具「Chrome DevTools 」,即可快速查出網站那些東西沒有正確使用https連線,導致網站掛上SSL卻沒有通過瀏覽器的綠燈檢查。之前介紹過「Why No Padlock? 」服務可以查出,現在可以使用Chrome瀏覽器的開發者工具(F12)快速查出有問題的部分,進而修正網站連線讓網站達到標準的SSL加密連線、提升網站的瀏覽效能與安全性。

使用之前請先安裝Google Chrome瀏覽器:下載Google Chrome瀏覽器

Chrome DevTools官方介紹(英文):按這裡

第1步  首先查看網站的頁面,如果發現透過Google Chrome瀏覽器網站有掛SSL加密連線卻沒有發現HTTPS的地方亮綠燈,代表網站頁面含有非HTTPS的連線,請盡速修正。

Chrome DevTools 檢查SSL沒有通過瀏覽器HTTP驗證的原因

第2步  在有問題的頁面上,可以點網頁空白處【右鍵】→【檢查】,或者是Windows使用者可按下﹝F12﹞快捷鍵。

Windows快速鍵:Ctrl+Shift+I 或 F12

Mac快速鍵:Cmd+Opt+I

Chrome DevTools 檢查SSL沒有通過瀏覽器HTTP驗證的原因

第3步  接著點下方的【Console】,如果看到「Mixed Content: The page at [網址] was loaded over HTTPS, but requested an insecure image [圖片網址].」這邊就是異常的地方請您修正為https連線即可。當然這邊示意的是圖檔連線部分,有些可能是JS或CSS,請依照指示去修正這些連線。不過得注意,並不是所有錯誤直接改成https即可,因為有些外部的JS、CSS、圖片等,該網站不支援https那直接改會造成網站異常。

Chrome DevTools 檢查SSL沒有通過瀏覽器HTTP驗證的原因

第4步  修改好後再次造訪頁面,我們可以看到網址列就亮綠燈囉!如果看Chrome DevTools的【Console】是空白就是已經完成所有修復,網頁正常載入。

Chrome DevTools 檢查SSL沒有通過瀏覽器HTTP驗證的原因