Passez votre site en HTTPS facilement avec CloudFlare.

HTTPS CloudFlare

Passer son site en HTTPS va devenir en 2017 une nécessité : outre le fait que notre ami Google nous le conseille, la plupart des navigateurs s’y mettent eux aussi en affichant des messages d’avertissement. Le principe : si votre site a un formulaire d’inscription ou un formulaire de connexion, votre site doit être en https si vous ne voulez pas que vos visiteurs aient une alerte « Attention, ce site n’est pas sécurisé ».

Cet avertissement est actuellement visible sur Chrome.

Mais il est fort à parier que nous allons le voir arriver sur tous les navigateurs. Il est donc temps de vous y mettre dès aujourd’hui.

Même si vous n’êtes qu’un affilié utilisant un formulaire d’inscription basé sur la co-registration : vous êtes ciblé par cet avertissement !

Quels sont mes solutions ?

Heureusement, il existe pas mal de solutions à disposition !

En gratuit, je n’en vois que deux :

  • Mon hébergeur a le HTTPS par défaut sur mon plan (Exemple : les mutualisés OVH)
  • Utiliser les certificats gratuits Let’s Encrypt
  • Utiliser un service tel que CloudFlare

Pour le second lien, je vous laisse regarder sur le site et avec votre administrateur système : ça dépend de votre installation, et je ne suis pas assez calé là dedans que pour pouvoir vous expliquer la démarche à suivre. C’est pour cette raison que j’opte pour CloudFlare qui est assez simple d’utilisation 🙂

Si vous optez pour ne pas passer par CloudFlare, vous pouvez directement passer a la section « Place aux tests ! ». 🙂

Mais est-ce que je peux foncer tête baissée ?

Non ! Passer au HTTPS est un gros changement, et il faut que ça soit bien géré, surtout si votre site est déjà en ligne et référencé.

Étape 1 : Je vérifie que tous les liens sont prêt.

Tous les liens de votre site vont devoir pointer avec le scheme « https ».

Il faut donc regarder à ce que soit vos liens soient écrits en « relatifs » (/dossier/index.html) ou que le domaine dans les URLs absolues soit une variable que vous pourrez modifier en un clic en temps voulu !

Par exemple, dans le DMScript, il faudra aller dans la base de donnée « {prefixe}_config » modifier l’adresse du site enregistrée à la ligne « site_url »

Étape 2 : Vérifier tous les fichiers liés sur la page.

Votre page utilise des feuilles de styles, des fichiers javascripts et affiche des images.

Lors de l’utilisation du HTTPS, l’ensemble de ces fichiers devront être lié sur le même schème : il faut donc faire le tour de tous les fichiers du thème afin de vérifier que ce passage sera correct :

  • Si c’est un fichier sur le même domaine : mettez le lien relatif (Exemple : /media/js/script.js)
  • Si c’est un lien externe, vérifiez qu’il est disponible en HTTPS et mettez déjà ce schème sur votre site

Faites bien attention de tout vérifier, ça prend du temps mais toutes ces étapes sont nécessaires 🙂

Passons à CloudFlare.com ! Quel est la première étape ?

La première étape va être d’ajouter son site à CloudFlare et de mettre à jour les DNS de votre site.

L’ajout d’un site à CloudFlare, les différentes étapes :

1 On ajoute le domaine à CloudFlare

Entrez le domaine et cliquez sur « Begin scan ».

Une fois le scan terminé, vous devez cliquer sur le bouton « Continue ».

2 Configuration de votre zone DNS

Lors du scan, CloudFlare a trouvé l’ensemble des enregistrement de la zone DNS du domaine. Ceux-ci sont listés dans la table en dessous.

Vérifiez que tous les enregistrements de votre zone DNS ont étés correctement repris, et cliquez sur les logo cloudflare afin d’activer le « cache » sur les domaines / sous-domaines de votre site (n’activez le tout que sur les enregistrements correspondant à votre www et sous-domaines utilisés de votre site :).

3 Opter pour le plan gratuit

[Joke] Comme on est radin, on sait que chaque sou compte : On sélectionne « Free Website » et on continue.

4 On met a jour les DNS

Il faut maintenant mettre à jour les DNS de son domaine par ceux qui vous sont donnés par CloudFlare.

La configuration de CloudFlare de base est faite, il faut maintenant attendre que les DNS soient mis à jour avant d’aller plus loin dans le processus. Mais on a déjà fait une bonne partie du travail !

La configuration CloudFlare.com à mettre en place pour votre site

Maintenant que le site est ajouté à CloudFlare et que les DNS sont à jour, on va faire quelques optimisations dans la configuration de base de CloudFlare pour qu’elle soit adapté à notre business.

Crypto :

C’est la fameuse partie qui va gérer le https justement 🙂

Pour le moment, nous n’allons toucher qu’à la première option listée et nommée « Encrypt communication to and from your website using SSL. ». Sélectionnez l’option « Full » dans la liste déroulante à droite.

Option SSL CloudFlare

Le certificat peut prendre une journée avant d’être disponible pour le domaine, une fois actif, vous verrez la note « Active certificate » sur fond vers en dessous du select.

Firewall:

Nous ne sommes pas une banque, notre but est de recevoir un maximum de trafic, nous n’allons donc pas mettre un niveau de sécurité élevé 🙂

Voici la configuration à mettre en place :

  • Security Level : Essentially Off

Speed:

Profitons en même temps des autres fonctionnalités de CloudFlare pour son site !

Voici la configuration à mettre en place :

  • Auto Minify : Cochez les cases HTML / CSS / JS
  • Rocket Loader : Off

Caching:

Comme le point précédent, on prodite de quelques éléments !

Voici la configuration à mettre en place :

  • Caching Level : Standard
  • Browser Cache Expiration : 5 Days
  • Always Online : On

A savoir :

Vu la mise en cache et la minimisation des fichiers, chaque fois que vous toucherez à votre site, vous devrez revenir sur CloudFlare : le mettre en mode « Développement » durant les modifications. Et ne pas hésiter à purger le cache une fois vos modifications terminées.

Place aux tests !

Une fois que la configuration est terminée et que la note « Active certificate » est affichée dans votre interface, votre site devrait être disponible en HTTPS.

Mais avant de forcer cette version à tous vos visiteurs, je vous conseille vivement d’aller tester toutes vos pages avant : on a souvent oublié un élément et il arrive que des scripts ont besoin d’être mis à jour pour fonctionner en https. C’est mieux de le voir à temps qu’une fois que le trafic est dessus !

Les tests sont bons, que dois-je faire ?

Il est temps d’envoyer le trafic sur la version https et d’en faire la seule version possible !

Le fichier .htaccess :

Vous placez dans votre fichier .htaccess un bout de code pour forcer l’utilisation du https sur votre domaine :

Attention à la seconde partie de ce dernier : Si vous avez déjà un bout de code forçant (ou non) le www, ces deux derniers peuvent créer une boucle de redirection.

Nous y sommes donc arrivé, notre site est en https 🙂