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驗證的原因