解决混合内容错误

解决混合内容错误,以确保访问者的 Web 浏览器不会阻止通过 HTTPS 提供的 HTTP 资源。


概述

添加到 Cloudflare 的域会收到 SSL 证书,并可以通过 HTTPS 提供流量。但是,在开始使用 Cloudflare 后,一些客户在首次提供 HTTPS 流量时会发现缺少内容或页面呈现问题。

通常,这个问题是由于通过 HTTPS 提供的网页对 HTTP 资源的请求造成的。  例如,您在浏览器中键入 https://example.com,该页面在 HTML 中包含通过 HTTP 到 <img src =“http://example.com/resource.jpg“> 的图像引用。

通常,如果您的网站通过 HTTPS 安全地加载所有资源,则访问者会在其浏览器的地址栏中观察到一个锁定图标(通常是绿色锁):

green-lock-icon.png

这表示您的站点具有可用的 SSL 证书,并且站点加载的所有资源都通过 HTTPS 加载。绿色锁用于向用户保证其连接是安全的。混合内容症状之一是显示不同的图标,而不是绿色锁图标。

内容呈现问题的其他原因是 Rocket LoaderAuto-Mini。  如果您没有观察到混合内容错误,请测试禁用这两个功能。

混合内容出现的症状

大多数现代浏览器会阻止安全 HTTPS 页面上的 HTTP 请求。被阻止的内容可能包括影响页面外观或行为方式的图像、JavaScript、CSS 或其他内容。

以下是 Web 浏览器中针对所请求站点存在混合内容的指示:

  • Firefox
    您会看到 URL 旁边有一个提醒注意的黄色三角形:
    yellow-warning-triangle.png
  • IE(版本 10)
    您会看到有关“仅显示安全内容”的警告消息:
    only-secure-content-message.png
  • Microsoft Edge
    您会看到警告消息“您只会看到安全的内容”:
    edge-insecure-content.png
  • Chrome
    您会在 URL 旁边看到信息符号或警告符号:
    information-warning.png

如果出现混合内容警告,则 Web 浏览器将加载资源,但用户不会在 URL 中看到绿色锁图标。浏览器的调试工具中会显示警告消息:

mixed-content-warning.png

如果出现混合内容错误,,则浏览器将拒绝通过不安全连接方式加载资源:

mixed-content-error.png

有关使用浏览器调试工具查找这些问题的信息,请参阅 ChromeFirefox 的文档。或者,您可以查看页面源并查找 http:// 的特定参考,以获取其他资源的路径。


解决方案

有两种方法可以解决混合内容错误。

1.通过 HTML 源加载所有资源,而无需指定 HTTP 或 HTTPS 协议。例如:

     //domain.com/path/to.file

     代替

     http://domain.com/path/to.file

2.根据您的内容管理系统,检查自动将 HTTP 资源重写为 HTTPS 的插件。在 SSL/TLS 应用中,Cloudflare 通过 Automatic HTTPS Rewrites 提供此类服务。

Cloudflare 建议 Wordpress 用户安装 Cloudflare WordPress 插件,并在插件中启用 Automatic HTTPS Rewrites 选项。或者,Cloudflare 建议使用 SSL Insecure Content FixerReally Simple SSL 插件自动将 HTTP 替换为 HTTPS。

相关资源

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 提供技术支持