Problem
我正在开发一个使用 HTTP 协议提供服务的网站。在开发中，我使用 Webpack 及其 webpack-dev-server，它在本地提供页面服务http://localhost:9090.
我很惊讶地在 Firefox 58 控制台中看到以下内容混合内容 https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content关于加载字体文件的错误。这对我来说很奇怪，因为该页面是使用 HTTP 而不是 HTTPS 提供的，并且我认为混合内容错误仅限于 HTTPS 页面。
`Blocked loading mixed active content “http://localhost:9090/b1aa06d82e70bbd5a14259a94c9bbb40.ttf”
我发现错误的根源是嵌入在<iframe>在页面上（<iframe src="https://www.youtube.com/embed/...>）。一旦我删除 YouTube 嵌入，错误就会从控制台中消失。
我不理解这种行为，因为发出此字体请求的不是嵌套的 HTTPS iframe，而是外部 HTTP 页面（顶级浏览上下文）！
Summary
外部页面（顶级浏览上下文）使用 HTTP 提供服务。只有它的嵌入式 iframe 是使用 HTTPS 获取的。外部页面（而不是嵌入的 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，不会产生错误。
- 有错误 http://plnkr.co/edit/HgDaTqyA2bKumocwamiu?p=preview
- 没有错误 http://plnkr.co/edit/iqtq5Io7rzYuKEIGWLtQ?p=preview
问题
- 如何在使用 HTTP 协议加载的网站上加载混合内容？我认为混合内容只能存在于使用 HTTPS 加载的网站上。通过 HTTPS 请求任何资源（就像 YouTube 嵌入所做的那样）是否会使通过 HTTP 混合内容所需的所有内容？
- 我该如何修复该错误？我不打算通过 HTTPS 提供网站服务，并且希望我的字体能够在生产 HTTP 服务器上正确加载。
