安全性:瞭解安全性問題

使用 Chrome 開發人員工具中的「安全性」面板,確認已正確實作 HTTPS。 請參閱為何 HTTPS 的重要性一節,瞭解為何所有網站都應使用 HTTPS 保護,即使網站未處理敏感的使用者資料亦然。

開啟「安全性」面板

「安全性」面板是開發人員工具中用於檢查網頁安全性的主要位置。

  1. 開啟開發人員工具
  2. 按一下「安全性」分頁標籤,開啟「安全性」面板。

    安全性面板

    圖 1:安全性面板

常見問題

不安全的主要來源

如果網頁的主要來源不安全,「安全性總覽」會顯示「這個網頁不安全」

有不安全的網頁

圖 2:有不安全的網頁

當您透過 HTTP 要求您造訪的網址時,就會發生這個問題。為保護安全,您必須透過 HTTPS 要求安全性。例如,如果您查看網址列中的網址,其內容可能與 http://example.com 類似。為確保網址安全無虞,網址應為 https://example.com

如果您已在伺服器上設定 HTTPS,修正這個問題只需調整伺服器設定,將所有 HTTP 要求重新導向至 HTTPS。

如果您尚未在伺服器上設定 HTTPS,Let's Encrypt 為您提供免費相對方便的啟動程序方法。或是考慮透過 CDN 代管網站。根據預設,大多數主要 CDN 都會透過 HTTPS 代管網站。

提示Lighthouse 中的「將 HTTP 流量重新導向至 HTTPS」稽核功能可以自動處理確保所有 HTTP 要求都已重新導向至 HTTPS 的程序。

多種安全漏洞

混合內容表示網頁的主要來源是安全的,但網頁要求資源來自不安全的來源。混合內容頁面僅受部分保護,因為 HTTP 內容可供窺探者存取,且容易遭受中間人攻擊。

多種安全漏洞

圖 3:多種安全漏洞

在上方的圖 3 中,按一下「View 1 request in Network Panel」開啟「Network」面板並套用 mixed-content:displayed 篩選器,讓「網路記錄」只顯示不安全的資源。

網路記錄中的混合資源

圖 4 網路記錄中的混合資源

瞭解詳情

查看主要來源憑證

在「Security Overview」(安全性總覽) 中按一下「View certificate」(查看憑證),即可快速檢查主要來源的憑證。

主要來源憑證

圖 5:主要來源憑證

查看來源詳細資料

點選左側導覽欄中的項目,即可查看來源的詳細資料。您可以在詳細資料頁面中查看連線和憑證資訊。系統也會顯示憑證透明化資訊 (如果有的話)。

主要來源詳細資料

圖 6:主要來源詳細資料