Erreur Mixed Content : Contenu Mixte HTTP/HTTPS

L'erreur de contenu mixte (mixed content) se produit lorsqu'une page HTTPS charge des ressources via HTTP non sécurisé. Cela peut inclure des images, des scripts JavaScript, des feuilles de style CSS, des polices, ou des requêtes AJAX. Les navigateurs modernes bloquent ces ressources pour protéger les utilisateurs.

Le contenu mixte compromet la sécurité de votre site HTTPS. Même si la page principale est chiffrée, une ressource HTTP peut être interceptée ou modifiée par un attaquant. C'est pourquoi les navigateurs sont de plus en plus stricts sur ce sujet.

Ce guide vous aide à identifier toutes les ressources causant des erreurs de contenu mixte et à les corriger. Nous verrons également comment prévenir ce problème lors de migrations HTTP vers HTTPS.

Symptômes du Contenu Mixte

Voici comment le contenu mixte se manifeste :

• Cadenas avec avertissement : au lieu du cadenas vert, vous voyez un cadenas gris avec un triangle d'avertissement ou un panneau d'information.
• Ressources bloquées : les images n'apparaissent pas, les scripts ne fonctionnent pas, ou le style de la page est cassé.
• Avertissements console : la console développeur affiche des avertissements "Mixed Content" avec les URLs des ressources problématiques.
• Fonctionnalités cassées : les formulaires, sliders, ou autres éléments interactifs peuvent ne pas fonctionner si leurs scripts sont bloqués.

Sources de Contenu Mixte

Voici les causes courantes du contenu mixte :

• URLs en dur dans le code : des URLs HTTP codées en dur dans le HTML, CSS, ou JavaScript au lieu d'utiliser des URLs relatives ou HTTPS.
• Contenu de la base de données : les articles, pages, ou produits contiennent des images ou liens avec des URLs HTTP stockées en base.
• Ressources externes : des scripts tiers, polices Google, ou widgets chargés via HTTP au lieu de HTTPS.
• Migration incomplète : lors du passage à HTTPS, certaines références HTTP n'ont pas été mises à jour.

Identifier le Contenu Mixte

Utilisez ces méthodes pour trouver les ressources problématiques :

1. Console développeur : ouvrez F12 > Console. Les erreurs de contenu mixte sont listées avec les URLs exactes des ressources.
2. Why No Padlock : l'outil whynopadlock.com scanne votre page et liste toutes les ressources non sécurisées.
3. Chrome DevTools Network : dans l'onglet Network, filtrez par "mixed-content" pour voir les requêtes bloquées.
4. Scan de site complet : des outils comme Screaming Frog ou JitBit HTTPS Checker scannent l'ensemble de votre site.

Corrections de Contenu Mixte

Voici comment corriger les problèmes courants :

<!-- AVANT : URL HTTP en dur -->
<img src="http://example.com/image.jpg">
<script src="http://cdn.example.com/script.js"></script>
<link href="http://fonts.googleapis.com/css?family=Open+Sans">

<!-- APRÈS : URL relative au protocole ou HTTPS -->
<img src="https://example.com/image.jpg">
<script src="https://cdn.example.com/script.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans">

<!-- OU : URL relative (recommandé pour le même domaine) -->
<img src="/images/image.jpg">
<script src="/js/script.js">

<!-- En PHP : URL dynamique -->
<img src="<?= rtrim($_ENV['APP_URL'], '/') ?>/images/image.jpg">

<!-- Header CSP pour bloquer et reporter le contenu mixte -->
Content-Security-Policy: upgrade-insecure-requests;
Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-report

Remplacez les URLs HTTP par HTTPS ou utilisez des URLs relatives. Le header upgrade-insecure-requests demande au navigateur de convertir automatiquement les requêtes HTTP en HTTPS.

Bonnes Pratiques

Prévenez le contenu mixte avec ces pratiques :

• Utilisez des URLs relatives : pour les ressources de votre propre domaine, utilisez des chemins relatifs (/images/logo.png) plutôt que des URLs absolues.
• Configurez un CSP : le header Content-Security-Policy avec upgrade-insecure-requests convertit automatiquement les requêtes HTTP.
• Auditez régulièrement : scannez périodiquement votre site pour détecter les nouvelles références HTTP ajoutées par le contenu.
• Mettez à jour la base de données : après migration HTTPS, remplacez les URLs HTTP dans la base avec un script SQL ou un plugin.

Questions Fréquentes

Éliminez le Contenu Mixte

Le contenu mixte est un problème courant lors des migrations vers HTTPS, mais il est entièrement corrigeable. Prenez le temps d'auditer votre site et de corriger toutes les références HTTP.

Combinez la surveillance SSL de MoniTao avec des audits réguliers de contenu mixte pour garantir que votre site reste entièrement sécurisé.

Prêt à dormir sur vos deux oreilles ?

Commencez gratuitement, sans carte bancaire.

Créer mon compte Voir les tarifs