Cloudflare SSL casse WordPress et Joomla et comment y remédier

Cloudflare se présente comme un service CDN remarquable, disponible en version gratuite et premium, offrant la possibilité d'activer le protocole SSL sans frais supplémentaires, même avec l'abonnement gratuit.

Lors de mes tests avec WordPress et Joomla, j'ai constaté que l'implémentation du SSL entraînait des dysfonctionnements, ce qui m'a causé quelques frustrations. Heureusement, j'ai rapidement trouvé une solution simple que je souhaite partager avec vous.

Dans cet article, nous allons explorer les points suivants :

Comment vérifier que le SSL est correctement activé dans Cloudflare
Comment résoudre les problèmes d'affichage causés par le SSL Cloudflare sur WordPress
Comment remédier aux anomalies d'affichage liées au SSL Cloudflare sur Joomla
Comment s'assurer que les requêtes HTTP sont redirigées vers HTTPS

Commençons par nous assurer que le SSL est bien activé dans Cloudflare :

Connectez-vous à votre compte Cloudflare
Choisissez le site web concerné dans la liste
Naviguez jusqu'à la section "Crypto"

Vérifiez que l'indication "CERTIFICAT ACTIF" est présente et que le niveau SSL est configuré sur "Flexible", "Complet" ou "Strict", selon vos besoins. Si vous souhaitez éviter les coûts liés à l'obtention d'un certificat sur votre serveur web, l'option par défaut "Flexible" est une excellente solution.

Ces étapes confirment que le SSL Cloudflare est opérationnel pour votre site.

Correction des problèmes SSL Cloudflare sur WordPress

Comme le montre la capture d'écran ci-dessous, la mise en page de mon site WordPress était totalement désorganisée. Ce problème survient généralement quand tous les éléments ne sont pas chargés via HTTPS, ce qui conduit à un affichage incorrect.

Il existe deux méthodes pour remédier à ce problème :

La première consiste à s'assurer que tous les contenus sont bien chargés à partir d'une URL HTTPS. Toutefois, si vous utilisez un thème tiers, la seconde solution, bien plus simple, peut être préférable.

La seconde méthode implique l'installation du plugin Cloudflare Flexible SSL pour WordPress.

Accédez à votre tableau de bord WordPress
Cliquez sur "Extensions" puis "Ajouter"
Recherchez "Cloudflare Flexible SSL"
Installez et activez le plugin

C'est tout ! Le plugin gère le reste. Vous pouvez constater ci-dessous que l'affichage est désormais correct.

Correction des problèmes SSL Cloudflare sur Joomla

J'ai également rencontré des problèmes d'affichage après avoir activé le SSL Cloudflare sur mon site Joomla.

Pour résoudre ce problème, il faut installer l'extension "Cloudflare For Joomla".

Téléchargez le plugin Cloudflare pour Joomla. Notez qu'une inscription gratuite peut être nécessaire.
Connectez-vous à l'interface d'administration de Joomla
Cliquez sur "Extensions" puis sur "Gestion des extensions"
Sélectionnez le fichier du plugin que vous venez de télécharger, puis cliquez sur "Télécharger et installer"
Par défaut, ce plugin n'est pas activé. Vous devrez donc le faire manuellement. Pour cela :
Allez dans "Extensions", puis "Gestion des plugins"
Recherchez "Cloudflare", puis activez-le

Vous devriez maintenant constater que votre site s'affiche correctement.

Après l'activation du SSL, assurez-vous que le protocole HTTP soit correctement redirigé vers HTTPS pour éviter tout problème de contenu dupliqué aux yeux des moteurs de recherche.

Redirection HTTP vers HTTPS avec les règles de page Cloudflare

Connectez-vous à votre compte Cloudflare
Choisissez le site web concerné
Cliquez sur "Règles de page"
Saisissez l'URL HTTP de votre site dans la section "Modèle d'URL"
Activez l'option "Toujours utiliser HTTPS" comme ci-dessous

Voilà, vous avez désormais configuré avec succès le SSL gratuit de Cloudflare. Il est conseillé de réaliser un test de vulnérabilité pour vous assurer de la sécurité de votre implémentation SSL.

Cet article vous a plu ? N'hésitez pas à le partager !