La gestion de votre site WordPress par HTTPS n’est plus facultative. Non seulement c’est plus sûr (tout est crypté, rien n’est transmis en clair), mais cela permet aussi d’établir de la confiance, c’est un facteur de classement dans les moteurs de recherche et cela fournit des données de référence plus précises. Malheureusement, lors de la migration de HTTP vers HTTPS, les propriétaires de sites web peuvent rencontrer plusieurs problèmes. L’un d’entre eux est celui des « avertissements de contenu mixte ».
Les problèmes de performance liés au cryptage ont été résolus en grande partie grâce à HTTP/2, et Let’s Encrypt a changé tout le secteur en vous offrant un moyen facile d’obtenir des certificats SSL gratuits.
Plus important encore pour les entreprises en ligne, les navigateurs web tels que Google Chrome et Mozilla Firefox sévissent contre les sites qui ne fonctionnent pas en HTTPS, et affichent des avertissements plus stricts à l’intention des visiteurs potentiels. Par exemple, si vous utilisez les anciennes versions de TLS, vous pouvez rencontrer des notifications ERR_SSL_OBSOLETE_VERSION dans Chrome. Les avertissements sont la dernière chose que vous voulez que vos visiteurs voient.
Pour vous aider à éviter ces problèmes, nous vous proposons un guide détaillé sur la manière de migrer de HTTP vers HTTPS. Cependant, après avoir suivi ce processus, vous pourriez encore voir des avertissements de contenu mixte (mixed content).
Aujourd’hui, nous allons vous montrer différentes façons de résoudre ce problème sur votre site WordPress.
Vous préférez regarder la version vidéo ?
Qu’est-ce qu’un avertissement de contenu mixte ?
Un avertissement de contenu mixte apparaît dans le navigateur d’un utilisateur lorsque le site WordPress qu’il essaie de visiter charge des scripts ou du contenu HTTPS et HTTP en même temps. Cela peut poser des problèmes, car HTTP et HTTPS sont des protocoles complètement distincts.
Lorsque vous migrez vers HTTPS, tout doit passer par ce protocole, y compris vos images, vos fichiers JavaScript, etc. Vous trouverez ci-dessous quelques exemples de ce qui peut se passer si une partie de votre contenu continue à se charger par HTTP.
Exemples d’avertissement de contenu mixte
Chrome est actuellement le meilleur navigateur, utilisé par plus de 77 % des internautes. L’avertissement suivant est donc celui que la plupart de vos visiteurs verraient :
Bien sûr, tout le monde n’utilise pas Chrome.
Voici un exemple de ce qui se passe dans Firefox lorsqu’un avertissement de contenu mixte s’affiche sur un site WordPress :
Voici un exemple de ce à quoi ressemble cet avertissement dans Microsoft Edge :
Et voici comment il apparaît dans Internet Explorer :
Comme vous pouvez le voir, Internet Explorer est probablement l’un des pires endroits pour faire apparaître cet avertissement, car il casse le rendu de la page jusqu’à ce que l’on clique sur la popup.
Ce n’est pas une erreur que vous voulez que les visiteurs de n’importe quel navigateur voient. Elle peut être corrigée, mais vous devez d’abord comprendre pourquoi elle se produit.
Quelles sont les causes des avertissements de contenu mixte ?
Nous avons constaté que la plupart des avertissements de contenu mixte apparaissent juste après la migration d’un site WordPress de HTTP vers HTTPS. Certains liens HTTP sont simplement reportés, ce qui déclenche des avertissements de contenu mixte.
Voici quelques autres causes de cet avertissement :
- Vous venez d’ajouter un nouveau service ou une extension sur votre site. En particulier, les développeurs utilisent parfois des chemins absolus (http://votredomaine.com/style.css) dans les extensions ou les thèmes pour faire des liens vers le CSS et le JavaScript, au lieu d’utiliser des chemins relatifs (/style.css).
- Vos images ont des URL codées en dur (comme http://votredomaine.com/image.png) qui passent par HTTP. Ces URL peuvent se trouver dans des articles, des pages ou même des widgets.
- Vous vous connectez à des versions HTTP de scripts externes (jQuery hébergé, Font Awesome, ).
- Vous avez intégré des scripts vidéo qui utilisent HTTP au lieu de HTTPS.
Malheureusement, il se peut que vous ne découvriez pas la véritable source du problème avant d’avoir commencé le dépannage.
Dans cette optique, examinons quelques méthodes que vous pouvez utiliser pour corriger les avertissements de contenu mixte.
Comment corriger les avertissements de contenu mixte (4 étapes)
Vous pouvez suivre les quatre simples étapes ci-dessous pour corriger vos avertissements de contenu WordPress mixte. Ce processus suppose que vous avez déjà fait ce qui suit :
- Installation d’un certificat SSL
- Redirection du HTTP vers le HTTPS (à l’échelle du site)
Nous utiliserons un site de développement dans les exemples suivants.
Étape 1 : Découvrir quelles ressources sont chargées via HTTP
La première chose à faire est de déterminer quelles ressources sont encore chargées via HTTP.
N’oubliez pas que ces avertissements peuvent ne se produire que dans certaines zones de votre site, et pas globalement. Allez sur la page qui déclenche l’avertissement et lancez Chrome DevTools :
- Windows : F12 ou CTRL + Shift + I
- macOS : Cmd + Opt + I
Vous pouvez également ouvrir Chrome DevTools dans le menu Outils de votre navigateur :
Il existe plusieurs endroits où vous pouvez vérifier quelles ressources ne sont pas chargées par HTTPS.
Le premier est l’onglet Console. Notez que vous devrez peut-être actualiser la page après avoir ouvert Chrome DevTools pour qu’elle charge tout correctement .
Si des erreurs de contenu mixte sont présentes, elles seront surlignées en rouge ou en jaune. En général, elles sont accompagnées d’une information expliquant que « Cette requête a été bloquée ; le contenu doit être servi via HTTPS ». Cela signifie que les réglages du navigateur sont configurés pour bloquer automatiquement tout contenu HTTP.
Afin de garantir que les pages ne se chargent que par HTTPS, Chrome a commencé à bloquer par défaut le contenu mixte avec Chrome 79. Plus récemment, il a déployé des fonctionnalités permettant de mettre à jour automatiquement les images et les médias mixtes.
Par conséquent, lorsque vous utilisez Chrome DevTools, vous pouvez voir des messages de contenu mixte indiquant que certains éléments demandés ont été automatiquement mis à niveau :
Ici, nous pouvons clairement voir qu’il y a une variété d’éléments peu sûrs à l’origine des avertissements de contenu mixte, y compris une feuille de style et un script.
Vous remarquerez également qu’une requête a été faite pour image.jpg non sécurisée, qui a été automatiquement mise à jour en HTTPS. (Remarque : si cette image était dans un autre navigateur que Chrome, elle ne serait pas automatiquement mise à niveau).
Vous pouvez également consulter l’onglet Sécurité de Chrome DevTools. Cela vous affichera toute origine non sécurisée :
Sous l’onglet Réseau, vous pouvez également trouver une liste des requêtes bloquées :
Si vous n’utilisez pas Chrome, ou si vous voulez juste un résumé rapide des erreurs, vous pouvez aussi utiliser un outil gratuit comme Why No Padlock.
Il scanne une page individuelle et vous montre toutes les ressources non sûres :
Cet outil est facile à utiliser. Il vous suffit de saisir votre URL et de cliquer sur Test Page, et il vous affichera les erreurs éventuelles. En plus, c’est gratuit !
Vérification groupée des avertissements HTTPS
Si le reste de votre site vous inquiète, vous pouvez le vérifier globalement. Voici quelques options recommandées pour le faire :
- Il existe un petit outil gratuit appelé SSL Check de JitBit, que vous pouvez utiliser pour parcourir votre site HTTPS et rechercher des images et des scripts non sécurisés qui déclencheront un message d’avertissement dans les navigateurs. Le nombre de pages explorées est limité à 400 par site web.
- L’outil d’audit de site par Ahrefs a la capacité de détecter les contenus mixtes HTTPS/HTTP. Si vous avez déjà accès à cette solution, ou si un membre de votre équipe commerciale y a accès, cela peut être un excellent moyen d’être minutieux.
- HTTPS Checker est un logiciel que vous pouvez installer pour scanner votre site. Il peut vous aider à vérifier les avertissements et le contenu « non sécurisé » après de gros changements. Il est disponible sur Windows, Mac et Ubuntu. Il est gratuit et vous permet de vérifier jusqu’à 500 pages par analyse.
- SSL Insecure Content Fixer est une extension WordPress que vous pouvez installer sur votre site pour découvrir les erreurs qui conduisent à des avertissements de contenu mixte. Son utilisation est gratuite, et elle effectue même automatiquement des corrections pour résoudre les erreurs.
L’utilisation de l’un des outils ci-dessus peut vous aider à gagner du temps par rapport à la vérification manuelle de chaque page de votre site pour détecter les avertissements et les erreurs de contenu mixte. Pour une vérification approfondie des erreurs potentielles sur votre site, vous pouvez envisager d’utiliser une combinaison de ces solutions.
Étape 2 : Vérifier si les ressources HTTP sont accessibles via HTTPS
L’étape suivante consiste à confirmer que les ressources chargées par HTTP sont accessibles par HTTPS. Elles le sont très probablement, il suffit de mettre à jour les liens.
À titre d’exemple, disons que nos erreurs de contenu mixte ont mis en évidence le script jQuery et une image.jpg non sécurisés :
- http://ajax.googleapis.com/ajax/libs/jquery/3.31/jquery.min.js
- http://example-site.com/wp-content/50d00acf6e4%2Fpuppy-thumb.jpg?v=1600261043278
Si nous prenons ces deux URL, les saisissons dans la barre d’adresse de notre navigateur et remplaçons « http » par « https » au début, nous pouvons voir qu’elles se chargent très bien. Il nous suffit donc de faire une recherche et un remplacement sur notre site.
Étape 3 : Effectuer une recherche et un remplacement dans WordPress
Il existe de nombreuses façons d’effectuer une recherche et un remplacement dans WordPress. Dans cette section, nous allons vous présenter deux options recommandées différentes.
Si vous êtes curieux, nous vous déconseillons d’utiliser un outil tel que Really Simple SSL. Bien que ce soit une excellente extension, il est préférable de ne pas se fier à une telle solution sur le long terme. Vous ne reviendrez pas à HTTP plus tard, il est donc préférable de le faire correctement et de mettre à jour vos URL HTTP dans votre base de données (comme nous vous le montrons ci-dessous).
Si vous êtes un client de Kinsta, vous pouvez utiliser notre outil de recherche et de remplacement, qui est disponible directement dans le tableau de bord de MyKinsta.
Allez à la page Outils de votre site et cliquez sur Chercher et remplacer :
Ensuite, dans le champ de recherche, saisissez la valeur que vous souhaitez rechercher dans la base de données.
Dans ce cas, nous utiliserons notre domaine HTTP : http://kinstalife.com. Cliquez ensuite sur le bouton Chercher. L’outil de recherche et de remplacement affichera le nombre d’occurrences pour la chaîne donnée.
Cochez la case Remplacer pour poursuivre le processus de remplacement. Dans le champ Remplacer par, saisissez ce qui doit remplacer la valeur que vous recherchez. Dans ce cas, nous utiliserons notre domaine HTTPS : https://kinstalife.com.
Nous recommandons également de laisser cochée la case Vider le cache quand c’est prêt, afin de purger automatiquement le cache Kinsta une fois le processus de recherche et de remplacement terminé. Enfin, cliquez sur le bouton Remplacer :
Important : veillez à ne pas inclure d’espace en tête ou à la fin de ces champs, car cela pourrait produire des résultats indésirables.
Alternatives pour rechercher et remplacer
Si vous n’utilisez pas Kinsta, vous pouvez accomplir cette même tâche avec l’extension gratuite Better Search Replace, puis la supprimer simplement une fois que vous avez terminé :
Vous pouvez télécharger cet outil à partir du répertoire des extensions WordPress, ou en le recherchant dans votre tableau de bord WordPress.
Après l’avoir activé, il suffit de rechercher votre domaine HTTP (http://yourdomain.com) et de le remplacer par votre domaine HTTPS (https://yourdomain.com) :
Vous pouvez également effectuer une recherche et un remplacement avec le script PHP interconnect/it Search Replace DB ou WP-CLI.
Consultez notre vidéo pour en savoir plus sur l’utilisation du rechercher et remplacer dans WordPress :
Étape 4 : Confirmer que les avertissements de contenu mixte ont disparu
Après avoir terminé la recherche et le remplacement, vous devrez revérifier votre site pour confirmer que les avertissements de contenu mixte ont disparu. Nous vous recommandons d’aller sur l’interface publique de votre site et de cliquer sur quelques pages tout en regardant l’indicateur d’état du navigateur dans la barre d’adresse.
Sur notre site, nous pouvons voir qu’image.jpg est maintenant corrigée, mais un avertissement de script non sécurisé demeure.
C’est parce que nous avons effectué une recherche et un remplacement sur les ressources chargées à partir de notre propre domaine. L’avertissement jQuery est causé par un script externe qui doit être mis à jour manuellement :
Dans ce cas, le script a dû être ajouté manuellement à notre en-tête WordPress (header.php). Il devait utiliser une URL relative, nous l’avons donc mis à jour en //ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js :
La recherche et le remplacement régleront très probablement tous vos problèmes.
En général, vous ne rencontrerez des problèmes supplémentaires que si vous avez quelque chose de codé en dur sur votre site WordPress.
Si vous pensez qu’un script externe est codé en dur dans une de vos extensions ou un de vos thèmes, et que vous avez des difficultés à le retrouver, n’hésitez pas à contacter le développeur concerné pour obtenir de l’aide.
Exemples d’avertissements de contenu mixte
Vous savez donc maintenant ce qu’il faut chercher pour corriger ces erreurs de contenu mixte.
Voici un exemple de ce qui se passe dans Chrome lorsque tout se charge correctement via HTTPS, sans avertissement de contenu mixte :
Firefox proposera un message similaire :
Et voici ce que vous verrez dans Microsoft Edge :
Bien que la formulation du message puisse varier légèrement selon le navigateur que vous utilisez, vous devriez voir une notification indiquant une connexion sécurisée. Si c’est le cas, vous saurez que vous n’êtes plus confronté à des erreurs de contenu mixte sur votre site WordPress.
Qu’en est-il de HSTS ?
Certains d’entre vous se demandent peut-être pourquoi vous ne pouvez pas simplement utiliser le HSTS (HTTP Strict Transport Security) pour résoudre ce problème. HSTS a été créé pour forcer le navigateur à utiliser des connexions sécurisées lorsqu’un site fonctionne sur HTTPS.
Il s’agit d’un en-tête de sécurité que vous pouvez ajouter à votre serveur web et qui se reflète dans l’en-tête de réponse sous la forme « Strict-Transport-Security ».
Cependant, HSTS n’est pas une solution miracle pour tous les avertissements de contenu mixte. HSTS ne fait que gérer les redirections, alors que l’avertissement de contenu mixte est une fonction du navigateur lui-même. Vous n’avez pas non plus le contrôle sur l’activation de HSTS par les sites tiers.
Par conséquent, vous devrez toujours mettre à jour vos URL http://. Esa Jokinen plonge plus profondément dans les raisons avec cette discussion sur les défaillances de serveur.
Recommandations supplémentaires (cas particuliers)
Si vous utilisez le constructeur de pages Elementor, vous devez également aller dans les réglages d’Elementor et y mettre à jour l’URL de votre site, afin que les fichiers CSS se régénèrent avec la nouvelle URL.
Une fois que vous avez fait cela, le fait de vider le cache devrait résoudre les éventuels avertissements dus à Elementor. De plus, si vous utilisez le CDN Kinsta, il est recommandé de purger également la zone CDN.
Résumé
Il peut être frustrant de traiter des avertissements de contenu mixte, surtout lorsqu’ils peuvent être attribués à plusieurs causes. Heureusement, il existe quelques mesures simples que vous pouvez prendre pour remédier à ces problèmes.
Dans la plupart des cas, une simple recherche et un remplacement devraient résoudre rapidement vos avertissements de contenu mixte et permettre à votre site de revenir à la normale en seulement quelques minutes. Si cela ne résout pas tout, il est probable qu’il reste un ou deux scripts codés en dur. Vous devrez les trouver et les mettre à jour manuellement afin de corriger cette erreur ou engager un développeur qui pourra le faire pour vous.
Si vous avez des commentaires ou si vous rencontrez des problèmes, faites-le nous savoir ci-dessous dans la section des commentaires !
Rédacteur en chef chez Kinsta et consultant en marketing de contenu pour les développeurs de plugins WordPress. Connectez-vous avec Matteo sur Twitter.
Laisser un commentaire