如何快速修复 WordPress 混合内容警告(HTTPS / SSL)

如何快速修复 WordPress 混合内容警告(HTTPS / SSL)

如何快速修复 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%的网络使用它。因此,以下警告是你的大多数访问者会看到的内容:

Google Chrome 浏览器中的混合内容警告

当然,并非所有人都在使用 Chrome。

这是 WordPress 网站上显示混合内容警告时 Firefox 中发生的情况的示例:

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:

浏览器工具菜单中的 Chrome 开发者工具

你可以在几个地方检查一下哪些资源没有通过 HTTPS 加载。

第一个是 “控制台” 选项卡。请注意,打开 Chrome DevTools 后,可能需要刷新页面才能正确加载所有内容。

如果出现混合内容错误,它们将以红色或黄色突出显示。通常情况下,它们会附有说明 “此请求已被阻止;内容必须通过 HTTPS 提供。” 这意味着浏览器设置被配置为自动阻止任何 HTTP 内容。

为了确保页面仅通过 HTTPS 加载,Chrome 默认开始 使用 Chrome 79 开始阻止混合内容。最近,他们推出了功能,以开始自动升级混合图像和媒体。

因此,在使用 Chrome DevTools 时,你可能会看到内容混合的消息,指示某些请求的元素已自动升级:

Chrome DevTools 控制台中的混合内容

在这里,我们可以清楚地看到导致混合内容警告的各种不安全元素,包括样式表和脚本。

你还会注意到,请求了一个不安全的.jpg 图像,该图像已自动升级到 HTTPS。(注意:如果该浏览器位于 Chrome 以外的其他浏览器上,则不会自动升级)。

你也可以在 Chrome DevTools 的 “安全性” 标签中查找。这将向你显示任何非安全来源:

Chrome DevTools 安全性

在 “ 网络” 标签下,你还可以找到被阻止的请求的列表:

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 插件目录下载该工具,也可以在 WordPress 仪表板中搜索该工具。

激活它后,只需搜索你的 HTTP 域(http://yourdomain.com)并将其替换为你的 HTTPS 域(https://yourdomain.com):

搜索替换 WordPress 插件选项

步骤 4:确认混合内容警告已消失

完成搜索和替换后,你将需要仔细检查你的站点,以确认混合内容警告已消失。我们建议你在前端访问你的网站,并在几页上单击一下,同时在地址栏中查看浏览器状态指示器。

在我们的网站上,我们可以看到.jpg 图像现已修复,但是仍然存在不安全的脚本警告。

这是因为我们进行了搜索,并替换了从我们自己域中加载的资源。jQuery 警告是由必须手动更新的外部脚本引起的:

控制台中的混合内容警告

在这种情况下,需要将脚本手动添加到我们的 WordPress 标头(header.php)中。它应该使用相对网址,因此我们将其更新为 //ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

HTTP 外部脚本已添加到主题编辑器中的 WordPress 标头中

HSTS

为什么不能简单地使用 HSTS (HTTP 严格传输安全性)来解决此问题。创建 HSTS 是当站点通过 HTTPS 运行时强制浏览器使用安全连接的一种方法。

你可以将其添加到 Web 服务器中,并在响应标头中将其添加为 “Strict-Transport-Security”。

但是,HSTS 并不是所有混合内容警告的快速解决方案。HSTS 仅处理重定向,而混合内容警告是浏览器本身的功能。你也无法控制第三方站点是否启用 HSTS。