Comment corriger les problèmes de Mixed Content ?

Procédure

Depuis quelques années, la mise en place du SSL sur un site internet est devenu obligatoire. En effet, cela joue un rôle essentiel dans le classement de votre site sur les principaux moteurs de recherche. Dès lors, il vous est possible d'installer le certificat SSL Let's Encrypt sur votre hébergement Web et mettre en place une redirection Web vers votre site en HTTPS.

Cependant, il est possible que la mise en place de la redirection pose problème et que vous ayez une erreur Mixed Content au niveau de votre site en HTTPS. Cette procédure va vous expliquer ce qu'est cette erreur et vous aider à la corriger.

Qu'est-ce qu'un avertissement Mixed Content ? 

 Un avertissement Mixed Content lors du chargement de votre site a pour but de vous indiquer que les scripts de votre site se charge en HTTPS mais aussi, pour certains, en HTTP. Cependant, lorsque vous décidez de migrer vers le protocole HTTPS, tout doit focntionner en HTTPS.

Vous pouvez constater ci-dessous, un exemple de site ayant un avertissement Mixed Content sur Chrome pour un site Wordpress.

Il est à noter que Chrome est l'un des navigateurs les plus utilisés.

Firefox vous permettra aussi de visualiser l'erreur Mixed Content. Voici, ci-dessous, un exemple de ce que vous verrez sous Firefox.

Quel est la cause de cet avertissement Mixed Content ? 

Le problème survient principalement après la migration d'un site Wordpress de la version en HTTP vers HTTPS. En effet, les liens HTTP sont simplement transférés, ce qui provoque cet avertissement.

Cependant cela peut aussi être dû :

• Aux plugins et/ou thèmes utilisent des chemins absolus, par exemple http://domaine.com/style.css
• Les images et/ou URL sont codés en dur et pointe vers un lien en HTTP
• Vos liens pointent vers des scripts externes en HTTP
• Vous avez ajouté des vidéos en utilisant des liens en HTTP

Comment corriger les problèmes de mixed content ? 

1. Avant toute chose, il est nécessaire de pouvoir identifier les ressources posant problème au niveau de votre site Web. Pour cela, il est conseillé de démarrer "Chrome DevTools":

• Activer ChromeDev Tool sur Windows: Touche "F12"
• Sur Mac: Cmd + Opt + I

2. En vous rendant sur l'onglet "Console" de "Chrome DevTools", vous avez la possibilité de visualiser les ressources ayant posées problème. Il est fort probable que vous soyez obligé de raffraîchir la page afin de pouvoir accéder aux erreurs sur la console Sur l'image ci-dessus, nous pouvons facilement constater qu'un lien externe est toujours en HTTP et non en HTTPS. 

En allant sur l'onglet "Security" de "Chrome DevTools", il vous sera possible de visualiser les origines non sécurisées.

En dernier lieu, vous pouvez cliquer sur l'onglet "Network" afin de visualiser les requêtes.

Si vous ne disposez pas du navigateur Chrome, il existe des outils gratuits tel que Why Not Padlock. En effet, ce logiciel scannera une page de votre site et vous indiquera toutes les ressources non sécurisés comme suit:

3. Il est nécessaire de vérifier que les ressources posant problème actuellement sont bien accessible en HTTPS. Par exemple, pour l'URL suivant posant problème:

• http://fonts.googleapis.com/css?family=Open+Sans:400,700

Vérifiez que ce dernier est aussi acessible en remplaçant HTTP:// par HTTPS://

4. Plusieurs manières existent afin de rechercher et remplacer les URLs posant problème sur votre site. Si vous utiliser Wordpress, il existe de nombreux plugins permettant de vous aider à résoudre les problèmes de Mixed Content tel que "SSL Insecure" ou "Really Simple SSL". Cependant, il est préférable de modifier les URLs manuellement au niveau de votre base de données. Pour cela, vous pouvez utiliser le plugin "Better, Search Replace" en suivant la procédure suivante:

• Connectez-vous à votre Tableau de bord Wordpress, cliquez sur "Extension/Ajouter" . Recherchez le plugin "Better Search Replace", installez-le et activez le. 

• Rendez-vous sur "Outils" et cliquez sur "Better Search Replace".

• Indiquez le domaine en HTTP dans "Rechercher" puis le domaine en HTTPS dans "Remplacer par".

Après avoir recherché et remplacé les URLs, il est nécessaire d'effectuer une nouvelle vérification de votre site. En effet, il se peut que des avertissements "Mixed Content" soit encore visible sur ce dernier. Dans ce cas, il vous sera nécessaire de vous rendre sur la page PHP concernée par le problème afin d'en modifier le lien pour celui en HTTPS.

Il est à noter que si vous utilisez un plugin tel que "Elementor", il vous sera nécessaire de modifier l'URL sur les paramètres de ce plugin. De plus, avant d'effectuer une nouvelle vérification du fonctionnement de votre site, il est préférable de vider tous les caches de ce dernier.

Comment configurer le fichier .htaccess afin de corriger l'erreur Mixed Content ?

Que vous utilisiez un CMS tel que Wordpress ou Prestashop où que vous ayez codé vous-même votre site, il vous est possible d'utiliser la directive "Content-Security-Policy" sur votre fichier .htaccess. En effet, cela vous permettra de mettre à jour toutes les requêtes , y compris les problèmes de "Mixed Content" vers HTTPS.

La directive à mettre en place est la suivante:

Header always set Content-Security-Policy "upgrade-insecure-requests;"

Conclusion

Vous êtes désormais en mesure de corriger rapidement les problèmes de Mixed Content sur votre site internet. Dans la plupart des cas, ces actions résoudront votre problème rapidement.

N'hésitez pas à partager vos remarques et questions en commentaire.