在HTTP网站上获得"阻止加载混合活动内容"

Question

问题

我正在开发一个使用HTTP协议服务的网站.在开发中,我使用Webpack和它的webpack-dev-server,它在本地服务于页面http://localhost:9090.

我很惊讶在Firefox 58控制台中看到以下关于加载字体文件的混合内容错误.这对我来说很奇怪,因为页面是使用HTTP而不是HTTPS提供的,我认为混合内容错误仅限于HTTPS页面.

`Blocked loading mixed active content “http://localhost:9090/b1aa06d82e70bbd5a14259a94c9bbb40.ttf”

我发现错误的来源是嵌入在<iframe>页面上的YouTube视频(<iframe src="https://www.youtube.com/embed/...>).我删除YouTube嵌入后,错误就会从控制台中消失.

我不明白这种行为,因为它不是嵌套的HTTPS iframe正在发出这种字体请求,而是外部HTTP页面(顶级浏览上下文)!

摘要

外部页面(顶级浏览上下文)使用HTTP提供.只有使用HTTPS获取嵌入式iframe.外部页面生成的字体文件的HTTP请求(不是嵌入式iframe)在Firefox 58控制台中产生混合内容错误.

代码示例

为了给出一个工作示例,我在Plunker上创建了2个笔,它通过HTTP和导入提供(Plunker站点本身,而不是我的代码)WOFF字体字体Awesome over HTTP.

带有错误的示例(通过 HTTPS嵌入了YouTube iframe)会在Firefox 58控制台中产生以下错误:Blocked loading mixed active content “http://plnkr.co/css/font/Font-Awesome-More.woff”.

示例无错误,即删除iframe的代码相同,不会产生错误.

• 有错误
• 没有错误

问题

• 如何在使用HTTP协议加载的网站上添加混合内容？我认为混合内容只能存在于使用HTTPS加载的网站上.是否需要通过HTTPS提供任何资源(例如,通过YouTube嵌入来完成)会产生HTTP混合内容所需的所有内容？
• 我该如何修复错误？我不打算通过HTTPS提供网站服务,我希望我的字体能够在生产HTTP服务器上正确加载.

Answer 1

似乎Firefox缓存字体并尝试通过使用最初传送字体的URL来执行对缓存字体的请求.这导致混合内容错误.

当我将Web应用程序部署到运行HTTPS的服务器(我在运行HTTP的本地服务器上开发)时,我看到了字体真棒字体的问题.请求远程站点Firefox报告时:

Blocked loading mixed active content “http://localhost:8080/fontawesome-webfont.woff2”

这给我留下了深刻的印象,因为在该Web应用程序中没有对localhost编码的请求.

在您的示例中,字体由

http://plnkr.co/css/apps/editor-1.6.1.css

是的 url(../font/Font-Awesome-More.woff)

然后,iframe加载的CSS或脚本之一必须尝试再次加载该字体,可能使用动态构造的URL.

我对Firefox中实现的字体缓存策略一无所知 - 也许他们通过名称识别字体 - 但我发现的一个解决方案是在Firefox的历史中"忘记这个网站"localhost.

您的案例的解决方案可能是切换到HTTPS

Answer 2

由于您在 Firefox 端遇到问题，请按照他们提供的文档“ 如何修复混合内容被阻止的网站”：

如何修复您的网站编辑

避免混合内容阻塞的最佳策略是将所有内容作为 HTTPS 而不是 HTTP 提供。

对于您自己的域，将所有内容提供为 HTTPS 并修复您的链接。通常，内容的 HTTPS 版本已经存在，这只需要在链接中添加“s” - http:// 到 https://。

然而，在某些情况下，该路径对于相关媒体来说可能是不正确的。有在线和离线工具（取决于您的操作系统），例如 linkchecker，可以帮助解决此问题。

对于其他域，请使用站点的 HTTPS 版本（如果可用）。如果 HTTPS 不可用，您可以尝试联系域并询问他们是否可以通过 HTTPS 提供内容。