问题描述
我正在开发一个使用HTTP协议提供服务的网站.在开发中，我将Webpack与它的webpack-dev-server一起使用，该服务器在http://localhost:9090上本地提供页面.
I'm developing a website served using HTTP protocol. In development I use Webpack with it's webpack-dev-server, which serves the page locally on http://localhost:9090.
我很惊讶在Firefox 58控制台中看到以下混合内容关于加载字体文件的错误.对我来说很奇怪，因为该页面是使用HTTP而不是HTTPS进行服务的，我认为混合内容错误仅限于HTTPS页面.
I was surprised to see in Firefox 58 console the following mixed content error about loading the font file. It's weird to me, cause the page is served using HTTP not HTTPS and I thought mixed content errors are limited only to HTTPS pages.
`Blocked loading mixed active content "http://localhost:9090/b1aa06d82e70bbd5a14259a94c9bbb40.ttf"
我发现错误的根源是嵌入在页面(<iframe src="https://www.youtube.com/embed/...>)上<iframe>中的YouTube视频.移除YouTube嵌入后，错误将从控制台中消失.
I found out that the source of the error is YouTube video embedded in an <iframe> on the page (<iframe src="https://www.youtube.com/embed/...>). As soon as I remove the YouTube embed, the error disappears from the console.
我不了解此行为，因为发出此字体请求的不是嵌套的HTTPS iframe，而是外部HTTP页面(顶级浏览上下文)！
I don't understand this behavior, cause it's not nested HTTPS iframe which is making this font request, but the outer HTTP page (top-level browsing context)!
使用HTTP为外部页面(顶级浏览上下文)提供服务.使用HTTPS只能获取其嵌入式iframe.外部页面生成的字体文件(不是嵌入式iframe)的HTTP请求在Firefox 58控制台中产生混合内容错误.
The outer page (top-level browsing context) is served using HTTP. Only it's embedded iframe is fetched using HTTPS. The HTTP request for a font file that the outer page makes (not the embedded iframe) produces mixed content error in Firefox 58 console.
作为一个工作示例，我在Plunker上创建了2支笔，这些笔通过HTTP进行服务，并通过HTTP导入(Plunker网站本身，而不是我的代码)WOFF字体Font Awesome.
To give a working example I created 2 pens on Plunker, which is served over HTTP and imports (the Plunker site itself, not my code) WOFF font Font Awesome over HTTP.
示例有错误(通过HTTPS嵌入YouTube iframe)在Firefox 58控制台中产生以下错误:Blocked loading mixed active content http://plnkr.co/css/font/Font-Awesome-More.woff.
The example With error, which has YouTube iframe embedded over HTTPS, produces the following error in Firefox 58 console: Blocked loading mixed active content "http://plnkr.co/css/font/Font-Awesome-More.woff".
示例没有错误(仅删除iframe的代码相同)不会产生错误.
The example Without error, which is the same code just having the iframe removed, produces no error.
- With error
- Without error
- 如何在使用HTTP协议加载的网站上混合内容?我认为混合内容只能存在于使用HTTPS加载的网站上.通过HTTPS要求任何资源(例如YouTube嵌入完成)是否会使HTTP混合内容所需的所有内容全部通过?
- 如何解决该错误?我不打算通过HTTPS服务网站，我希望我的字体可以在生产的HTTP服务器上正确加载.
推荐答案
似乎Firefox缓存了字体，并尝试通过使用字体最初来自的URL对缓存的字体执行请求.这会导致混合内容错误.
It seems that Firefox caches fonts and tries to execute a request to the cached font by use of the URL the font was originally delivered from.That leads to the mixed content error.
当我将Web应用程序部署到运行HTTPS的服务器上时，我看到了字体真棒字体的问题，该应用程序是在运行HTTP的本地服务器上开发的.请求远程站点时，Firefox报告:
I saw that problem with font awesome fonts when I deployed a web application to the server running HTTPS which I had developed on a local server running HTTP. When requesting the remote site Firefox reports:
Blocked loading mixed active content http://localhost:8080/fontawesome-webfont.woff2
这让我印象深刻，因为没有对该Web应用程序中编码的localhost的请求.
That impressed me because there is no request to localhost coded in that web application.
在您的示例中，字体加载方式
In your example the font is loaded by
是url(../font/Font-Awesome-More.woff)
iframe加载的CSS或脚本之一必须再次尝试使用动态构造的URL再次加载该字体.
One of the CSS or scripts loaded by the iframe must then try to load that font again maybe using a dynamically constructed URL.
我对Firefox中实施的字体缓存策略一无所知-也许他们通过字体名称来识别字体-但是我为我的案例找到的解决方案之一是"Firefox.
I don't know anything about the font caching strategy implemented in Firefox - maybe they identify the font by its name - but one of the solutions I found for my case is to "Forget About This Site" localhost in the history of Firefox.
针对您的情况的解决方案可能是切换到 HTTPS
A solution for your case could be to switch to HTTPS
这篇关于获得“阻止加载混合的活动内容"在HTTP网站上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！