Trek au Népal – around-annapurna.com

WordPress en https (SSL) gratuitement avec Cloudflare

Wordpress en https (SSL) gratuitement avec Cloudflare wordpress https 450x299

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.

Wordpress en https (SSL) gratuitement avec Cloudflare cloudflare flexible ssl 450x185

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...
Wordpress en https (SSL) gratuitement avec Cloudflare firebug mixed content 450x37

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à !

Wordpress en https (SSL) gratuitement avec Cloudflare cloudflare rule 450x222

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 !

A lire également ...

The following two tabs change content below.
Wordpress en https (SSL) gratuitement avec Cloudflare
De retour de deux fantastiques voyages au Népal, j'ai décidé de partager les souvenirs de ces treks et d'essayer de vous donner envie de découvrir à votre tour les Annapurnas. Plus récemment, j'ai commencé à publier sur ce blog quelques astuces sur Wordpress et Google Inbox notamment... affaire à suivre !

Poster un Commentaire

8 Commentaires sur "WordPress en https (SSL) gratuitement avec Cloudflare"

Me notifier des
avatar
Trier par:   plus récents | plus anciens
lecrastinateur
Invité

Ç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.

Cyril
Invité

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 !

Gurwal
Invité

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/

Cyril
Invité

Très bonne suggestion ! J’utilise également ce plugin sur d’autres sites et il fonctionne parfaitement et très simplement !

Gurwal
Invité

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.

Elkwaet
Invité
Merci pour ce contenu. J’avais commencé entre temps à le faire, mais j’ai eu à arreter. Je vais le reessayer. Une chose @Cyril, 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 sous-domaines… Read more »
Cyril
Invité
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 »
ELK
Invité
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 »
wpDiscuz