如何解决 SSL 混合内容错误?

本页内容:

  1. 什么是“混合内容”?
  2. 绿色锁的含义?
  3. 如何得知网站是否含有混合内容?
  4. 如何解决混合内容问题? 
  5. 如果您使用 Wordpress 网站 
  6. 其他信息 

什么是“混合内容”?

这是指有些内容,如视频、JavaScript、CSS 等,在通过 HTTPS 加载的页面中以 HTTP 加载。举例说,如果您在浏览器中键入 https://domain.com,并在 HTML 中看到的页面包含通过 <img src="http://external.com/resource.jpg"> 调用的图像,那么这个 jpeg 文件便是混合内容,因为 img 请求是针对通过 HTTP 的完整 URL,而不是通过 HTTPS 使用加密连接,如 https://domain.com。 

绿色锁的含义?

如果您的网站通过 HTTPS 安全加载所有资源,那浏览者会在其浏览器地址栏中看到绿色锁:

这是一个很好的指标,表示您的网站具有可用的 SSL 证书,和所有资源都通过 HTTPS 加载。资源(即 HTML <img src="//external.com/resource.jpg"> 中)要么来自同一主机(例如 domain.com),因此使用相同的证书,要么来自也提供有效证书的外部主机 (external.com)。

绿色锁用于向用户保证其连接是安全的。通过 HTTPS 加载所有资源有助于提升用户体验并保护网站免受攻击。

如何知道我的网站是否含有混合内容?

以下是网页浏览器中针对所请求站点存在不安全或混合内容的指示:

Firefox:



IE(版本 10):

Chrome

如果只是一个警告,则页面将加载资源,但用户不会看到绿色锁,反而看到混合内容的警告,如下所示:

如果页面被阻止,那么该浏览器将拒绝通过不安全连接方式加载资源:

如果希望利用控制台去查找更多关于这些问题的详细信息,请参阅 Chrome Firefox 的文档。

如何解决混合内容问题?

要解决混合内容错误,并获得绿色锁图标,您需要:

1.检查混合内容警告中指定的资源能否通过 HTTPS 自行正确加载。

2.在浏览器中复制资源的 URL,并把 https:// 加在前面作测试。如果资源无法正确加载,这意味着它不是来自您所在区域的同一主机(因此,没有正确的 SSL 证书),您有以下几个选项:

  • 使用来自支持 HTTPS 的其他主机中的资源。
  • 如果允许,直接从您的主机抓取资源。
  • 从您的网站中移除资源。

3.在页面 HTML 代码中将所有 http:// 更改为 https:// // ,以确保图像和 JavaScript 文件等资源能通过 HTTPS 加载。

4.除此之外,考虑使用 Cloudflare的 Automatic HTTPS Rewrites。请注意,JavaScript 或 CSS 加载的资源不会自动重写,网站仍会显示混合内容警告。

在解决混合内容问题后,浏览器会在地址栏中显示绿色锁图标。 

如果您使用 Wordpress 网站

以下是一些关于 Wordpress 网站的参考资料:

其他参考资料

Not finding what you need?

95% of questions can be answered using the search tool. This is the quickest way to get a response.

由 Zendesk 提供技术支持