Comment configurer Cloudflare avec PrestaShop correctement

Pourquoi utiliser Cloudflare avec PrestaShop ?

Cloudflare se positionne entre vos visiteurs et votre serveur PrestaShop, agissant comme un proxy inverse qui fournit une protection DDoS, un pare-feu applicatif web (WAF), un CDN mondial pour les ressources statiques et la terminaison SSL/TLS. Correctement configuré, Cloudflare peut considérablement améliorer les temps de chargement de votre boutique, réduire la bande passante du serveur et bloquer le trafic malveillant avant qu'il n'atteigne votre hébergement. Cependant, une configuration Cloudflare incorrecte est l'une des causes les plus fréquentes de boucles de redirection, de tunnels de commande cassés, d'adresses IP clients incorrectes et de catastrophes de mise en cache dans PrestaShop. Ce guide vous accompagne à travers chaque étape d'une configuration correcte.

Étape 1 : Configuration DNS

Après avoir ajouté votre domaine à Cloudflare, vous devez configurer vos enregistrements DNS. La décision la plus importante est de savoir quels enregistrements doivent être proxifiés (nuage orange) par rapport à DNS uniquement (nuage gris).

Enregistrements proxifiés (nuage orange) :

• Votre enregistrement A ou AAAA principal pointant vers l'IP de votre serveur (par ex. exemple.com et www.exemple.com)
• Tout CNAME pour les sous-domaines servant du contenu web

Enregistrements DNS uniquement (nuage gris) :

• Enregistrements MX (mail) — ceux-ci ne doivent jamais être proxifiés
• Enregistrements utilisés pour FTP, SSH ou d'autres services non-HTTP
• Enregistrements pointant vers des serveurs mail (par ex. mail.exemple.com)

Important : Si vous utilisez un sous-domaine pour votre back office PrestaShop (par ex. admin.exemple.com), vous pouvez le proxifier, mais soyez attentif aux règles de mise en cache abordées plus loin. Ne créez jamais un enregistrement DNS qui expose inutilement l'adresse IP réelle de votre serveur — une fois votre domaine principal proxifié, les attaquants qui connaissent l'IP réelle peuvent contourner Cloudflare entièrement. Envisagez de changer l'IP de votre serveur après avoir activé Cloudflare si elle était auparavant publique.

Étape 2 : Configuration SSL/TLS — Utilisez Full (Strict)

C'est le paramètre le plus critique. Naviguez vers SSL/TLS > Vue d'ensemble dans votre tableau de bord Cloudflare.

Utilisez toujours le mode Full (Strict). Voici ce que fait chaque mode et pourquoi les autres sont incorrects pour PrestaShop :

• Off : Aucun chiffrement du tout. N'utilisez jamais ceci pour une boutique e-commerce.
• Flexible : Chiffre le trafic entre le visiteur et Cloudflare, mais envoie du HTTP non chiffré à votre serveur. Cela provoque des boucles de redirection infinies dans PrestaShop car le serveur voit du HTTP, définit force_ssl = 1, redirige vers HTTPS, Cloudflare le délivre en HTTPS, mais la requête suivante arrive au serveur en HTTP à nouveau. C'est l'erreur numéro un avec Cloudflare et PrestaShop.
• Full : Chiffre de bout en bout mais ne valide pas le certificat SSL de votre serveur. Acceptable mais non recommandé.
• Full (Strict) : Chiffre de bout en bout et valide votre certificat d'origine. C'est le réglage correct. Si vous n'avez pas de certificat SSL payant, utilisez un certificat d'origine Cloudflare gratuit (valide 15 ans) installé sur votre serveur.

Pour installer un certificat d'origine Cloudflare : allez dans SSL/TLS > Serveur d'origine > Créer un certificat. Téléchargez le certificat et la clé privée, installez-les dans votre serveur web (Apache ou Nginx) et redémarrez le service. Ce certificat n'est valide que pour le trafic passant par Cloudflare — il apparaîtra comme invalide en cas d'accès direct.

Sous SSL/TLS > Certificats Edge, activez :

• Toujours utiliser HTTPS : Oui
• Réécritures HTTPS automatiques : Oui (corrige le contenu mixte en réécrivant les URL HTTP en HTTPS)
• Version TLS minimale : TLS 1.2

Étape 3 : Configuration de la mise en cache

Le comportement de mise en cache par défaut de Cloudflare fonctionne bien pour les ressources statiques mais peut causer de sérieux problèmes s'il met en cache des pages dynamiques de PrestaShop. Naviguez vers Mise en cache > Configuration.

Paramètres recommandés :

• Niveau de mise en cache : Standard
• TTL du cache navigateur : Respecter les en-têtes existants (laissez PrestaShop contrôler la mise en cache du navigateur via ses paramètres CCC)
• Toujours en ligne : Désactivez ceci pour les boutiques e-commerce — afficher des pages produits obsolètes avec de mauvais prix ou des articles en rupture de stock est pire qu'afficher une page d'erreur

Ce que Cloudflare met en cache par défaut : Uniquement les extensions de fichiers statiques comme .js, .css, .png, .jpg, .gif, .svg, .woff2, .ico. Il ne met PAS en cache les pages HTML par défaut, ce qui est correct pour PrestaShop. N'activez pas « Tout mettre en cache » sans règles de contournement appropriées, sinon vos clients verront les paniers, les sessions et les données personnelles d'autres personnes.

Étape 4 : Règles de page et règles de cache

Les Page Rules (ou les plus récentes Cache Rules) vous permettent de personnaliser le comportement de Cloudflare pour des modèles d'URL spécifiques. Pour PrestaShop, vous avez besoin de règles qui protègent le panneau d'administration et le tunnel de commande de la mise en cache tout en optimisant la livraison du contenu statique.

Règle 1 : Contourner le cache pour le panneau d'administration

Créez une règle correspondant à exemple.com/admin* (remplacez « admin » par le nom réel de votre répertoire de back office) :

• Niveau de cache : Contourner (Bypass)
• Désactiver la performance : Oui (désactive Rocket Loader, Mirage et d'autres optimisations qui peuvent casser le JS de l'admin)
• Niveau de sécurité : Élevé

Règle 2 : Contourner le cache pour le tunnel de commande et le panier

Créez une règle correspondant à exemple.com/order* et une autre pour exemple.com/cart* (ou utilisez exemple.com/*order* si vous utilisez des URL simplifiées) :

• Niveau de cache : Contourner (Bypass)
• Désactiver la performance : Oui

Si votre PrestaShop utilise des URL de tunnel de commande générées par des modules (comme ceux des modules de commande express), ajoutez des règles pour ces chemins également.

Règle 3 : Contourner le cache pour le compte client

Correspondre à exemple.com/my-account* ou exemple.com/identity* et toutes les autres pages authentifiées côté client :

• Niveau de cache : Contourner (Bypass)

Règle 4 : Mettre en cache les ressources statiques de manière agressive

Correspondre à exemple.com/themes/* et exemple.com/js/* et exemple.com/modules/*/views/css/* :

• Niveau de cache : Tout mettre en cache
• TTL du cache Edge : 1 mois
• TTL du cache navigateur : 1 semaine

Note sur le nouveau système de règles : Cloudflare migre des Page Rules vers des Cache Rules, Configuration Rules et Transform Rules séparées. La logique est la même — créez une Cache Rule avec une expression de filtre personnalisée comme (http.request.uri.path contains "/admin") et définissez l'action pour contourner le cache.

Étape 5 : Rocket Loader — Désactivez-le

Rocket Loader est la fonctionnalité de Cloudflare qui diffère le chargement de tout le JavaScript de vos pages. Naviguez vers Vitesse > Optimisation > Optimisation du contenu et désactivez Rocket Loader.

Bien que cela semble bénéfique, Rocket Loader cause de graves problèmes avec PrestaShop :

• Boutons d'ajout au panier cassés : PrestaShop s'appuie sur des blocs de JavaScript inline et des gestionnaires jQuery ready qui doivent s'exécuter dans l'ordre. Rocket Loader les diffère et les réordonne.
• Échecs des modules de paiement : Les passerelles de paiement comme PayPal, Stripe et Mollie injectent leur propre JavaScript avec lequel Rocket Loader interfère, causant des échecs de commande et des commandes perdues.
• Panneau d'administration cassé : Le back office utilise massivement du JavaScript inline pour la validation des formulaires, les appels AJAX et les pages de configuration des modules. Rocket Loader casse tout cela.
• Modules de consentement aux cookies et RGPD : Ceux-ci s'appuient sur le blocage de certaines ressources jusqu'à obtention du consentement. Rocket Loader compromet cela en réécrivant la manière dont toutes les ressources externes se chargent.

Même si vous définissez une Page Rule pour désactiver les fonctionnalités de performance sur /admin*, le front office sera toujours cassé. L'approche la plus sûre est de désactiver Rocket Loader globalement.

Étape 6 : Restauration de l'IP réelle

Lorsque Cloudflare proxifie le trafic, votre serveur voit les adresses IP de Cloudflare au lieu des IP réelles de vos visiteurs. Cela casse PrestaShop de plusieurs manières : les enregistrements de commandes montrent les IP de Cloudflare, la détection de fraude échoue, la géolocalisation est incorrecte, la limitation de débit ne fonctionne pas et les données analytiques sont inutilisables.

Apache (mod_remoteip)

Installez et activez le module :

sudo a2enmod remoteip
sudo systemctl restart apache2

Ajoutez à votre configuration Apache (hôte virtuel ou global) :

RemoteIPHeader CF-Connecting-IP
RemoteIPTrustedProxy 173.245.48.0/20
RemoteIPTrustedProxy 103.21.244.0/22
RemoteIPTrustedProxy 103.22.200.0/22
RemoteIPTrustedProxy 103.31.4.0/22
RemoteIPTrustedProxy 141.101.64.0/18
RemoteIPTrustedProxy 108.162.192.0/18
RemoteIPTrustedProxy 190.93.240.0/20
RemoteIPTrustedProxy 188.114.96.0/20
RemoteIPTrustedProxy 197.234.240.0/22
RemoteIPTrustedProxy 198.41.128.0/17
RemoteIPTrustedProxy 162.158.0.0/15
RemoteIPTrustedProxy 104.16.0.0/13
RemoteIPTrustedProxy 104.24.0.0/14
RemoteIPTrustedProxy 172.64.0.0/13
RemoteIPTrustedProxy 131.0.72.0/22

Cloudflare publie ses plages d'IP sur cloudflare.com/ips — vérifiez périodiquement et mettez à jour votre configuration si elles changent.

Nginx

Utilisez le module ngx_http_realip_module (généralement compilé par défaut) :

set_real_ip_from 173.245.48.0/20;
set_real_ip_from 103.21.244.0/22;
# ... ajoutez toutes les plages Cloudflare ...
real_ip_header CF-Connecting-IP;

Configuration PrestaShop

Même avec mod_remoteip, certains modules PrestaShop lisent l'IP depuis $_SERVER['HTTP_CF_CONNECTING_IP'] ou $_SERVER['HTTP_X_FORWARDED_FOR']. Si vous voyez toujours les IP de Cloudflare dans les commandes après avoir configuré mod_remoteip, vérifiez le fichier config/defines.inc.php de votre PrestaShop pour d'éventuels remplacements liés aux IP ou ajoutez le code suivant (pas toujours nécessaire si mod_remoteip fonctionne) :

if (isset($_SERVER['HTTP_CF_CONNECTING_IP'])) {
    $_SERVER['REMOTE_ADDR'] = $_SERVER['HTTP_CF_CONNECTING_IP'];
}

Étape 7 : Règles WAF (Pare-feu applicatif web)

Le WAF de Cloudflare protège votre boutique contre les injections SQL, le XSS et d'autres attaques. Avec le plan gratuit, vous bénéficiez d'une protection de base. Avec les plans Pro et supérieurs, vous obtenez les ensembles de règles gérées.

Paramètres WAF recommandés

• Niveau de sécurité : Moyen (sous Sécurité > Paramètres). Le niveau « Élevé » peut déclencher des challenges pour les clients légitimes sur les réseaux mobiles ou les VPN.
• Durée du challenge : 30 minutes (durée pendant laquelle un visiteur reste vérifié après avoir résolu un challenge)
• Mode de lutte contre les bots : Activez avec prudence — il peut bloquer les callbacks des passerelles de paiement (IPN) de PayPal, Stripe, etc. Si vous l'activez, ajoutez des exceptions WAF pour les chemins de webhook connus comme /module/paypal/notify.

Règles WAF personnalisées pour PrestaShop

Créez ces règles de pare-feu sous Sécurité > WAF > Règles personnalisées :

Bloquer l'accès direct aux fichiers sensibles :

Expression : (http.request.uri.path contains "config/settings.inc.php") or (http.request.uri.path contains ".env") or (http.request.uri.path contains "composer.json") or (http.request.uri.path contains "var/logs/")

Action : Bloquer

Limiter le débit des tentatives de connexion :

Utilisez les règles de limitation de débit pour restreindre les requêtes vers l'URL de connexion admin (par ex. /adminXYZ/index.php) à 5 requêtes par minute par IP. Cela prévient les attaques par force brute sur le back office.

Mettre en liste blanche les IP des fournisseurs de paiement :

Si vous utilisez le Mode de lutte contre les bots, créez une règle d'autorisation pour les IP de webhook de votre fournisseur de paiement afin que leurs callbacks serveur-à-serveur ne soient jamais soumis à un challenge.

Étape 8 : Paramètres de performance

Naviguez vers Vitesse > Optimisation et configurez :

• Minification automatique : Activez pour JavaScript, CSS et HTML. Le système CCC (Combiner, Compresser, Mettre en Cache) de PrestaShop effectue sa propre minification, il peut donc y avoir une double minification, mais c'est généralement inoffensif. Si vous constatez des problèmes d'affichage, désactivez la minification CSS de Cloudflare et reposez-vous sur le CCC de PrestaShop à la place.
• Brotli : Activez — meilleure compression que gzip, supporté par tous les navigateurs modernes
• Early Hints : Activez — indique aux navigateurs de précharger les ressources critiques avant que le HTML ne soit entièrement délivré
• HTTP/2 : Activé par défaut sur tous les plans Cloudflare
• HTTP/3 (QUIC) : Activez pour de meilleures performances sur les réseaux mobiles

Mirage (plan Pro) : Si disponible, activez-le. Mirage charge les images en différé et sert des images de taille appropriée en fonction de l'appareil du visiteur. Il fonctionne bien avec les images de produits PrestaShop.

Polish (plan Pro) : Activez avec la compression « Lossy » pour les images de produits, ou « Lossless » si la qualité d'image est critique (par ex. tirages d'art). Polish compresse les images à la volée en périphérie sans modifier vos originaux.

Étape 9 : Purger le cache Cloudflare

Lorsque vous mettez à jour le design de votre boutique, ajoutez de nouveaux produits ou modifiez des fichiers CSS/JS, vous devez purger le cache de Cloudflare pour que les visiteurs voient la dernière version.

Méthodes de purge :

• Tout purger : Tableau de bord > Mise en cache > Configuration > Tout purger. À utiliser avec parcimonie — cela force toutes les ressources à être récupérées depuis votre serveur.
• Purger par URL : Purgez des fichiers spécifiques comme exemple.com/themes/votre-theme/assets/css/theme.css
• Purger par tag / préfixe : Disponible sur les plans Enterprise
• Purge via API : Utilisez l'API de Cloudflare pour automatiser la purge du cache après les déploiements. Vous pouvez intégrer cela dans votre workflow de déploiement de modules PrestaShop.

Le système CCC de PrestaShop ajoute des chaînes de version aux fichiers CSS et JS (par ex. theme.css?v=12345), ce qui invalide naturellement le cache de Cloudflare lorsque les fichiers changent. Si vous vous appuyez correctement sur le CCC, vous avez rarement besoin de purges manuelles du cache pour les ressources statiques.

Erreurs courantes et comment les éviter

Erreur 1 : SSL réglé sur Flexible

Symptômes : Boucle de redirection infinie, ERR_TOO_MANY_REDIRECTS, page blanche. Correction : Changez le mode SSL en Full (Strict) et installez un certificat d'origine sur votre serveur.

Erreur 2 : Mise en cache des pages dynamiques

Symptômes : Le client A voit le panier ou les détails de compte du client B, mauvais prix affichés, les utilisateurs connectés voient le contenu des utilisateurs déconnectés. Correction : N'utilisez jamais « Tout mettre en cache » comme paramètre global. Ne mettez en cache que les chemins de ressources statiques. Contournez toujours le cache pour /order, /cart, /my-account et le panneau d'administration.

Erreur 3 : Rocket Loader activé

Symptômes : L'ajout au panier ne fonctionne pas, les formulaires de paiement ne se chargent pas, les modules du back office génèrent des erreurs JavaScript, les galeries de pages produits sont cassées. Correction : Désactivez Rocket Loader globalement.

Erreur 4 : IP réelles non restaurées

Symptômes : Toutes les commandes affichent la même adresse IP (une IP Cloudflare), les modules de géolocalisation montrent les mauvais pays, la limitation de débit bannit Cloudflare au lieu des attaquants. Correction : Configurez mod_remoteip ou ngx_http_realip_module comme décrit ci-dessus.

Erreur 5 : Le Mode de lutte contre les bots bloque les webhooks

Symptômes : Les confirmations de paiement n'arrivent jamais, les commandes restent en statut « En attente de paiement », les logs IPN/webhook affichent des réponses 403 ou des challenges. Correction : Créez des règles d'exception WAF pour les URL et plages d'IP de webhook des fournisseurs de paiement.

Erreur 6 : Problèmes d'email après la configuration

Symptômes : Les emails cessent de fonctionner, la validation SPF/DKIM échoue. Cause : Les enregistrements DNS liés aux emails (MX, SPF TXT, DKIM) ont été accidentellement réglés en proxifié (nuage orange). Correction : Tous les enregistrements DNS email doivent être en DNS uniquement (nuage gris). Le proxy ne fonctionne que pour le trafic HTTP/HTTPS.

Erreur 7 : Mode développement laissé activé

Symptômes : Le cache ne fonctionne jamais, charge élevée sur le serveur d'origine. Cause : Le Mode développement a été activé pendant la configuration et oublié. Correction : Désactivez le Mode développement dans Mise en cache > Configuration une fois votre configuration terminée. Le Mode développement se désactive automatiquement après 3 heures, mais vérifiez quand même.

Checklist de dépannage

Lorsque quelque chose ne va pas avec Cloudflare et PrestaShop, parcourez cette checklist :

1. Boucles de redirection : Vérifiez le mode SSL (doit être Full ou Full Strict), vérifiez le .htaccess pour les redirections HTTPS en double, vérifiez que PS_SSL_ENABLED de PrestaShop est réglé sur 1 dans la base de données.
2. Avertissements de contenu mixte : Activez les réécritures HTTPS automatiques dans Cloudflare, vérifiez les URL http:// codées en dur dans votre thème ou vos pages CMS.
3. TTFB lent (Time to First Byte) : Cloudflare ne met pas en cache le HTML par défaut. Un TTFB lent signifie que votre serveur d'origine est lent — optimisez PrestaShop (activez le CCC, configurez OPcache, vérifiez les requêtes de base de données) plutôt que de blâmer Cloudflare.
4. CSS/JS ne se mettent pas à jour : Videz le cache CCC de PrestaShop (back office > Performance), puis purgez le cache Cloudflare. Vérifiez que le CCC ajoute des chaînes de version aux URL des fichiers.
5. Panneau d'administration lent ou cassé : Assurez-vous que votre Page Rule contourne le cache et désactive les fonctionnalités de performance pour le répertoire admin. Vérifiez que le WAF de Cloudflare ne bloque pas les requêtes AJAX de l'admin.
6. Les clients reçoivent des challenges : Baissez le Niveau de sécurité à Moyen ou Bas. Vérifiez que le Mode Under Attack n'est pas activé (il ne devrait être utilisé que pendant les attaques DDoS actives). Examinez les événements du pare-feu dans Sécurité > Événements pour voir quelles règles se déclenchent.
7. Les appels API échouent : Si votre boutique a des endpoints API REST ou des services web, assurez-vous que Cloudflare ne soumet pas les requêtes API à des challenges ou ne les bloque pas. Créez une règle WAF pour autoriser les requêtes vers /api/* depuis les plages d'IP connues.
8. Les images ne se chargent pas : Vérifiez si la Protection Hotlink est activée et bloque accidentellement votre propre domaine. Vérifiez que les URL des images utilisent HTTPS.

Cloudflare avec PrestaShop Multiboutique

Si vous utilisez PrestaShop multiboutique avec plusieurs domaines, chaque domaine doit être ajouté séparément à Cloudflare (sur le plan gratuit, chaque domaine est une zone séparée). Assurez-vous que :

• Le mode SSL est réglé sur Full (Strict) sur chaque zone
• Les Page Rules sont dupliquées pour chaque domaine
• La restauration des IP réelles couvre tous les domaines (mod_remoteip est global, donc une seule configuration gère tous les hôtes virtuels)

Plan Cloudflare recommandé pour PrestaShop

Le plan gratuit couvre la plupart des besoins : DNS, CDN, WAF basique et SSL. Le plan Pro (environ 20 USD/mois) ajoute Mirage, Polish, les ensembles de règles WAF gérées et plus de Page Rules. Pour les boutiques à fort trafic, le plan Business ajoute des règles WAF personnalisées et des fonctionnalités de performance supplémentaires. La plupart des boutiques PrestaShop de petite à moyenne taille fonctionnent parfaitement avec le plan gratuit ou Pro.

Résumé

Configurer Cloudflare avec PrestaShop correctement se résume à quelques décisions critiques : utiliser le SSL Full (Strict), désactiver Rocket Loader, contourner le cache sur les pages dynamiques, restaurer les IP réelles des visiteurs et protéger les webhooks de paiement de la protection anti-bots. Faites-les bien dès le départ et Cloudflare devient un allié puissant pour la performance et la sécurité de votre boutique. Faites-les mal et vous passerez des heures à déboguer des boucles de redirection, des tunnels de commande cassés et des commandes fantômes. Prenez le temps de le configurer correctement une fois, et votre boutique PrestaShop bénéficiera de temps de chargement plus rapides dans le monde entier, d'une charge serveur réduite et d'une protection robuste contre les attaques.