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.
Vous devez vous connecter pour publier un commentaire.
Il semble que Firefox caches de polices et tente d'exécuter une demande pour la mise en cache de la police par l'utilisation de l'URL de la police a été à l'origine livré.
Qui conduit à l'erreur de contenu mixte.
J'ai vu que le problème avec la police impressionnant de polices lorsque j'ai déployé une application web sur le serveur HTTPS qui j'avais développé sur un serveur local exécutant HTTP. Lors de la demande du site distant Firefox rapports:
Blocked loading mixed active content “http://localhost:8080/fontawesome-webfont.woff2”
Qui m'a impressionné, car il n'y a pas de demande à localhost codé dans cette application web.
Dans votre exemple, la police est chargée par
qui est
url(../font/Font-Awesome-More.woff)
L'un des CSS ou des scripts chargés par l'iframe doit alors essayer de charger la police encore, peut-être l'aide d'un construit dynamiquement l'URL.
Je ne sais rien à propos de la police de la mise en cache de la stratégie mise en œuvre dans Firefox - peut-être qu'ils identifient la police par son nom - mais l'une des solutions que j'ai trouvé pour mon cas, c'est à "Oublier Ce Site" localhost dans l'histoire de Firefox.
Une solution pour votre cas pourrait être de passer à HTTPS
https://
, comme le sont toutes les références externes (y compris les polices). Si je ouvrir les Outils de développement Webconsole, je vois "contenu mixte" erreurs pour les polices chargé tout à fait sans rapport avec l'onglet. Une fois que j'ai fermer cet onglet et de le recharger mon propre site, les erreurs disparaissent. Aller à la figure. De toute façon, la Webconsole a tous les détails. Si l'erreur n'est pas visible, vérifiez les Filtres dans la console web (si vous en avez de la chance, il y a même un lien pour effacer les filtres).J'ai eu le même problème. Je l'ai résolu en utilisant un relative chemin au lieu d'un absolue chemin.
Depuis mes polices de caractères sont appelés à partir de ce CSS "/styles/ma.css",
et mes polices de caractères ont été situé dans "/fonts/Open_Sans..."
Avant (avec FF erreurs):
Après (sans FF erreurs):
Puisque vous rencontrez des problèmes sur Firefox fin, suivre leur documentation,
Comment réparer un site web est bloqué contenu mixte:
J'ai rencontré ce problème à la suite de mon live et la mise en scène de serveurs HTTPS, et mon/dev copie HTTP.
Je l'ai résolu par la génération de mon CSS dynamiquement, et en ligne
data:
les polices dans le fichier CSS, plutôt que des références d'URL. Cela supprime toutes les URL des informations associées à une police de caractères, et permet d'éviter d'éventuels inter-site cache contamination.Dans mon cas, j'ai utilisé PHP, mais cela peut être changé à n'importe quel langage côté serveur.
J'ai mis de l'304-tête à coup de pied si la copie déjà servi pour le navigateur récent. Vous n'avez pas besoin de cela, mais il permettra d'améliorer les performances si vous le faites. Définition des polices changent rarement, de sorte que vous pouvez faire ce retard de plus sur des sites à fort trafic.