HTTPS localhost : Configurer le protocole HTTPS en local

Configurer le protocole HTTPS en 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 à celui dont son projet sera exécuté en production.

Configurer le protocole HTTPS en local fait partit des objectifs à atteindre quand on programme localement :

• Si votre projet en production sera sécurisé par le protocole HTTPS (ce qui est déjà recommandé que cela soit le cas), 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 s’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://

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 que vous êtes abonné, vous n’avez pas à vous prendre la tête sur la manière de configurer cela mais 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, donc on va générer nous même cela.

Configurer le protocole HTTPS localhost

[stextbox id= »info »] J’ai fait 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 [/stextbox]

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 :

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 car cela ne sera pas reconnu par les systèmes d’exploitations.

Pour cela :

1. 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 :

      [ req ]
      
      default_bits        = 2048
      default_keyfile     = server-key.pem
      distinguished_name  = subject
      req_extensions      = req_ext
      x509_extensions     = x509_ext
      string_mask         = utf8only
      
      [ subject ]
      
      countryName                 = Pays (2 lettre)
      countryName_default         = CD
      
      stateOrProvinceName         = Province (nom complet)
      stateOrProvinceName_default = Kinshasa
      
      localityName                = Commune 
      localityName_default        = Ngaliema
      
      organizationName            = Organisme (ex: entreprise)
      organizationName_default    = Informagenie
      
      commonName                  = Common Name (e.g. server FQDN or YOUR name)
      commonName_default          = localhost
      
      emailAddress                = Adresse email
      emailAddress_default        = test@localhost
      
      [ x509_ext ]
      
      subjectKeyIdentifier   = hash
      authorityKeyIdentifier = keyid,issuer
      
      basicConstraints       = CA:FALSE
      keyUsage               = digitalSignature, keyEncipherment
      subjectAltName         = @alternate_names
      nsComment              = "OpenSSL Generated Certificate"
      
      [ req_ext ]
      
      subjectKeyIdentifier = hash
      
      basicConstraints     = CA:FALSE
      keyUsage             = digitalSignature, keyEncipherment
      subjectAltName       = @alternate_names
      nsComment            = "OpenSSL Generated Certificate"
      
      [ alternate_names ]
      
      DNS.1       = localhost

      

   2. Ouvrez la ligne de commande à partir de C:\xampp\apache\conf
   3. Taper cette commande et cliquer sur « enter » pour chaque prompt.
      openssl req -config localhost.cnf -new -sha256 -newkey rsa:2048 -keyout localhost.key -nodes -x509 -out localhost.crt
      

Cette commande a belle et bien générée 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)
   

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 sur un site utilisant le protocole https le navigateur arrive à le connaitre, c’est grâce aux certificats de fournisseurs reconnus et confiants 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
   
3. Faisons simple et suivez ce que l’image ci-dessous vous dit de faire dans l’ordre numératif
   
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 :