Qu'est-ce que le contenu mixte ?

Le contenu mixte se produit lorsqu'une page web chargée via une connexion HTTPS sécurisée inclut des ressources (images, scripts, feuilles de style, polices, iframes) chargées via une connexion HTTP non sécurisée. C'est un problème de sécurité car les ressources HTTP peuvent être interceptées, modifiées ou remplacées par un attaquant, même si la page principale est elle-même chiffrée. L'icône de cadenas dans le navigateur disparaît et les visiteurs voient des avertissements qui ébranlent leur confiance dans votre site.

Contenu mixte passif vs actif

Les navigateurs distinguent deux catégories de contenu mixte et les traitent différemment :

• Contenu mixte passif (d'affichage) : cela inclut les images, l'audio et la vidéo chargés via HTTP. Le risque est plus faible car ces ressources ne peuvent pas modifier directement le comportement de la page. Un attaquant pourrait remplacer une image (en affichant un contenu inapproprié, par exemple), mais ne peut pas injecter de code. Les anciens navigateurs chargeaient le contenu mixte passif avec un avertissement. Les navigateurs modernes le bloquent de plus en plus, bien que certains l'autorisent encore avec un indicateur de sécurité dégradé.
• Contenu mixte actif : cela inclut les scripts, feuilles de style, iframes, polices et requêtes XMLHttpRequest chargés via HTTP. Le contenu mixte actif est bien plus dangereux car un script altéré peut voler des identifiants de connexion, rediriger l'utilisateur ou injecter des logiciels malveillants dans la page. Tous les navigateurs modernes bloquent le contenu mixte actif par défaut. La ressource ne se charge tout simplement pas, ce qui peut casser entièrement la fonctionnalité de la page.

Comment les navigateurs gèrent le contenu mixte

Le comportement des navigateurs est devenu plus strict au fil des années. Voici ce qui se passe aujourd'hui :

• Chrome : bloque tout le contenu mixte actif. Depuis la version 80, Chrome met aussi automatiquement à niveau les images, audio et vidéos mixtes vers HTTPS. Si la version HTTPS n'existe pas, la ressource est bloquée.
• Firefox : bloque le contenu mixte actif et affiche une icône de bouclier dans la barre d'adresse. Le contenu mixte passif déclenche un avertissement mais peut encore se charger dans certains cas.
• Safari : bloque le contenu mixte actif. Le contenu mixte passif peut se charger avec un avertissement selon la version.
• Edge : suit le même comportement basé sur Chromium que Chrome.

La tendance est claire : les navigateurs s'orientent vers le blocage de tout contenu mixte, actif et passif. Corriger les problèmes de contenu mixte n'est plus optionnel.

Trouver les sources de contenu mixte

Plusieurs moyens permettent d'identifier le contenu mixte sur votre site WordPress :

• Console DevTools du navigateur : ouvrez les DevTools de Chrome (F12), allez dans l'onglet Console et recherchez les avertissements jaunes ou les erreurs rouges concernant le contenu mixte. Chrome vous indique exactement quelle URL de ressource pose problème.
• Why No Padlock : un outil en ligne gratuit (whynopadlock.com) qui analyse une URL et liste toutes les ressources non sécurisées trouvées sur la page. Utile pour une vérification rapide sans ouvrir les DevTools.
• Rapports InspectWP : InspectWP analyse automatiquement votre page à la recherche de ressources chargées via HTTP sur une page HTTPS et les liste toutes une par une. C'est le moyen le plus rapide d'obtenir une vue complète sur l'ensemble de votre site.
• SSL Labs : bien qu'il s'agisse principalement d'un outil de vérification de configuration SSL/TLS, il peut également signaler les problèmes de contenu mixte sur la page testée.

Causes courantes de contenu mixte dans WordPress

Les problèmes de contenu mixte dans WordPress proviennent généralement de quelques sources récurrentes :

• URL HTTP codées en dur dans le contenu : si vous avez migré votre site de HTTP à HTTPS, vos anciens articles et pages peuvent encore contenir des URL d'images et des liens commençant par http://. C'était correct à l'époque mais c'est devenu du contenu mixte après la migration.
• Anciennes ressources de thème : certains thèmes anciens ou thèmes enfants ont des URL HTTP codées en dur dans leurs fichiers CSS, JavaScript ou modèles. Une feuille de style chargeant une image de fond depuis http://example.com/bg.jpg crée du contenu mixte.
• Ressources d'extensions : les extensions qui chargent des scripts ou styles externes via HTTP causent du contenu mixte. C'est particulièrement courant avec des extensions anciennes ou mal entretenues qui n'ont pas été mises à jour pour HTTPS.
• Intégrations externes : iframes, vidéos intégrées ou widgets de services tiers qui utilisent des URL HTTP. Si le service tiers prend en charge HTTPS (la plupart le font aujourd'hui), passer l'URL en HTTPS résout le problème.
• Configuration CDN : si votre CDN n'est pas configuré pour servir les ressources via HTTPS, chaque fichier CSS, JS et image livré via le CDN devient du contenu mixte.

Corriger le contenu mixte dans WordPress

La solution dépend de la source du problème. Voici les solutions les plus courantes :

• Remplacement d'URL en base de données : pour les URL HTTP codées en dur dans le contenu des articles, utilisez un outil de recherche-remplacement pour mettre à jour toutes les occurrences de http://yourdomain.com en https://yourdomain.com dans la base de données. L'extension Better Search Replace est largement utilisée pour cela. Elle vous permet de prévisualiser les modifications avant de les appliquer et fonctionne sur toutes les tables de la base de données. Créez toujours une sauvegarde de la base de données avant d'effectuer une recherche-remplacement.
• SSL Insecure Content Fixer : cette extension WordPress corrige automatiquement les URL non sécurisées à la volée. Elle réécrit les URL HTTP en HTTPS dans la sortie de la page sans modifier la base de données. C'est une bonne solution temporaire pendant que vous corrigez les causes profondes, mais elle ajoute une légère surcharge de performance car elle traite chaque chargement de page.
• Really Simple SSL : une autre extension populaire qui gère la transition HTTP vers HTTPS. Elle corrige le contenu mixte en filtrant la sortie de la page, met en place des redirections et met à jour les paramètres d'URL du site WordPress.
• Corrections manuelles de thème et d'extension : si le contenu mixte provient d'un fichier de thème ou d'extension, modifiez le code source pour remplacer http:// par https:// ou, mieux encore, utilisez des URL relatives au protocole (//example.com/file.js) ou la fonction WordPress esc_url() pour générer les URL dynamiquement.

Remplacement d'URL en base de données en détail

La manière la plus complète de corriger le contenu mixte issu d'anciens contenus d'articles est une recherche-remplacement en base de données. Voici la procédure :

1. Sauvegardez votre base de données. Ce n'est pas optionnel ; une mauvaise recherche-remplacement peut casser entièrement votre site.
2. Installez et activez l'extension Better Search Replace.
3. Recherchez http://yourdomain.com et remplacez par https://yourdomain.com.
4. Sélectionnez toutes les tables de la base de données (en particulier wp_posts, wp_postmeta et wp_options).
5. Lancez d'abord un essai à blanc pour voir combien de remplacements seraient effectués.
6. Si les chiffres semblent corrects, exécutez le remplacement réel.

Pour les utilisateurs de WP-CLI, la commande wp search-replace 'http://yourdomain.com' 'https://yourdomain.com' --all-tables fait la même chose en ligne de commande. WP-CLI gère correctement les données sérialisées dans la base de données, ce qui est essentiel pour les options et les paramètres de widgets.

Redirection HTTPS via .htaccess

Après avoir corrigé le contenu mixte, assurez-vous que toutes les requêtes HTTP vers votre site sont redirigées vers HTTPS. Cela empêche les visiteurs et les moteurs de recherche d'accéder à la version HTTP. Sur les serveurs Apache, ajoutez ces lignes à votre fichier .htaccess :

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Sur les serveurs Nginx, ajoutez ceci à votre bloc serveur :

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;
    return 301 https://$server_name$request_uri;
}

Cette redirection ne corrige pas le contenu mixte à elle seule, mais elle garantit que personne ne visite accidentellement la version HTTP de votre site. Combinée au remplacement d'URL en base de données et aux corrections d'extensions, elle complète la migration vers HTTPS.

Ce que vérifie InspectWP

InspectWP analyse votre page à la recherche de toute ressource chargée via HTTP sur une page HTTPS et liste chacune d'elles, y compris le type de ressource et l'URL complète. Cela vous donne une liste de contrôle claire de ce qu'il faut corriger. Les pages sans problèmes de contenu mixte affichent un résultat propre, confirmant que votre configuration HTTPS fonctionne correctement.