Configurer le protocole HTTPS localement

Configurer le protocole HTTPS dans un développement local n’est qu’une question de gout, je pense que c’est la première approche que tout programmeur devrait avoir quand on en lui parle mais en réalité, le développement web localement, qu’il soit pour développer en se servant d’un langage tel que Ruby, PHP, JavaScript etc., d’un CMS WordPress, Joomla, Drupal …etc. ou d’un Framework comme Laravel, Symfony, Ruby on rails… etc., l’objectif commun est de simuler un environnement qui ressemble tout au plus à celle de son projet en production.

Configurer le protocole HTTPS dans son développement local fait partit des objectifs à attendre quand on programme localement :

  • Si votre projet en production sera sécurisé par le protocole HTTPS, quoi de mieux que de développer directement avec un environnement similaire à celui de la production
  • C’est une meilleure façon d’apprendre et de comprendre le fonctionnement de ce protocole qui n’est rien d’autre que du http mais avec une surcouche du protocole SSL/TLS

Bref, pour éviter d’avoir des éventuels problèmes que vous n’avez eu localement mais qui enchaîne dans la production.

Le protocole HTTPS, C’est quoi et comment le configurer ?

Je ne crois pas que je serais celui qui va vous apprendre ce protocole pendant que vous êtes en train de lire un article technique de celui-ci mais grosso-modo, et pour les plus débutants que vous pourrait être, le protocole HTTPS fait recourt au petit cadenas vert dans la barre d’adresse de votre navigateur ou tout simplement tous les url commençant par Https://

ssl-active

C’est un mélange de http et SSL ou TSL la version récente de SSL. Cela assure l’authentification et l’intégrité de la communication entre le client et le serveur.

Systématiquement, quand on veut une surcouche TLS dans son site (E-commerce, banque, etc.), pour bien évidemment sécuriser et assurer l’intégrité de la transmission de données entre les visiteurs de votre site et votre serveur, Il faut faire appel à une autorité de certification reconnue telle que Let’s Encrypte, Comodo, GeoTrust, …etc.  Ces autorités ou fournisseurs, en achetant le certificat (Oui, ce n’est pas gratuit), ils envoient généralement par email les instructions sur comment le configurer dans votre serveur. Certains hébergeurs incluent dans leur pack le certificat de sécurité, qui dès lors, vous n’avez pas à vous prendre la tête mais hélas, là ce n’est pas notre cas car nous nous voulons le faire localement, et déjà, on ne peut pas acheter car c’est pour un test.

Configurer le protocole HTTPS dans son serveur

Je fais ma configuration avec comme environnement Windows, Xampp (apache) et j’ai auto-signé le certificat avec Openssl qui est installé par défaut avec xampp. Libre à vous d’adapter selon votre environnement

Alors, avec mon environnement, si je tente déjà d’accéder avec le protocole https://localhost, le navigateur ralle NET::ERR_CERT_AUTHORITHY_INVALID :

ERR_CERT_AUTHORITY_INVALID

C’est qu’on va commencer en premier par faire c’est de générer nous-même le certificat qu’on aurait pu acheter, on parle de l’auto-signature

Pour cela :

  1. commencez d’abord par créer un fichier localhost.cnf dans le dossier C:\xampp\apache\conf et copier-coller ceci dans ce fichier :

    https local dev
  2. Ouvrez la ligne de commande à partir de C:\xampp\apache\conf
  3. Taper cette commande et cliquer sur “enter” pour chaque prompt. Le plus important de ses informations est le “Common name” qui devrait correspondre à votre hôte. Mon cas c’est localhost
    openssl req -config localhost.cnf -new -sha256 -newkey rsa:2048 -keyout localhost.key -nodes -x509 -out localhost.crt
    generation-crt

 

    Cette commande a belle et bien généré le certificat (localhost.crt) et la clé publique (localhost.key) dans le dossier C:\xampp\apache\conf qu’on aura à configurer

Configuration apache

Après la génération de notre certificat auto-signé, il nous faut configurer notre serveur, dont mon cas c’est apache :

  1. On doit dire à notre serveur qu’il doit charger le module SSL
    Ouvrez le fichier C:\xampp\apache\conf\httpd.cnf et enlever dièse (#) qui se trouve devant LoadModule ssl_module modules/mod_ssl.so
  2. On doit dire à notre serveur qu’il doit charger le certificat et la clé publique pour les connexions utilisant le protocole HTTPS
    Ouvrez le fichier C:\xampp\apache\conf\extra\httpd-ssl.cnf et faites pointer SSLCertificateFile dans le certificat généré (localhost.crt) et SSLCertificateKeyFile dans la clé générée (localhost.key)point-cert-key

Configurer le système d’exploitation

Nous avons généré le certificat, configurer le serveur apache, mais le plus important de ces étapes est bien-sûr de faire à ce que son système puisse reconnaître son certificat auto-signé. En effet, si quand vous accédez dans un site utilisant le protocole https le navigateur arrive à le connaitre, c’est grâce aux certificats de fournisseur confiant présent dans votre machine que le système dispose préalablement. Notre certificat n’est pas encore reconnu par le système, nous devront dire au système d’importer le certificat dans son système. Pour cela, sous Windows bien-sûr

  1. Qu’est-ce qu’il est simple que de doubler cliquer sur le fichier C:\xampp\apache\conf\localhost.crt qu’on a généré
  2. Cliquez sur « installer un certificat », choisir si vous voulez importer le certificat pour l’utilisateur courant ou pour le système en générale, moi j’ai choisi « ordinateur local », donc, pour tout le système, et cliquez sur suivant
    importer-crt
  3. Faisons simple et suivez ce que l’image ci-dessous vous dit de faire dans l’ordre numératif
    importer-crt
  4. Et une fois fait, vous avez fini de configurer le système

Redémarrez votre serveur et votre navigateur

Si vous avez bien suivi ce que j’ai montré plus haut et qu’on est dans le même contexte, vous devriez vous retrouver avec quelque chose de similaire à cette image :

ssl-active

Ajouter un commentaire

2 Commentaires

  1. Razafra 22 mai 2017
  2. bienvenu 17 mai 2017
Lire les articles précédents :
Connecter les utilisateurs de vos applications web et mobile sans mot de passe

Ces derniers les applications web ou mobile ont tendance à gérer les utilisateurs peu importe leurs objectifs. gérer les utilisateurs...

Fermer