
如何快速修复 WordPress 混合内容警告(HTTPS / SSL)
通过 HTTPS 运行 WordPress 网站不再是可选的。它不仅更安全(所有内容都被加密,没有以纯文本形式传递任何内容),而且还建立了信任,是搜索引擎的排名因素,并且提供了更准确的推荐数据。不幸的是,从 HTTP 迁移到 HTTPS 时,网站所有者可能会遇到几个问题。其中之一是 “混合内容警告”。
由于 HTTP/2 与加密相关的性能问题已在很大程度上得到解决,而 “Let's Encrypt” 提供了一种获取免费 SSL 证书的简便方法,从而改变了整个行业。
对于在线企业而言,最重要的是,诸如 Chrome 浏览器和 Mozilla Firefox 之类的网络浏览器正在打击未通过 HTTPS 运行的网站,并向潜在访问者显示了更严格的警告。例如,如果你使用的是旧版 TLS 版本,则可能会 在 Chrome 中遇到 ERR_SSL_OBSOLETE_VERSION 通知。警告是你希望访客看到的最后一件事。
为了帮助你避免这些问题,我们提供了有关如何从 HTTP 迁移到 HTTPS 的深入指南。但是,在执行该过程之后,你可能仍然会看到混合内容警告。
什么是混合内容警告?
当用户尝试访问的 WordPress 网站同时加载 HTTPS 和 HTTP 脚本或内容时,用户浏览器中会出现混合内容警告。由于 HTTP 和 HTTPS 是完全独立的协议,因此可能会引起问题。
当你迁移到 HTTPS 时,所有内容都需要在该协议上运行,包括图像,JavaScript 文件等。以下是一些示例,说明如果你的某些内容仍通过 HTTP 加载时会发生的情况。
混合内容警告示例
Chrome 目前是最主要的浏览器,超过 77%的网络使用它。因此,以下警告是你的大多数访问者会看到的内容:
当然,并非所有人都在使用 Chrome。
这是 WordPress 网站上显示混合内容警告时 Firefox 中发生的情况的示例:
是什么导致混合内容警告?
我们发现,最常见的混合内容警告出现在有人将 WordPress 网站从 HTTP 迁移到 HTTPS 之后。一些 HTTP 链接只是被保留下来,这会导致混合内容警告开始触发。
以下是此警告的一些其他原因:
- 你刚刚向网站添加了新服务或插件。特别是,开发人员有时会在其插件或主题中使用绝对路径(http://yourdomain.com/style.css)链接到 CSS 和 JavaScript,而不是使用相对路径(/style.css)。
- 你的图像具有通过 HTTP 运行的硬编码 URL(例如 http://yourdomain.com/image.png)。这些可以在帖子,页面甚至小部件中。
- 你正在链接到外部脚本的 HTTP 版本(托管的 jQuery,Font Awesome 等)。
- 你具有使用 HTTP 而不是 HTTPS 的嵌入式视频脚本。
不幸的是,在开始进行故障排除之前,你可能无法发现问题的真正根源。
考虑到这一点,让我们看一些可用于修复混合内容警告的方法。
如何解决混合内容警告(4 个步骤)
你可以按照以下四个简单步骤来修复 WordPress 混合内容警告。此过程假定你已完成以下操作:
- 安装了 SSL 证书
- 将 HTTP重定向到 HTTPS (站点范围)
在以下示例中,我们将使用示例开发站点。
步骤 1:找出哪些资源正在通过 HTTP 加载
你需要做的第一件事是找出哪些资源仍通过 HTTP 加载。
请记住,这些警告可能仅在你网站的某些区域发生,而不是全局发生。浏览到提示警告的页面,并 通过单击以下命令启动 Chrome DevTools:
- Windows: F12 或 CTRL + Shift + I
- macOS: Cmd + Opt + I
你也可以从浏览器的工具菜单中打开 Chrome DevTools:
你可以在几个地方检查一下哪些资源没有通过 HTTPS 加载。
第一个是 “控制台” 选项卡。请注意,打开 Chrome DevTools 后,可能需要刷新页面才能正确加载所有内容。
如果出现混合内容错误,它们将以红色或黄色突出显示。通常情况下,它们会附有说明 “此请求已被阻止;内容必须通过 HTTPS 提供。” 这意味着浏览器设置被配置为自动阻止任何 HTTP 内容。
为了确保页面仅通过 HTTPS 加载,Chrome 默认开始 使用 Chrome 79 开始阻止混合内容。最近,他们推出了功能,以开始自动升级混合图像和媒体。
因此,在使用 Chrome DevTools 时,你可能会看到内容混合的消息,指示某些请求的元素已自动升级:
在这里,我们可以清楚地看到导致混合内容警告的各种不安全元素,包括样式表和脚本。
你还会注意到,请求了一个不安全的.jpg 图像,该图像已自动升级到 HTTPS。(注意:如果该浏览器位于 Chrome 以外的其他浏览器上,则不会自动升级)。
你也可以在 Chrome DevTools 的 “安全性” 标签中查找。这将向你显示任何非安全来源:
在 “ 网络” 标签下,你还可以找到被阻止的请求的列表:
如果你没有使用 Chrome,或者只想快速总结错误,还可以使用免费工具,例如 Why No Padlock。它将扫描单个页面并显示所有不安全的资源。
该工具易于使用。你只需输入 URL 并单击 Test Page,它就会向你显示出现的任何错误。另外,它是免费的!
批量检查 HTTPS 警告
如果你担心网站的其余部分,则可能需要批量检查。以下是一些建议的方法:
- 有一个免费的小工具,叫做 JitBit 的 SSL Check,可用于爬网 HTTPS 站点并搜索不安全的图像和脚本,这些图像和脚本将在浏览器中触发警告消息。每个网站抓取的页面数限制为 400。
- 该 Ahrefs 现场审核工具 能够检测到 HTTPS / HTTP 混合内容的能力。如果你已经可以使用此解决方案,或者你的营销团队中的某个人可以使用它,那么这可能是一种完善的解决方法。
- HTTPS Checker 是一个桌面软件,你可以安装该软件来扫描你的站点。重大更改后,它可以帮助你检查 “不安全” 的警告和内容。它在 Windows,Mac 和 Ubuntu 上可用。免费计划使你每次扫描最多可以检查 500 页。
- SSL 不安全内容修复程序 是一个 WordPress 插件,你可以将其安装在你的网站上,以发现导致混合内容警告的错误。它是免费使用的,甚至会自动执行修复程序来解决错误。
使用上述任何工具都可以节省你的时间,而不必手动检查站点上的每个页面上是否有内容混合的警告和错误。为了全面评估你网站上的潜在错误,你可以考虑结合使用这些解决方案。
步骤 2:验证 HTTP 资源是否可以通过 HTTPS 访问
下一步是确认可以通过 HTTPS 访问通过 HTTP 加载的资源。它们很可能是,你只需要更新链接。
举例来说,假设我们的混合内容错误指向以下不安全的 jQuery 脚本和.jpg 图片:
- http://ajax.googleapis.com/ajax/libs/jquery/3.31/jquery.min.js
- http://example-site.com/wp-content/50d00acf6e4%2Fpuppy-thumb.jpg?v=1600261043278
如果我们同时使用这两个 URL,将它们输入到浏览器的地址栏中,并在开始时将 “http” 替换为 “ https”,则可以看到它们加载正常。因此,我们只需要在我们的网站上进行搜索和替换即可。
步骤 3:执行 WordPress 搜索并替换
有很多方法可以执行 WordPress 搜索和替换。在本节中,我们将引导你完成两个不同的推荐选项。
如果你感到好奇,我们不建议你使用诸如 Really Simple SSL 之类的工具。尽管它是一个很棒的插件,但是从长远来看,最好不要依赖这样的解决方案。你以后不会再迁移回 HTTP,因此最好以正确的方式进行操作,并更新数据库中的 HTTP URL 。
搜索并替换替代项
使用免费的 Better Search Replace 插件完成相同的任务,然后在完成后将其删除:
你可以从 WordPress 插件目录下载该工具,也可以在 WordPress 仪表板中搜索该工具。
激活它后,只需搜索你的 HTTP 域(http://yourdomain.com)并将其替换为你的 HTTPS 域(https://yourdomain.com):
步骤 4:确认混合内容警告已消失
完成搜索和替换后,你将需要仔细检查你的站点,以确认混合内容警告已消失。我们建议你在前端访问你的网站,并在几页上单击一下,同时在地址栏中查看浏览器状态指示器。
在我们的网站上,我们可以看到.jpg 图像现已修复,但是仍然存在不安全的脚本警告。
这是因为我们进行了搜索,并替换了从我们自己域中加载的资源。jQuery 警告是由必须手动更新的外部脚本引起的:
在这种情况下,需要将脚本手动添加到我们的 WordPress 标头(header.php)中。它应该使用相对网址,因此我们将其更新为 //ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
:
HSTS
为什么不能简单地使用 HSTS (HTTP 严格传输安全性)来解决此问题。创建 HSTS 是当站点通过 HTTPS 运行时强制浏览器使用安全连接的一种方法。
你可以将其添加到 Web 服务器中,并在响应标头中将其添加为 “Strict-Transport-Security”。
但是,HSTS 并不是所有混合内容警告的快速解决方案。HSTS 仅处理重定向,而混合内容警告是浏览器本身的功能。你也无法控制第三方站点是否启用 HSTS。