Passez en HTTPS: WordPress + Clouflare + Let’s encrypt

# Astuce, # Site web, # Tutoriels

https-wordpress

Apprenez à sécuriser votre site web WordPress en passant au tout https en utilisant le VPN Cloudflare et le fournisseur de certificat Let's encrypt.

 

Comme vous pouvez le constater, le site seeyar.fr est passé en https depuis peu ( http avec une surcouche TLS). Nous avons d'ailleurs réfléchi longuement avant de nous décider à faire le premier pas, voici quelques arguments:

  • D'abord parce que nous pensions à tord que le fait de passer au tout https serait techniquement difficile et long à mettre en oeuvre. Ce fut au final loin d’être le cas pour notre plus grand bonheur mais cela a nécessité quelques investigations et recherche d'informations.
  • Dans un deuxième temps, nous avions eu quelques réflexions par rapport au SEO et au référencement de nos liens. Le fait de passer en https nous faisait craindre des pénalités concernant le "duplicate content" (duplication de contenu). On trouve sur le net beaucoup de débats à ce sujet.
  • Sécurité et protection de votre vie privé, voila ce qui nous a donné envie de relevé ce défi, aujourd’hui les gens sont de plus en plus méfiants, le cadenas vert renvoie une bonne image aux lecteurs d'un site, cela devient un gage de qualité.

Laissons place au tutoriel! Il y a 7 étapes à effectuer dans cet ordre, la dernière étape étant optionnelle.

1/ Let's Encrypt

Let's Encrypt est une autorité de certification qui fournit des certificats gratuits pour le protocole cryptographique TLS au moyen d'un processus automatisé.

Aujourd'hui quasiment tous les hébergeurs proposent l'installation en automatique d'un certificat Let's Encrypt. C'est le cas de notre hébergeur Evxonline qui le propose gratuitement pour tous les hébergement en mutualisés.

Exemple d'installation sous panel plesk:

 

 

2/ Activer le SSL sous Cloudflare

  • Activer le ssl en full strict:


https-wordpress-1

Paramétrez le ssl en full(strict)

 

  • Descendez tout en bas, et activez la fonction Automatic HTTPS Rewrites, ce qui vous permettra de régler un grand nombre de problèmes de content mixed.

 

https-wordpress-2

On parle de content mixed quand une page propose un mélange de contenu en http et en https, ce qui est a éviter totalement pour bénéficier du beau cadenas tout vert

 

3/ La redirection d'URL via votre .htaccess

Ouvrez filezilla et éditez votre fichier .htaccess, ajoutez ce code:

Ce qui permettra de rediriger vos pages en http vers https

 

4/ Le changement d'url depuis le panneau administration WordPress

https-wordpress-3

Dans Réglages / Général

 

https-wordpress-4

Remplacez http par https

 

5/ Passer le panneau d'administration wordpress en https

Avec filezilla, éditez le fichier config.php et ajoutez ce code en toute fin de fichier:

 

6/Référencement des liens existants

Voici une astuce pour faire en sorte que les liens référencés en http soit redirigés vers leur consœur en https. Depuis le panel Cloudflare, nous allons ajouter une règle:

https-wordpress-6

Sélectionnez Page rule

 

https-wordpress-5

Forcez  la redirection de tous les liens référencés en http vers https

 

7/ Etape final optionnelle et dangereuse

Si vous êtes arrivé jusqu'à cette 7ème étape, bravo! Vous avez un site qui devrait posséder le cadenas vert à quelques choses prêts....

Vous allez avoir un problème de mixed content par rapport à toute les images anciennement sauvegardées sur votre site. A l'ouverture de l'image votre jolie cadenas vert devrait repasser en gris. Vous l'aurez compris, il va falloir modifier la base de donnée.

  • A ce propos, un script php qu'il faudra dézipper à la racine de votre site propose de réecrire toutes vos URL en http, en https. Liens:

DATABASE SEARCH AND REPLACE SCRIPT IN PHP

Nous avons testé la version 3.1 qui est compatible php 5.4 et 7.0

 

  • Ensuite, depuis votre navigateur tapez sur la barre d'url :

Vous devriez tomber sur cela:

https-wordpress-7

Remplacez bien http://votresite.fr par https://votresite.fr

 

  • Enfin lancez live-dry suivi de update details
  • Et pour finir cliquez sur  delete me pour supprimer le script ainsi que son dossier

Fin du tuto, Enjoy!