Pourquoi est-ce que je reçois soudainement un problème de "Chargement bloqué de contenu actif mixte" dans Firefox?

Ce matin, lors de la mise à niveau de mon navigateur Firefox vers la dernière version (du 22 au 23), certains des aspects clés de mon back-office (site Web) ont cessé de fonctionner.

En consultant le journal Firebug, les erreurs suivantes ont été signalées:

Blocked loading mixed active content "http://code.jquery.com/ui/1.8.10/themes/smoothness/jquery-ui.css"
Blocked loading mixed active content "http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"`

entre autres erreurs causées par le non-chargement de ce dernier des deux ci-dessus.

Que signifie ce qui précède et comment le résoudre?

J'ai trouvé cet article de blog qui clarifiait certaines choses. Pour citer le bit le plus pertinent:

Le contenu actif mixte est désormais bloqué par défaut dans Firefox 23!

Qu'est-ce que le contenu mixte?
Lorsqu'un utilisateur visite une page servie via HTTP, sa connexion est ouverte pour les écoutes et les attaques de l'homme du milieu (MITM). Lorsqu'un utilisateur visite une page servie via HTTPS, sa connexion avec le serveur Web est authentifiée et chiffrée avec SSL et donc protégée contre les écoutes et les attaques MITM.

Cependant, si une page HTTPS comprend du contenu HTTP, la partie HTTP peut être lue ou modifiée par des attaquants, même si la page principale est servie via HTTPS. Lorsqu'une page HTTPS a un contenu HTTP, nous appelons ce contenu «mixte». La page Web que l'utilisateur visite n'est que partiellement cryptée, car une partie du contenu est récupérée non cryptée via HTTP. Le bloqueur de contenu mixte bloque certaines requêtes HTTP sur les pages HTTPS.

La résolution, dans mon cas, était simplement de s'assurer que les jqueryinclusions étaient les suivantes (notez la suppression du protocole):

<link rel="stylesheet" href="https://code.jquery.com/ui/1.8.10/themes/smoothness/jquery-ui.css" type="text/css">
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>

Notez que le «correctif» temporaire consiste à cliquer sur l'icône «bouclier» dans le coin supérieur gauche de la barre d'adresse et à sélectionner «Désactiver la protection sur cette page», bien que ce ne soit pas recommandé pour des raisons évidentes.

MISE À JOUR: Ce lien à partir des pages de support de Firefox (Mozilla) est également utile pour expliquer ce qui constitue un contenu mixte et, comme indiqué dans le paragraphe ci-dessus, fournit en fait des détails sur la façon d'afficher la page indépendamment:

La plupart des sites Web continueront de fonctionner normalement sans aucune action de votre part.

Si vous devez autoriser l'affichage du contenu mixte, vous pouvez le faire facilement:

Cliquez sur l'icône de bouclier Bouclier de contenu mixte dans la barre d'adresse et choisissez Désactiver la protection sur cette page dans le menu déroulant.

L'icône dans la barre d'adresse se transformera en un triangle d'avertissement orange Icône d'avertissement d'identité pour vous rappeler qu'un contenu non sécurisé est affiché.

Pour annuler l'action précédente (re-bloquer le contenu mixte), rechargez simplement la page.

Cela signifie que vous appelez http à partir de https. Vous pouvez utiliser src="//url.to/script.js"dans votre balise de script et il se détectera automatiquement.

Alternativement, vous pouvez utiliser utiliser https dans votre srcmême si vous le publierez sur une page http. Cela évitera le problème potentiel mentionné dans les commentaires.

En l'absence d'une fonction de liste blanche, vous devez faire le choix «tout» ou «rien». Vous pouvez désactiver complètement le blocage de contenu mixte.

Le choix rien

Vous devrez désactiver définitivement le blocage de contenu mixte pour le profil actif actuel.

Dans le "Awesome Bar", tapez "about: config". Si c'est votre première fois, vous obtiendrez le message "Cela pourrait annuler votre garantie!" message.

Oui, vous ferez attention. Oui tu le promets!

Recherchez security.mixed_content.block_active_content . Définissez sa valeur sur false .

Le tout choix

La réponse d' iDevelApp est impressionnante.

Placez la <meta>balise ci-dessous dans la <head>section de votre document pour forcer le navigateur à remplacer les connexions non sécurisées (http) par des connexions sécurisées (https). Cela peut résoudre le problème de contenu mixte si la connexion est capable d'utiliser https.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Si vous souhaitez bloquer, ajoutez la balise ci-dessous dans la <head>balise:

<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">

Si vous consommez un service interne via AJAX, assurez-vous que l'URL pointe vers https, cela a corrigé l'erreur pour moi.

URL AJAX initiale: " http://XXXXXX.com/Core.svc/ " + ApiName
URL AJAX corrigée: " https://XXXXXX.com/Core.svc/ " + ApiName,

Son donné l'erreur à cause de la sécurité. pour cela, veuillez utiliser "https" et non "http" dans l'url du site Web.

Par exemple :

   "https://code.jquery.com/ui/1.8.10/themes/smoothness/jquery-ui.css"
   "https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"

Dans la page pertinente qui fait un appel https à http à contenu mixte qui n'est pas accessible, nous pouvons ajouter l'entrée suivante dans le pertinent et se débarrasser de l'erreur de contenu mixte.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

J'ai eu ce même problème car j'ai acheté un modèle CSS et il a saisi un javascript et un fichier javascript externe via http://whatever.js.com/javascript.js. Je suis allé à cette page dans mon navigateur, puis je l'ai changé en https://whatever...utilisant SSL et cela a fonctionné, donc dans ma balise javascript HTML, je viens de changer l'URL à utiliser à la httpsplace de httpet cela a fonctionné.

Pour forcer la redirection sur le protocole https, vous pouvez également ajouter cette directive dans .htaccess sur le dossier racine

RewriteEngine on

RewriteCond %{REQUEST_SCHEME} =http

RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

@Blender Comment est la meilleure approche. Ne codez jamais en dur le protocole n'importe où dans le code car il sera difficile de le changer si vous passez de httpà https. Puisque vous devez éditer et mettre à jour manuellement tous les fichiers.

C'est toujours mieux car il détecte automatiquement le protocole.

src="//code.jquery.com

J'ai trouvé que si vous rencontrez des problèmes pour inclure ou mélanger votre page avec quelque chose comme http : //www.example.com, vous pouvez résoudre ce problème en mettant // www .example.com à la place

J'ai le même problème lorsque mon site passe de http à https. Nous avons ajouté une règle pour toutes les demandes de redirection de http vers https.

Vous devez ajouter la règle de redirection pour les demandes intersites, mais vous devez supprimer la règle de redirection pour les js / css externes.

Je viens de résoudre ce problème en ajoutant le code suivant dans l'en-tête:

    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Si votre serveur d'applications est weblogic, assurez-vous que l'entrée WLProxySSL ON existe (et assurez-vous également qu'elle ne doit pas être commentée) dans le fichier weblogic.conf du répertoire conf du serveur Web. puis redémarrez le serveur Web, cela fonctionnera.