使用 Chrome 开发者工具中的 Security 面板来确保页面上正确实现了 HTTPS。请参阅 HTTPS 的重要性一文,了解为什么每个网站都应该使用 HTTPS 保护,甚至是不处理敏感用户数据的网站。
打开“安全性”面板
Security 面板是开发者工具中用于检查页面安全性的主要位置。
- 打开开发者工具。
点击安全标签页以打开安全面板。
图 1. “安全性”面板
常见问题
不安全的主源
如果网页的主来源不安全,Security Overview(安全性概览)会显示 This page is notsecure(此页面不安全)。
图 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 中,点击在“网络”面板中查看 1 项请求会打开网络面板并应用 mixed-content:displayed
过滤条件,以便网络日志仅显示非安全资源。
图 4. 网络日志中的混合资源
查看详情
查看主源证书
在安全概览 (Security Overview) 中,点击查看证书 (View certificate) 以快速检查主源站的证书。
图 5. 主源证书
查看来源详情
点击左侧导航栏中的某个条目,查看来源的详细信息。在详情页面中,您可以查看连接和证书信息。证书透明度信息(如果有)也会显示。
图 6. 主要来源详情