Comment résoudre l'avertissement de contenu mixte (Mixed Content) ?

Vous avez installé un certificat SSL sur votre site, mais le cadenas dans la barre d'adresse ne s'affiche toujours pas ou indique « non sécurisé » avec un point d'exclamation. La cause la plus fréquente est le contenu mixte (mixed content) : alors que la page elle-même se charge en HTTPS, certaines de ses ressources sont encore appelées via HTTP. Dans cet article, nous expliquons comment repérer et résoudre durablement le problème.

Qu'est-ce que le contenu mixte ?

Lorsqu'une page sécurisée (https://) charge une ressource non sécurisée (http://), le navigateur considère cela comme une faille de sécurité. Il en existe deux types :

  • Contenu mixte passif : ressources comme les images, vidéos et sons. Le navigateur les charge généralement, mais retire le cadenas et inscrit un avertissement dans la console.
  • Contenu mixte actif : scripts, fichiers de style (CSS), iframes, appels XHR/fetch. Comme ils peuvent compromettre la page, ils sont bloqués par le navigateur et votre page apparaît cassée.

Étape 1 — Repérez les ressources fautives

Ouvrez les outils de développement du navigateur (F12) et regardez l'onglet Console. Les avertissements de contenu mixte y sont clairement listés :

Mixed Content: The page at 'https://alanadiniz.com/' was loaded over HTTPS,
but requested an insecure resource 'http://alanadiniz.com/img/logo.png'.
This content should also be served over HTTPS.

Chaque ligne indique quelle ressource est chargée en HTTP. Établissez cette liste pour déterminer les adresses à corriger.

Image : <avertissements de contenu mixte dans la console des DevTools>
La console des outils de développement liste une à une les ressources non sécurisées.

Étape 2 — Corrigez les adresses des ressources

La solution la plus durable consiste à passer les préfixes http:// des ressources de la page en https://. Si possible, utilisez des chemins relatifs au protocole ou relatifs à la racine, sans nom de domaine :

<!-- Incorrect -->
<img src="http://alanadiniz.com/img/logo.png">
<script src="http://cdn.ornek.com/lib.js"></script>

<!-- Correct -->
<img src="https://alanadiniz.com/img/logo.png">
<img src="/img/logo.png">                  <!-- relatif à la racine, le plus sûr -->
<script src="https://cdn.ornek.com/lib.js"></script>

N'oubliez pas non plus les définitions url(http://...) dans les fichiers CSS ni les valeurs background-image intégrées en ligne.

Étape 3 — Remplacez en masse les anciennes adresses de la base de données

Dans les systèmes de gestion de contenu (CMS), les anciens articles peuvent être truffés de liens http:// dans la base de données. Pour les mettre à jour en masse, vous pouvez utiliser une requête SQL. Faites impérativement une sauvegarde au préalable, puis exécutez une mise à jour de ce type :

-- Faites d'abord une SAUVEGARDE !
UPDATE icerikler
SET govde = REPLACE(govde, 'http://alanadiniz.com', 'https://alanadiniz.com');

Adaptez les noms de la table et des colonnes à votre propre schéma.

Étape 4 — Solution globale : upgrade-insecure-requests

S'il est difficile de corriger un à un des centaines d'anciens liens, vous pouvez ajouter un en-tête de sécurité qui demande au navigateur de promouvoir automatiquement toutes les requêtes HTTP vers le HTTPS. Cela fonctionne si une version HTTPS de la même ressource existe :

# Nginx
add_header Content-Security-Policy "upgrade-insecure-requests";
<!-- ou dans le <head> HTML -->
<meta http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests">

Cette méthode n'est pas une solution pour les ressources d'un serveur externe qui n'ont pas de version HTTPS ; pour ce type de ressources, remplacez-les par une alternative servie en HTTPS, ou déplacez-les sur votre propre serveur.

Étape 5 — Videz le cache et vérifiez

Après les modifications, videz le cache du navigateur et, le cas échéant, du CDN, puis ouvrez la page dans un onglet privé et confirmez dans F12 → Console qu'il ne reste plus d'avertissement. Si l'icône de cadenas est revenue, le problème est résolu.

Pièges fréquents

  • Adresses codées en dur (hardcoded) : liens http:// intégrés dans les fichiers de thème et d'extension.
  • Scripts externes de publicité/analytique : supprimez ou mettez à jour les ressources tierces ne prenant pas en charge le HTTPS.
  • Anciens codes d'intégration de réseaux sociaux : remplacez-les par des codes d'intégration récents et compatibles HTTPS.

Résumé

Le contenu mixte provient des ressources HTTP subsistant sur une page HTTPS et fait disparaître le cadenas. Repérez les fautifs dans la console, passez les adresses en https:// et, au besoin, appuyez-vous sur upgrade-insecure-requests. Si vous n'avez pas encore de certificat ou devez le renouveler, créez-le avec notre assistant SSL gratuit et téléchargez le paquet ZIP.