firefox - 在 HTTP 网站上得到 "Blocked loading mixed active content"

Question

问题

我正在开发一个使用 HTTP 协议(protocol)提供服务的网站。在开发中，我使用带有 webpack-dev-server 的 Webpack，它在 http://localhost:9090 上本地提供页面。 .

我很惊讶在 Firefox 58 控制台中看到以下 mixed content关于加载字体文件的错误。这对我来说很奇怪，因为页面是使用 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 提供。只有它的嵌入式 iframe 是使用 HTTPS 获取的。外部页面(不是嵌入的 iframe)对字体文件的 HTTP 请求在 Firefox 58 控制台中产生混合内容错误。

代码示例

举一个工作示例，我在 Plunker 上创建了 2 支笔，通过 HTTP 提供服务并导入(Plunker 站点本身，而不是我的代码)WOFF 字体 Font Awesome over HTTP。

带有错误的示例，它通过 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 协议(protocol)加载的网站上拥有混合内容？我认为混合内容只能存在于使用 HTTPS 加载的网站上。是否需要通过 HTTPS 的任何资源(就像 YouTube 嵌入所做的那样)使得所有内容都需要通过 HTTP 混合内容？

如何修复错误？我不打算通过 HTTPS 为网站提供服务，我希望我的字体能够在生产 HTTP 服务器上正确加载。

Answer 1

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

当我将 Web 应用程序部署到运行 HTTPS 的服务器上时，我看到了 Font Awesome 字体的问题，该服务器是我在运行 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