安全性：瞭解安全性問題

Kayce Basques

使用 Chrome 開發人員工具中的「安全性」面板，確認網頁上已正確實作 HTTPS。請參閱「為什麼 HTTPS 很重要」，瞭解為什麼每個網站都應使用 HTTPS 確保安全，即使網站未處理機密使用者資料也一樣。

總覽

「安全性」面板是開發人員工具中用來檢查網頁安全性的主要位置。「安全性」面板會提供網頁來源的總覽，包括 HTTP 安全性警告、來源詳細資料和憑證。

開啟「安全性」面板

如要開啟「安全性」面板，請按照下列步驟操作：

  1. 開啟開發人員工具。
  2. 按下以下按鍵，開啟指令選單：
    • macOS：Command + Shift + P 鍵
    • Windows、Linux 和 ChromeOS：Control + Shift + P 鍵

  3. 開始輸入 security，選取「顯示安全性面板」，然後按下 Enter 鍵。

    「安全性」面板。

    圖 1. 「安全性」面板

或者，您也可以依序選取右上角的「更多選項」 >「更多工具」 >「安全性」more_vert。

常見問題

不安全的主要來源

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

不安全的網頁

圖 2. 不安全的網頁

當您造訪的網址是透過 HTTP 要求時，就會發生這個問題。為確保安全性，您必須透過 HTTPS 要求。舉例來說，如果您查看網址列中的網址，可能會看到類似 http://example.com 的網址。為確保安全性，網址應為 https://example.com。

如果您已在伺服器上設定 HTTPS，只要將伺服器設為將所有 HTTP 要求重新導向至 HTTPS，即可解決這個問題。

如果您尚未在伺服器上設定 HTTPS，Let's Encrypt 提供免費且相對簡單的啟動程序。或者，您也可以考慮在 CDN 上代管網站。目前大多數主要 CDN 都會預設以 HTTPS 代管網站。

偵測到多種安全性漏洞

複合型內容是指網頁的主要來源是安全的，但網頁要求來自不安全來源的資源。由於 HTTP 內容可供嗅探器存取，且容易遭受中間人攻擊，因此複合型內容網頁僅提供部分保護。

複合型內容。

圖 3. 偵測到多種安全性漏洞

在圖 3中，按一下「View 1 request in Network panel」會開啟「Network」面板並套用 mixed-content:displayed 篩選器，讓「Network Log」只顯示非安全的資源。

網路記錄中的資源混合。

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

查看詳細資料

查看主要來源憑證

在「安全性總覽」中，按一下「查看憑證」，即可快速檢查主要來源的憑證。

主要來源憑證。

圖 5：主要來源憑證

查看來源詳細資料

按一下左側導覽面板中的其中一個項目，即可查看來源的詳細資料。您可以在詳細資料頁面中查看連線和憑證資訊。系統也會在可用時顯示憑證透明化資訊。

主要來源詳細資料。

圖 6. 主要來源詳細資料