title: Got "Blocked loading mixed active content" on HTTP website
body: <h2>Problem</h2>
  
  <p>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 <code>http://localhost:9090</code>.</p>
  
  <p>I was surprised to see in Firefox 58 console the following <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content" rel="noreferrer">mixed content</a> 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.</p>
  
  <pre><code>`Blocked loading mixed active content “http://localhost:9090/b1aa06d82e70bbd5a14259a94c9bbb40.ttf”
  </code></pre>
  
  <p>I found out that the source of the error is YouTube video embedded in an <code>&lt;iframe&gt;</code> on the page (<code>&lt;iframe src="https://www.youtube.com/embed/...&gt;</code>). As soon as I remove the YouTube embed, the error disappears from the console.</p>
  
  <p>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)!</p>
  
  <h2>Summary</h2>
  
  <p>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.</p>
  
  <h2>Code Examples</h2>
  
  <p>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.</p>
  
  <p>The example <em>With error</em>, which has YouTube iframe embedded over HTTPS, produces the following error in Firefox 58 console: <code>Blocked loading mixed active content “http://plnkr.co/css/font/Font-Awesome-More.woff”</code>.</p>
  
  <p>The example <em>Without error</em>, which is the same code just having the iframe removed, produces no error.</p>
  
  <ul>
  <li><a href="http://plnkr.co/edit/HgDaTqyA2bKumocwamiu?p=preview" rel="noreferrer">With error</a></li>
  <li><a href="http://plnkr.co/edit/iqtq5Io7rzYuKEIGWLtQ?p=preview" rel="noreferrer">Without error</a></li>
  </ul>
  
  <h2>Questions</h2>
  
  <ul>
  <li>How can you have a mixed content on a website loaded using HTTP protocol? I thought mixed content can only exist on websites loaded using HTTPS. Does requiring any resource over HTTPS (like it's done by YouTube embed) makes all the content required over HTTP mixed content?</li>
  <li>How can I fix the error? I don't plan to serve website over HTTPS and I want my fonts to load properly on the production HTTP server.</li>
  </ul>