A “Bloqué chargement mixte contenu actif” sur le site web HTTP

Problème

Je suis le développement d'un site web a servi l'aide du protocole HTTP. Dans le développement, j'ai utiliser Webpack avec webpack-dev-serveur, qui sert à la page en local sur http://localhost:9090.

J'ai été surpris de voir dans Firefox 58 console suivants contenu mixte erreur sur le chargement du fichier de police. C'est bizarre pour moi, car la page est servi à l'aide de pas HTTP, HTTPS et j'ai pensé à contenu mixte, les erreurs sont limitées uniquement aux pages HTTPS.

`Blocked loading mixed active content “http://localhost:9090/b1aa06d82e70bbd5a14259a94c9bbb40.ttf”

J'ai découvert que la source de l'erreur est une vidéo YouTube intégrée dans une <iframe> sur la page (<iframe src="https://www.youtube.com/embed/...>). Dès que j'ai supprimer le YouTube, l'erreur disparaît à partir de la console.

Je ne comprends pas ce comportement, car il n'est pas imbriquée HTTPS iframe qui fait cette demande de police, mais à l'extérieur de l'adresse HTTP de la page (en haut, au niveau de contexte de navigation)!

Résumé

L'extérieur de la page (en haut, au niveau de contexte de navigation) est servi utilisant le protocole HTTP. Seulement il est incorporé iframe est récupérée à l'aide de HTTPS. La requête HTTP pour un fichier de police à l'extérieur de page (pas intégré à l'iframe) produit une erreur de contenu mixte dans Firefox 58 console.

Exemples De Code

Pour donner un exemple, j'ai créé 2 stylos sur Plunker, qui est servi par le protocole HTTP et les importations (le Plunker site lui-même, c'est pas mon code) WOFF de police de Police Impressionnant sur HTTP.

L'exemple Avec l'erreur, qui a YouTube iframe intégré au HTTPS, génère l'erreur suivante dans Firefox 58 console: Blocked loading mixed active content “http://plnkr.co/css/font/Font-Awesome-More.woff”.

L'exemple Sans erreur, qui est le même code juste avoir l'iframe retiré, ne produit pas d'erreur.

Questions

  • Comment pouvez-vous avoir un contenu mixte, sur un site chargé à l'aide du protocole HTTP? J'ai pensé à contenu mixte ne peut exister que sur des sites chargés en utilisant le protocole HTTPS. Ne nécessitant aucune ressource sur HTTPS (comme c'est fait par YouTube) en fait tout le contenu requis, en plus de l'adresse HTTP du contenu mixte?
  • Comment puis-je corriger l'erreur? Je n'ai pas l'intention de servir de site web via HTTPS et je veux mes polices de caractères pour charger correctement sur la production de serveur HTTP.
  • Le <iframe src="https://www.youtube.com/embed/...> est un document distinct — servi par le protocole HTTPS et le contenu mixtes erreur est sans doute au sujet de ce document, à droite?
  • Non, ce serait raisonnable, mais les erreurs sont sur les demandes de mon fichier HTML principal - les fichiers de police a demandé à partir de mon "local" feuilles de style.