Un cadenas gratuit pour wordpress ! Crédit photo : spodzone, Flickr (CC BY-NC-ND 2.0)
Il est facile de passer gratuitement son site wordpress en https, même en hébergement mutualisé ... pour peu qu'on fasse les choses dans le bon ordre ! Après quelques essais de plugins et tentatives diverses, voici une petite marche à suivre..
Pourquoi https ?
Au-delà du petit coup de boost SEO sous-entendu par Google (https as a ranking signal), l'utilisation du protocole SSL (https) est une garantie d'authentification, confidentialité et intégrité des échanges entre votre site et ses visiteurs. C'est une garantie qui a généralement un prix : entre quelques euros par mois et ... beaucoup plus ! La méthode présentée ici ne coûte rien à part une heure de votre temps (un peu plus si vous utilisez un thème et des plugins obsolètes...), mais restez conscients que le Flexible SSL offert par Cloudflare depuis 2014 ne sécurise que les échanges entre le visiteur et Cloudflare, mais pas ceux entre Cloudflare et votre serveur web.
Flexible SSL -- SSL between the visitor and CloudFlare -- visitor sees HTTPS on your site, but no SSL between CloudFlare and your web server. You don't need to have an SSL cert on your web server, but your visitors will still see the site as being HTTPS enabled.
Je pars du principe que vous êtes familiers avec Cloudflare, dont la fonction première est de faire office de CDN (et bien plus) pour vos fichiers statiques (images, css, scripts, ...) tout en offrant une protection contre le SPAM.
Alors cela en vaut-il la peine ? Je dirais oui, pour les raisons suivantes :
- C'est un premier pas vers du FULL SSL (avec un certificat auto-signé ou un "vrai"), mieux sécurisé et plus à même de répondre aux besoins de protection d'informations sensibles
- Expérience faite, c'est une manière de se familiariser dans le jargon SSL et de comprendre un peu mieux comment ça marche
- C'est gratuit et possible même sur en hébergement mutualisé
- L'effet boost SEO ? Je n'y crois pas trop, les stats le diront !
Sécuriser son site WordPress en quelques minutes
La méthode décrite ci-après a l'avantage de pouvoir se mettre en place très simplement, et sans interruption de service pour vos visiteurs. Elle n'est certainement pas unique, mais elle a le mérite de fonctionner ! Notez que vous conserverez dans Réglages - Général le nom de domaine sous la forme http://www.example.com (et pas https), sans quoi vous risquez de bloquer votre site au cours de la mise en place.
Première étape : Cloudflare
Si vous n'en avez pas encore, ouvrez un compte gratuit sur Cloudflare, ajoutez votre nom de domaine (sous la forme example.com), notez les Nameservers associés et définissez ceux-ci pour votre site internet (via l'espace admin de l'entité à qui vous avez acheté le domaine). Après quelques heures de propagation des DNS, le trafic vers votre site passe désormais par Cloudflare.
Dans votre compte Cloudflare, choisissez l'option Crypto - Flexible SSL. Après quelques minutes, la mention "Active Certificate" sur fond vert s'affiche.
Flexible SSL sur Cloudflare
Enfin, dans les paramètres de votre compte Cloudflare, notez soigneusement votre clé API, vous en aurez besoin juste après.
Deuxième étape : Plugin WP Cloudflare
Installez le plugin WP Cloudflare : en le réglant correctement, celui-ci va gérer de manière transparente plusieurs choses essentielles :
- Avec votre clé API Cloudflare, votre e-mail de connexion à Cloudflare et le nom de domaine (sous la forme example.com tout court), le plugin rétablira l'IP correcte de vos visiteurs, même s'ils transitent à présent par Cloudflare.
- avec l'option https rewriting on, le plugin transformera automatiquement la plupart des références à du contenu non sécurisé (de type http://www.example.com/script.js) en référence agnostique (//www.example.com/script.js) : de cette manière, les images, js et css seront chargés en http sur les pages http, et en https sur les pages https. C'est important pour la suite !
- Development mode : laissez à OFF, il s'agit de l'option pour bypasser Cloudflare pendant trois heures, lorsque vous ne voulez pas que Cloudflare serve des ressources en cache pendant des tests par exemple.
Troisième étape : éliminer le mixed content
Le contenu mixte, ou mixed content, c'est lorsqu'une page https référence du contenu (iframe, images, feuilles de styles css ou javascript js par exemple) via un lien non sécurisé. Le contenu mixte va générer au mieux un avertissement, au pire complètement casser votre mise en page, suivant le navigateur du visiteur. Et ça, c'est pas bien...
La bonne chose à se rappeler, c'est qu'à ce stade-là, votre site est encore 100% fonctionnel en http, donc vos visiteurs ne voient absolument aucune différence. Votre job sera donc de tester vos pages en les visitant sous leur forme https. Utilisez la console de Google Chrome, la console de Firebug pour Firefox, ou celle d'IE (F12) pour repérer les éléments qui posent problème. En principe, tous les attachements devraient être OK car c'est le job du plugin Cloudflare, mais vous aurez potentiellement des soucis avec les éléments suivants :
- images que vous avez liées manuellement : <img src = "http://www.example.com/image/blabla.jpg"> doit être transformé en <img src = "//www.example.com/image/blabla.jpg"> ou, si sur votre propre site <img src = "/image/blabla.jpg">
- scripts / thèmes obsolètes qui gèrent mal le SSL : il faudra soit trouver vous-mêmes la référence en http qui traîne dans le code, ou contacter le développeur. Ceci dit, c'est peut-être le moment de changer de plugin s'il est obsolète !
- iframes : essayer en premier de remplacer http par https. Pour des widgets Amazon, une astuce est d'utiliser en plus &internal=1 à la fin de l'adresse de l'iframe. Pour desvidéos youtube, utilisez la forme https ou //www.youtube.com. Pour Dailymotion, je n'ai pas trouvé de solution...
Exemple d'alerte de contenu mixte dans la console Firebug (Firefox)
Testez extensivement avec plusieurs navigateurs (desktop et mobiles) si vous le pouvez, et vérifiez que le petit cadenas à côté de l'URL dans la barre d'adresse s'affiche correctement sur chaque page !
Astuce si vous utilisez W3 Total Cache : j'ai eu beaucoup plus de succès avec l'option Page Cache - "Cache SSL (https) requests. Sans ça, je devais vider le cache entre chaque test sous peine d'avoir un comportement un peu imprévisible.
Si vous aviez inséré une règle pour rediriger les requêtes de type example.com vers www.example.com dans le .htaccess du site, enlevez-la pour ne pas interférer (problèmes de redirection d'après mon expérience). D'une manière générale, cette règle n'est pas nécessaire si dans les options du site (Réglages - Général), l'adresse web wordpress est définie avec les www.
Enfin, s'il vous reste malgré tout du contenu mixte, vous pouvez tester un plugin tel que SSL Insecure Content Fixer, qui fait des miracles dans les coulisses de votre code pour modifier les liens http en version https. Merci à Gurwal pour sa suggestion !
Dernière étape : le grand saut
Une fois le contenu mixte définitivement éliminé, la dernière étape consiste à basculer tout le trafic en https. C'est à la fois simplissime, transparent et réversible : magnifique, non ?
Une fois les tests terminés, ajoutez une règle dans "Page rules" sur Cloudflare : *example.com* - Always use https. Et voilà !
Règle à définir sur Cloudflare pour basculer le site en https
A présent, toute requête vers votre site est redirigée en 301 vers son équivalent https. Google le comprendra et indexera vos pages https automatiquement. Si vous voulez revenir en arrière, aucun problème : il suffit d'enlever la règle sur Cloudflare.
J'espère que ce petit guide pourra servir à d'autres, et que vous m'aiderez par vos commentaires à en éliminer les imprécisions. En conclusion, même s'il s'agit beaucoup plus d'un exercice de style que d'une nécessité pour ce blog, la rédaction de ce billet a été une très bonne opportunité de me documenter sur le sujet !
Derniers articles par Cyril Castella (voir tous)
- Le Rubik’s Cube, c’est facile sur Francocube ! - 10 novembre 2017
- PlanetHoster et Gandi, deux hébergeurs au top ! - 21 janvier 2016
- Backup externe de bases de données via CRON/ANACRON et FTP - 29 décembre 2015
Ça aurait été sympa de développer la partie « page rules », il y a pas mal d’options intéressantes à configurer. Sinon ton article est très instructif.
Merci !
Au moment de la mise en place, je n’étais pas allé plus loin que le strict nécessaire (notamment pour les page rules). Si tu es tombé sur une ressource intéressante, je l’ajouterai volontiers à l’article !
Merci pour ton article Cyril, j’ai pour ma part été bloqué à la phase « éliminer le mixed content » après quelques recherche j’ai trouvé une solution facile et rapide pour corriger le tire. Le plug in s’appel SSL Insecure Content Fixer et on peut le trouver à l’adresse suivante : https://fr.wordpress.org/plugins/ssl-insecure-content-fixer/
Très bonne suggestion ! J’utilise également ce plugin sur d’autres sites et il fonctionne parfaitement et très simplement !
Nouvelle suggestion pour les cas plus difficiles. Il s’agit de Better Search Replace qui permet d’effectuer le remplacement du http par le https sur la base de donnée.
Merci pour ce contenu. J’avais commencé entre temps à le faire, mais j’ai eu à arreter. Je vais le reessayer. Une chose @Cyril Castella, j’aimerais savoir si, le fait de procéder ainsi à activer le SSL sur un domaine, cela permettrait au sous-domaine alloués dessus aussi d’être automatiquement en HTTPS ? Ou s’il y a quelque chose d’autre à faire… surtout qu’il s’agit d’un hebergeur qui VEND du ssl lui-même et qui me disait dans un email qu’un certificat SSL activé sur 1 domaine n’affecte pas mes sous-domaines, et qu’il me fallait acheté un autre certificat pour chacun de mes… Read more »
Salut, Merci pour ton commentaire. En effet, un certificat n’est par défaut valable que pour UN sous – domaine (www en général), et il faudra payer plus cher pour un certificat valide pour tous les sous-domaines que tu possèdes… Si tu passes par Cloudflare, par contre, tu peux sauf erreur gérer chaque sous-domaine de manière indépendante dans la console du site Cloudflare (en gros, soit faire passer le trafic par Cloudflare, soit ignorer les règles / caches etc). Donc je pense qu’en mettant une règle très générale comme dans ma dernière section (« le grand saut ») en « *example.com* – Always use… Read more »
J’ai suivi le tuto pour passer aussi mon site en HTTPS. http://www.lyrics228.net Je dispose aussi des sous-domaine, dont blog.lyrics228.net, Comme ça me donnait le HTTPS ROUGE Barré, juste apres le changement des url dans la table _options du site principal, jai du changé la totalité de http en https dans les tables de la BD. J’en ai fait pareil avec le sous domaine aussi, pourtant, cette erreur devient présente un peu partout quand ça accède en https:// que ce soit sur le www. ou sur le sous-domaine. ***** Votre connexion n’est pas privée NET::ERR_CERT_AUTHORITY_INVALID ***** Je ne sais pas vraiment… Read more »
Bonjour,
J’ai fais tout ce que vous avez dit. Sauf que moi, je rencontre ce message d’erreur :
Cette page ne fonctionne pas
votredomaine.com vous a redirigé à de trop nombreuses reprises.
Essayez de supprimer les cookies..
ERR_TOO_MANY_REDIRECTS
Que dois-je faire ?
Salut Zentren, Sans avoir l’adresse de ton site (ni accès à l’administration évidemment), c’est pas hyper évident. De mémoire et pour ce genre d’erreurs, tu peux chercher : – Ben déjà en effaçant les cookies comme suggéré, mais je pense que tu l’as déjà fait 🙂 – Dans l’administration, paramètres généraux, peut-être que l’adresse du site ne correspond pas à ce qu’il faut (essaie par exemple avec ou sans les www) – Dans ton .htaccess, tu as peut-être une règle qui interfère (relis bien le paragraphe de mon article qui commence par « Si vous aviez inséré une règle pour rediriger… Read more »