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

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

使用之前請先安裝Google Chrome瀏覽器：下載Google Chrome瀏覽器
Chrome DevTools官方介紹(英文)：按這裡

• 網站名稱：Why No Padlock?
• 網站網址：https://www.whynopadlock.com/

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

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

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

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



原始介紹文章出自於此

原始介紹文章出自於此2