Le site ne s'affiche pas comme sécurisé en HTTPS (contenu mixte)

Nous partons du principe que votre site est déjà configuré pour utiliser https:// avec son certificat SSL. Normalement, le navigateur l'affiche comme sécurisé :

Mais parfois, même si l'adresse commence par https://, le navigateur affiche un avertissement, ou le site apparaît « déformé » parce que les feuilles de style, les images ou les fichiers JavaScript ne se chargent pas :

C'est ce qu'on appelle le contenu mixte : la page se charge en HTTPS, mais elle contient des liens vers des images, des CSS, du JavaScript ou d'autres ressources demandés en http://. Les navigateurs bloquent les scripts et les styles qui arrivent en HTTP, et tant que toutes les ressources ne se chargent pas en HTTPS, ils n'affichent pas le site comme sécurisé.

Repérer les ressources en http://

Ouvrez le site dans Chrome ou Firefox, appuyez sur F12 et allez dans l'onglet Console. Rechargez la page : chaque ressource problématique apparaît avec un avertissement « Mixed Content » et son adresse http:// complète. Nous l'expliquons plus en détail dans comment utiliser la console du navigateur.

Avec cette liste, vous savez déjà ce qu'il faut corriger. En général, les liens se trouvent dans :

• La base de données de l'application (contenu des pages et des articles, réglages contenant l'URL du site).
• Les fichiers du thème ou du template, y compris les CSS (par exemple, une image de fond avec url(http://...)).
• Des ressources d'autres sites (polices, scripts, images externes).

Le corriger dans WordPress

1. Dans Réglages > Général, vérifiez que Adresse web de WordPress (URL) et Adresse web du site (URL) commencent par https://.

2. Remplacez les anciens liens de la base de données avec le plugin Better Search Replace. Dans Outils > Better Search Replace :

   • Search for : http://tudominio.com
   • Replace with : https://tudominio.com
   • Sélectionnez toutes les tables.
   • Faites d'abord un passage avec Run as dry run? coché pour voir combien de modifications il fera, puis décochez-le et lancez-le.

   Recommencez avec http://www.tudominio.com si votre site utilisait le www. Faites une sauvegarde de la base de données avant. Ce plugin respecte les données sérialisées de WordPress ; ne le faites pas avec un UPDATE dans phpMyAdmin, car vous les casseriez.

   Si vous avez un accès SSH, vous pouvez faire la même chose avec WP-CLI :

wp search-replace 'http://tudominio.com' 'https://tudominio.com' --all-tables --dry-run
wp search-replace 'http://tudominio.com' 'https://tudominio.com' --all-tables

3. Videz le cache de WordPress (plugin de cache) et celui du navigateur, puis regardez de nouveau la console.

S'il reste des avertissements, ils viennent généralement du thème ou d'un plugin dont l'adresse est écrite dans son code ou dans ses CSS : corrigez-la dans ce fichier ou dans les réglages du thème.

Comme solution rapide pendant que vous corrigez l'origine, le plugin SSL Insecure Content Fixer réécrit les liens http:// en https:// au moment de servir la page. Dans ses réglages (Réglages > SSL Insecure Content), commencez par le niveau Simple et passez à Content ou Widgets si cela ne suffit pas.

Le corriger sur n'importe quel autre site

Pour toute application (PrestaShop, Joomla, un site fait à la main…), remplacez les liens http:// affichés par la console dans la configuration, la base de données ou les fichiers du thème.

En attendant, vous pouvez demander au navigateur de charger en HTTPS toutes les ressources de la page en ajoutant cette ligne au début du fichier .htaccess du site :

Header always set Content-Security-Policy "upgrade-insecure-requests"

Cela ne fonctionne qu'avec les ressources également disponibles en HTTPS. Si un site externe n'a pas de HTTPS, cette ressource ne se chargera toujours pas : téléchargez-la et envoyez-la sur votre hébergement, ou remplacez-la par une autre.

Vérifier que cela fonctionne

Rouvrez le site avec la console ouverte : il ne doit rester aucun avertissement « Mixed Content » et le navigateur doit afficher la connexion comme sécurisée. Vérifiez aussi une page intérieure, le formulaire de contact et, s'il s'agit d'une boutique, le panier.