Exécuter votre site WordPress sur HTTPS n’est plus optionnel. 🔒 Non seulement c’est plus sûr (tout est crypté, rien n’est transmis en texte clair), mais cela construit aussi la confiance, c’est un facteur de classement SEO, et cela fournit des données de référence plus précises. Les problèmes de performance liés au chiffrement ont été corrigés en grande partie grâce au HTTP/2 et Let’s Encrypt a changé l’ensemble de l’industrie en vous fournissant un moyen facile d’obtenir des certificats SSL gratuits.

Pour certaines entreprises, cependant, l’une des raisons les plus importantes est que les navigateurs Web tels que Chrome et Firefox sévissent contre ceux qui ne passent pas sur HTTPS et affichent des avertissements plus stricts. C’est la dernière chose que vous voulez que vos visiteurs voient !

Nous avons un guide détaillé sur la façon de migrer de HTTP vers HTTPS, et un problème très courant que les propriétaires de sites Web rencontrent par la suite est les avertissements « mixed content ». Aujourd’hui, nous allons vous montrer quelques différentes façons de corriger ces problèmes sur votre site WordPress.

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

Un avertissement de contenu mixte apparaît dans le navigateur d’un utilisateur lorsque le site WordPress charge à la fois des scripts HTTPS et HTTP ou du contenu en même temps. Vous ne pouvez pas charger les deux car il s’agit de protocoles complètement séparés. Lorsque vous migrez vers HTTPS, tout doit fonctionner sur HTTPS.

Wired a en fait documenté leur transition de HTTP à HTTPS et un problème d’avertissement de contenu mixte qu’ils ont rencontré :

« L’un des plus grands défis du passage au HTTPS est de préparer l’ensemble de nos contenus à être diffusés via des connexions sécurisées. Si une page est chargée par HTTPS, toutes les autres ressourcess (comme les images et les fichiers Javascript) doivent également être chargées par HTTPS. Nous voyons un grand nombre de rapports sur ces problèmes de « contenu mixte », ou d’événements dans lesquels une ressource HTTP non sécurisée est chargée dans le contexte d’une page HTTPS sécurisée. Pour bien faire notre déploiement, nous devons nous assurer que nous avons moins de problèmes de contenu mixte – que nous diffusons le plus de contenu de WIRED.com possible en toute sécurité. »

Voici quelques exemples de ce qui se passe dans les navigateurs si vous ne corrigez pas ces avertissements.

Exemple d’avertissement de contenu mixte dans Chrome

Voici un exemple de ce qui se passe dans Chrome lorsqu’un avertissement Mixed Content se déclenche sur un site WordPress. Selon NetMarketShare, Chrome est actuellement en tête du peloton en termes de part de marché des navigateurs, étant utilisé par plus de 60% du web. L’avertissement suivant est donc très probablement ce que la plupart de vos visiteurs verront.

Avertissement de contenu mixte dans Chrome

Avertissement de contenu mixte dans Chrome

Exemple d’avertissement de contenu mixte dans Firefox

Voici un exemple de ce qui se passe dans Firefox lorsqu’un avertissement de contenu mixte se déclenche sur un site WordPress.

Avertissement de contenu mixte dans Firefox

Avertissement de contenu mixte dans Firefox

Exemple d’avertissement de contenu mixte dans Microsoft Edge

Voici un exemple de ce qui se passe dans le navigateur Edge de Microsoft lorsqu’un avertissement de contenu mixte se déclenche sur un site WordPress.

Avertissement de contenu mixte dans Microsoft Edge

Avertissement de contenu mixte dans Microsoft Edge

Exemple d’avertissement de contenu mixte sur Internet Explorer

Voici un exemple de ce qui se passe dans Internet Explorer lorsqu’un avertissement de contenu mixte se déclenche. Comme vous pouvez le voir, IE est probablement l’un des pires parce qu’il casse en fait le rendu de la page jusqu’à ce que le popup soit cliqué. Heureusement, Internet Explorer ne détient plus cette part de marché des navigateurs.

Avertissement concernant le contenu mixte d'Internet Explorer

Avertissement concernant le contenu mixte d’Internet Explorer

Qu’est-ce qui cause les avertissements de contenu mixte ?

Nous avons constaté que les avertissements de contenu mixte apparaissent le plus souvent après que quelqu’un ait migré son site WordPress de HTTP vers HTTPS. Les liens HTTP sont simplement transférés, ce qui provoque le déclenchement d’avertissements de contenu mixte. Une autre raison pourrait être que vous venez d’ajouter un nouveau service ou plugin.

Voici quelques exemples supplémentaires de ce qui peut causer un avertissement :

  • Les développeurs de plugins utilisent parfois des chemins absolus (http://votredomaine.com/style.css) dans leurs plugins ou thèmes pour créer des liens vers CSS et JavaScript plutôt que des chemins relatifs (/style.css).
  • Les images ont des URLs codées en dur (http://votredomaine.com/image.png) qui pointent vers HTTP. Il peut s’agir d’un article, d’une page ou même d’un widget.
  • Votre lien pointe vers les versions HTTP des scripts externes. (jQuery, Font Awesome, etc.)
  • Vous avez intégré des scripts vidéo utilisant HTTP au lieu de HTTPS.

Comment réparer les avertissements Mixed Content

Suivez les étapes simples ci-dessous pour corriger vos avertissements de contenu mixte WordPress. Cela suppose que vous avez déjà fait ce qui suit :

Nous utiliserons notre site de développement (wpdev.ink) dans les exemples.

Étape 1

La première chose que vous devez faire est de savoir quelles ressources sont encore chargées par HTTP. Naviguez jusqu’à la page où cela se passe et lancez Chrome DevTools. Rappelez-vous qu’il se peut que cela ne se produise que dans certaines parties de votre site, et non partout.

  • Windows: F12 or CTRL + Shift + I
  •  MAC: Cmd + Opt + I)

Vous pouvez également ouvrir Chrome DevTools à partir du menu Outils.

Lancer Chrome DevTools

Lancer Chrome DevTools

Étape 2

Il y a quelques endroits où vous pouvez vérifier quelles ressources ne sont pas chargées par HTTPS. Le premier est l’onglet “Console”. Remarque : Il se peut que vous ayez besoin de rafraîchir la page après avoir ouvert Chrome DevTools pour qu’il puisse tout charger correctement.

Ci-dessous nous pouvons facilement voir qu’il y a une image non sécurisée liée à une version HTTP du site et un lien pointant vers une version hébergée en HTTP de jQuery.

Chrome DevTools contenu mixte dans la console

Chrome DevTools contenu mixte dans la console

Vous pouvez également consulter l’onglet “Sécurité”. Il vous montrera les origines non sécurisées et vous pouvez cliquer sur « Voir la requête dans le panneau réseau ». Remarque : Il se peut que vous ayez besoin de rafraîchir la page après avoir ouvert Chrome DevTools pour qu’il puisse tout charger correctement.

Sécurité Chrome DevTools

Sécurité Chrome DevTools

Enfin, vous pouvez consulter les requêtes dans l’onglet “Réseau”. Remarque : Il se peut que vous ayez besoin de rafraîchir la page après avoir ouvert Chrome DevTools pour qu’il puisse tout charger correctement.

Réseau Chrome DevTools

Réseau Chrome DevTools

Si vous n’utilisez pas Chrome, ou si vous voulez simplement un résumé rapide des erreurs, vous pouvez également utiliser un outil gratuit comme Why No Padlock. Il scanne une page individuelle et vous montre toutes les ressources non sécurisées.

Why No Padlock?

Why No Padlock?

Vérification des avertissements HTTPS en masse

Si vous êtes inquiet pour le reste de votre site, vous devrez peut-être faire le test en masse. Voici quelques options recommandées.

  • Il existe un petit outil gratuit appelé SSL Check de JitBit que vous pouvez utiliser pour parcourir votre site HTTPS WordPress et rechercher des images et des scripts non sécurisés qui déclencheront un message d’avertissement dans votre navigateur. Le nombre de pages parcourues est limité à 200 par site web.
  • L’outil de test Ahrefs a maintenant la capacité de détecter les contenus mixtes HTTPS/HTTP. Si vous y avez déjà accès, ou si un membre de votre équipe de marketing y a déjà accès, ce peut être une excellente façon d’être rigoureux.
  • HTTPS Checker est un logiciel de bureau que vous pouvez installer pour analyser votre site. Il peut vous aider à vérifier les avertissements et le contenu « non sécurisé » après de gros changements. Il est disponible sous Windows, Mac et Ubuntu. Le plan gratuit vous permet de consulter jusqu’à 100 pages.

Étape 3

L’étape suivante consiste à confirmer que les ressources chargées via HTTP sont accessibles via HTTPS. Elles le sont très probablement, vous n’avez qu’à mettre à jour les liens. Nous allons utiliser l’image non sécurisée et hébergée de jQuery.

  • http://wpdev.ink/wp-content/uploads/2018/06/website-never-done.jpg
  • http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Si nous prenons ces deux URLs, les saisissons dans la barre d’adresse de notre navigateur, et ajoutons HTTPS au début, nous pouvons voir qu’elles se chargent très bien. Par conséquent, il nous suffit de procéder à une recherche et un remplacement sur notre site.

Étape 4

Il existe de nombreuses façons d’effectuer une recherche et un remplacement WordPress. Dans cet article, nous vous présenterons deux options différentes recommandées.

Si vous êtes curieux, nous ne recommandons pas l’utilisation du plugin SSL Really Simple. Bien qu’il s’agisse d’un excellent plugin, vous ne devriez pas compter sur un plugin comme celui-ci à long terme. Vous ne migrerez pas vers HTTP plus tard, alors faites-le correctement et mettez à jour vos URLs HTTP dans votre base de données (comme nous allons vous le montrer ci-dessous).

Si vous êtes un client Kinsta, vous pouvez utiliser notre outil de recherche et remplacement qui est disponible directement dans le tableau de bord MyKinsta. Sous Sites, cliquez sur « Gérer » à côté du site sur lequel vous souhaitez effectuer une recherche et un remplacement. Cliquez ensuite sur « Outils » et vous trouverez l’outil de recherche et de remplacement en bas.

Outil de recherche et de remplacement Kinsta

Outil de recherche et de remplacement Kinsta

  1. Entrez dans le champ de recherche la valeur que vous souhaitez rechercher dans la base de données, qui est dans ce cas notre domaine HTTP : http://wpdev.ink.
  2. Saisissez dans la zone de remplacement la nouvelle valeur qui doit être utilisée pour remplacer la valeur que vous recherchez. Dans ce cas, c’est notre domaine HTTPS : https://wpdev.ink.
  3. Assurez-vous que l’option « Test » est sélectionnée en premier, car cela comptera combien de remplacements seront effectués sans que les remplacements ne soient effectués. Puis cliquez sur « Remplacer ».

Important : Veillez à ne pas inclure d’espaces au début ou à la fin dans les champs, car cela pourrait produire des résultats indésirables.

HTTP vers HTTPS avec l’outil de recherche et remplacement

HTTP vers HTTPS avec l’outil de recherche et remplacement

Vous verrez un avertissement confirmant que vous voulez exécuter la commande pour calculer combien de remplacements seront effectués. Cliquez sur « Remplacer » pour confirmer. Remarque : En mode « Test », aucune modification de la base de données n’est effectuée.

Recherche et remplacement, calculer les remplacements

Recherche et remplacement, calculer les remplacements

Vous verrez alors le nombre total de remplacements qui seront effectués.

Nombre de remplacements

Nombre de remplacements

Vous pouvez ensuite désélectionner « Test » et cliquer à nouveau sur « Remplacer » pour effectuer la recherche et le remplacement en apportant des modifications dans votre base de données. Note : Une sauvegarde est automatiquement effectuée lors de son exécution (identifiant de la sauvegarde : beforesearchandreplace). Ainsi, vous pouvez toujours revenir en arrière cas de besoin.

Recherche et remplacement en direct

Recherche et remplacement en direct

Vous verrez alors une confirmation finale du nombre de remplacements effectués.

Confirmation de la recherche en direct et du remplacement

Confirmation de la recherche en direct et du remplacement

Si vous n’êtes pas un client Kinsta, vous pouvez faire la même chose avec le plugin gratuit Better, Search Replace puis supprimer le plugin une fois terminé.

Meilleur plugin de recherche et remplacement

Meilleur plugin de recherche et remplacement

Vous pouvez le télécharger à partir du référentiel WordPress ou en le recherchant dans votre tableau de bord WordPress sous « Ajouter » plugins. Après l’avoir activé, recherchez simplement votre domaine HTTP (http://votredomaine.com) et remplacez-le par votre domaine HTTPS (https://votredomaine.com).

Meilleure option de recherche et remplacement

Meilleure option de recherche et remplacement

Alternativement, vous pouvez aussi faire une recherche et un remplacement par le script PHP interconnect/it Search Replace DB ou WP-CLI.

Étape 5

Après avoir terminé la recherche et le remplacement, vous devrez vérifier votre site pour confirmer que les avertissements de contenu mixte ont disparu. Nous vous recommandons de visiter 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 que l’image non sécurisée est maintenant corrigée, mais l’avertissement jQuery hébergé demeure. La raison en est que nous avons lancé une recherche et un remplacement sur le chargement des ressources de notre propre domaine. Il s’agit d’un script externe qui doit être mis à jour manuellement.

Avertissement de contenu mixte

Avertissement de contenu mixte

Dans ce cas, le script avait été ajouté manuellement dans notre en-tête WordPress (header.php). Le script doit utiliser une URL relative, nous l’avons donc mis à jour : //ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Script externe HTTP

Script externe HTTP

Pour la plupart d’entre vous, la recherche et le remplacement résoudra probablement tous vos problèmes. C’est vraiment ceux d’entre vous qui ont codé en dur quelque chose sur le site WordPress qui pourrait se heurter à des problèmes supplémentaires. Si vous pensez qu’il y a un script externe codé en dur dans l’un de vos plugins ou l’un de vos thèmes, et que vous avez du mal à le trouver, n’hésitez pas à demander l’aide du développeur.

Aucun avertissement de Mixed Content dans Chrome

Voici un exemple de ce qui se passe dans Chrome lorsque tout se charge correctement sur HTTPS sans avertissement de contenu mixte.

Chrome pas d'avertissement de contenu mixte

Chrome pas d’avertissement de contenu mixte

Aucun avertissement de Mixed Content dans Firefox

Voici un exemple de ce qui se passe dans Firefox lorsque tout se charge correctement sur HTTPS sans avertissement de contenu mixte.

Firefox pas d'avertissements de contenu mixte

Firefox pas d’avertissements de contenu mixte

Aucun avertissement de Mixed Content dans Microsoft

Voici un exemple de ce qui se passe dans Microsoft Edge lorsque tout se charge correctement sur HTTPS sans avertissement de contenu mixte.

Microsoft Edge pas d'avertissements de contenu mixte

Microsoft Edge pas d’avertissements de contenu mixte

Qu’en est-il du HSTS ?

Certains d’entre vous se demandent peut-être pourquoi vous ne pouvez pas simplement utiliser HSTS (HTTP Strict Transport Security) pour résoudre ce problème. Le 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 ajoutez à votre serveur Web et est reflété dans l’en-tête de réponse comme Strict-Transport-Security.

Le HSTS n’est pas une solution finale pour tous les avertissements de contenu mixte. HSTS ne gère que les redirections alors que l’avertissement de contenu mixte est une caractéristique du navigateur lui-même. Vous n’avez pas non plus le contrôle sur les sites tiers qui activent le HSTS. Par conséquent, vous devez toujours mettre à jour les URLs en http://.

Esa Jokinen approfondit les raisons de cette discussion sur ServerFault.

Recommandations supplémentaires (cas spéciaux)

  • Si vous utilisez le constructeur de pages Elementor, vous devez également aller dans les paramètres de Elementor et mettre à jour l’URL de votre site pour que les fichiers CSS se régénèrent avec la nouvelle URL. Une fois que vous avez fait ceci, vider le cache devrait supprimer tous les avertissements non sécurisés dus à Elementor.
  • Si vous utilisez le Kinsta CDN, il est recommandé de purger également la zone CDN.

Résumé

Pour la plupart d’entre vous, une simple recherche et un remplacement devrait résoudre rapidement vos avertissements de contenu mixte et ramener votre site à la normale en quelques minutes seulement. Si cela ne règle pas tout, c’est qu’il reste probablement un ou deux scripts qui sont codés en dur. Pour cela, vous devrez les trouver et les mettre à jour manuellement.

Si vous avez des commentaires ou si vous rencontrez des problèmes, faites-le nous savoir ci-dessous dans les commentaires.

40
Partages