Comment faire fonctionner HTTPS sur votre environnement de développement local en 5 minutes

Presque tous les sites Web que vous visitez aujourd'hui sont protégés par HTTPS. Si le vôtre ne l'est pas encore, ça devrait l'être. Sécuriser votre serveur avec HTTPS signifie également que vous ne pouvez pas envoyer de requêtes à ce serveur à partir d'un serveur qui n'est pas protégé par HTTPS. Cela pose un problème pour les développeurs qui utilisent un environnement de développement local, car tous fonctionnent de manière prête à l'emploi //localhost.

Au démarrage dont je fais partie, nous avons décidé de sécuriser nos points de terminaison AWS Elastic Load Balancer avec HTTPS dans le cadre d'une démarche visant à améliorer la sécurité. Je suis tombé sur une situation où les demandes de mon environnement de développement local au serveur ont commencé à être rejetées.

Une recherche rapide sur Google plus tard, j'ai trouvé plusieurs articles comme celui-ci, celui-ci ou celui-ci avec des instructions détaillées sur la façon dont je pourrais implémenter HTTPS localhost. Aucune de ces instructions ne semblait fonctionner même après que je les ai suivies religieusement. Chrome NET::ERR_CERT_COMMON_NAME_INVALIDm'a toujours lancé une erreur.

Le problème

Toutes les instructions détaillées que j'avais trouvées étaient correctes pour l'époque où elles ont été rédigées. Plus maintenant.

Après une tonne de recherches sur Google, j'ai découvert que la raison pour laquelle mon certificat local était rejeté était que Chrome avait abandonné la prise en charge de la correspondance commonName dans les certificats, ce qui nécessitait en fait un subjectAltName depuis janvier 2017.

La solution

Nous utiliserons OpenSSL pour générer tous nos certificats.

Étape 1: Certificat SSL racine

La première étape consiste à créer un certificat SSL (Root Secure Sockets Layer). Ce certificat racine peut ensuite être utilisé pour signer n'importe quel nombre de certificats que vous pourriez générer pour des domaines individuels. Si vous n'êtes pas familier avec l'écosystème SSL, cet article de DNSimple fait un bon travail en présentant les certificats SSL racine.

Générez une clé RSA-2048 et enregistrez-la dans un fichier rootCA.key. Ce fichier sera utilisé comme clé pour générer le certificat SSL racine. Vous serez invité à entrer une phrase de passe que vous devrez saisir chaque fois que vous utiliserez cette clé particulière pour générer un certificat.

openssl genrsa -des3 -out rootCA.key 2048

Vous pouvez utiliser la clé que vous avez générée pour créer un nouveau certificat SSL racine. Enregistrez-le dans un fichier nommé rootCA.pem. Ce certificat aura une validité de 1 024 jours. N'hésitez pas à le changer pour le nombre de jours que vous souhaitez. Vous serez également invité à fournir d'autres informations facultatives.

openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

Étape 2: approuver le certificat SSL racine

Avant de pouvoir utiliser le certificat SSL racine nouvellement créé pour commencer à émettre des certificats de domaine, il y a encore une étape. Vous devez dire à votre Mac de faire confiance à votre certificat racine afin que tous les certificats individuels émis par celui-ci soient également approuvés.

Ouvrez Keychain Access sur votre Mac et accédez à la catégorie Certificats dans votre trousseau système. Une fois là-bas, importez le en rootCA.pemutilisant Fichier> Importer des éléments. Double-cliquez sur le certificat importé et modifiez le menu déroulant «Lors de l'utilisation de ce certificat:» sur Toujours vrai dans la section Confiance.

Votre certificat devrait ressembler à quelque chose comme ceci dans Keychain Access si vous avez correctement suivi les instructions jusqu'à présent.

Étape 2: Certificat SSL de domaine

Le certificat SSL racine peut désormais être utilisé pour émettre un certificat spécifiquement pour votre environnement de développement local situé sur localhost.

Créez un nouveau fichier de configuration OpenSSL server.csr.cnfpour pouvoir importer ces paramètres lors de la création d'un certificat au lieu de les saisir sur la ligne de commande.

[req] default_bits = 2048 prompt = no default_md = sha256 distinguished_name = dn [dn] C=US ST=RandomState L=RandomCity O=RandomOrganization OU=RandomOrganizationUnit [email protected] CN = localhost

Créez un v3.extfichier afin de créer un certificat X509 v3. Remarquez comment nous spécifions subjectAltNameici.

authorityKeyIdentifier=keyid,issuer basicConstraints=CA:FALSE keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment subjectAltName = @alt_names [alt_names] DNS.1 = localhost

Créez une clé de certificat pour localhostutiliser les paramètres de configuration stockés dans server.csr.cnf. Cette clé est stockée dans server.key.

openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <( cat server.csr.cnf )

Une demande de signature de certificat est émise via le certificat SSL racine que nous avons créé précédemment pour créer un certificat de domaine localhost. La sortie est un fichier de certificat appelé server.crt.

openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

Utilisez votre nouveau certificat SSL

Vous êtes maintenant prêt à sécuriser votre localhostavec HTTPS. Déplacez les fichiers server.keyet server.crtvers un emplacement accessible sur votre serveur et incluez-les lors du démarrage de votre serveur.

Dans une application Express écrite en Node.js, voici comment procéder. Assurez-vous de ne le faire que pour votre environnement local. Ne l'utilisez pas en production .

J'espère que vous avez trouvé ce tutoriel utile. Si vous n'êtes pas à l'aise avec l'exécution des commandes données ici par vous-même, j'ai créé un ensemble de scripts pratiques que vous pouvez exécuter rapidement pour générer les certificats pour vous. Plus de détails peuvent être trouvés sur le dépôt GitHub.

J'adore aider mes collègues développeurs Web. Suivez-moi sur Twitter et faites-moi savoir si vous avez des suggestions ou des commentaires. Si vous souhaitez montrer votre appréciation pour le travail que j'ai réalisé, que ce soit un article de blog, un projet open source ou juste un tweet amusant, vous pouvez m'acheter une tasse de café.