问题
我正在开发使用HTTP协议提供服务的网站。在开发中,我将Webpack与webpack-dev-server一起使用,该服务器在http://localhost:9090
上本地提供页面。
我很惊讶在Firefox 58控制台中看到有关加载字体文件的以下mixed content错误。对我来说很奇怪,因为该页面是使用HTTP而不是HTTPS进行服务的,我认为混合内容错误仅限于HTTPS页面。
`Blocked loading mixed active content “http://localhost:9090/b1aa06d82e70bbd5a14259a94c9bbb40.ttf”
我发现错误的根源是嵌入在页面(
<iframe>
)中<iframe src="https://www.youtube.com/embed/...>
中的YouTube视频。删除YouTube嵌入后,错误将从控制台中消失。我不了解此行为,因为它不是发出此字体请求的嵌套HTTPS iframe,而是外部HTTP页面(顶级浏览上下文)!
摘要
外部页面(顶级浏览上下文)是使用HTTP提供的。使用HTTPS只能获取其嵌入式iframe。外部页面生成的字体文件(不是嵌入式iframe)的HTTP请求在Firefox 58控制台中产生混合内容错误。
程式码范例
作为一个工作示例,我在Plunker上创建了2支笔,这些笔通过HTTP进行服务并通过HTTP导入(Plunker站点本身,而不是我的代码)WOFF字体Font Awesome。
带有错误的示例(其通过HTTPS嵌入了YouTube iframe)在Firefox 58控制台中产生以下错误:
Blocked loading mixed active content “http://plnkr.co/css/font/Font-Awesome-More.woff”
。与没有删除iframe的示例相同的代码“没有错误”不会产生任何错误。
With error
Without error
问题
您如何在使用HTTP协议加载的网站上混合内容?我认为混合内容只能存在于使用HTTPS加载的网站上。是否需要通过HTTPS提供任何资源(例如通过YouTube嵌入完成),就能使所有内容都通过HTTP混合内容获得?
我该如何解决错误?我不打算通过HTTPS服务网站,我希望我的字体可以在生产HTTP服务器上正确加载。
最佳答案
似乎Firefox缓存了字体,并尝试通过使用字体最初来自的URL对缓存的字体执行请求。
这导致混合内容错误。
当我在运行HTTPS的服务器上部署Web应用程序到运行HTTPS的服务器时,我看到了字体真棒字体的问题。当请求远程站点时,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
关于firefox - 在HTTP网站上获得“阻止加载混合的事件内容”,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47536960/