添加到 Cloudflare 的域名会获得 SSL 证书,并可以通过 HTTPS 提供流量。但是,在开始使用 Cloudflare 后,一些客户在首次提供 HTTPS 流量时注意到内容缺失或页面渲染问题。
通常,问题是由于从通过 HTTPS 提供的网页请求 HTTP 资源引起的。例如,您在浏览器中输入 https://example.com,页面 HTML 中包含通过 HTTP 引用图像 <img src="http://example.com/resource.jpg">。
通常,如果您的网站通过 HTTPS 安全加载所有资源,访客会在浏览器地址栏中看到锁形图标。
这表明您的网站有有效的 SSL 证书,网站加载的所有资源都通过 HTTPS 加载。绿色锁形图标向访客保证连接是安全的。混合内容的症状之一是出现不同的图标而不是绿色锁形图标。
大多数现代浏览器会阻止安全 HTTPS 页面上的 HTTP 请求。被阻止的内容可以包括图像、JavaScript、CSS 或其他影响页面外观或行为的资源。
每个 Web 浏览器使用不同的方法警告访客网站上的混合内容,可能包括:
- URL 栏旁边的黄色三角形或信息符号
- 提及"安全内容"的消息
对于混合内容警告,Web 浏览器加载资源,但用户看不到 URL 中的锁形图标。警告消息出现在浏览器的调试工具中:
对于混合内容错误,浏览器拒绝通过不安全连接加载资源:
有关使用浏览器调试工具定位这些问题的信息,请参阅 Chrome ↗ 和 Firefox ↗ 的文档。或者,您可以查看页面源代码,找到指向其他资源的 http:// 特定引用。
有两种方法解决混合内容错误。
- 通过 HTML 源代码加载所有资源,而不指定 HTTP 或 HTTPS 协议。
例如,使用
/domain.com/path/to.file而不是http://domain.com/path/to.file。 - 根据您的内容管理系统,检查是否有自动将 HTTP 资源重写为 HTTPS 的插件。Cloudflare 通过 Automatic HTTPS Rewrites 提供此类服务。
Cloudflare 建议 WordPress 用户安装 Cloudflare WordPress 插件 ↗并在插件中启用 Automatic HTTPS rewrites 选项。