Utiliser HTTPS pour le développement local

Maud Nalpas

La plupart du temps, http://localhost se comporte comme HTTPS à des fins de développement. Toutefois, dans certains cas particuliers, comme l'utilisation de noms d'hôte personnalisés ou de cookies sécurisés sur plusieurs navigateurs, vous devez configurer explicitement votre site de développement pour qu'il se comporte comme HTTPS afin de représenter précisément le fonctionnement de votre site en production. (Si votre site Web de production n'utilise pas HTTPS, passez à HTTPS en priorité.)

Cette page explique comment exécuter votre site en local avec HTTPS.

Remarque : Dans cet article, les affirmations concernant localhost sont également valables pour 127.0.0.1 et [::1], car elles décrivent toutes deux l'adresse de l'ordinateur local (également appelée adresse de bouclage). Pour plus de simplicité, ces instructions ne spécifient pas de numéros de port. Ainsi, lorsque vous voyez http://localhost, lisez-le comme http://localhost:{PORT} ou http://127.0.0.1:{PORT}.

Pour obtenir des instructions brèves, consultez la référence rapide mkcert.**

Exécuter votre site localement avec HTTPS à l'aide de mkcert (recommandé)

Pour utiliser HTTPS avec votre site de développement local et accéder à https://localhost ou https://mysite.example (nom d'hôte personnalisé), vous avez besoin d'un certificat TLS signé par une entité approuvée par votre appareil et votre navigateur, appelée autorité de certification (AC) de confiance. Avant de créer une connexion HTTPS, le navigateur vérifie si le certificat de votre serveur de développement est signé par une autorité de certification de confiance.

Nous vous recommandons d'utiliser mkcert, une autorité de certification multiplate-forme, pour créer et signer votre certificat. Pour d'autres options utiles, consultez Exécuter votre site en local avec HTTPS : autres options.

De nombreux systèmes d'exploitation incluent des bibliothèques permettant de créer des certificats, comme openssl. Toutefois, elles sont plus complexes et moins fiables que mkcert, et ne sont pas nécessairement multiplate-formes, ce qui les rend moins accessibles aux grandes équipes de développement.

Attention :

• N'exportez ni ne partagez jamais le fichier rootCA-key.pem que mkcert crée automatiquement lorsque vous exécutez mkcert -install. Si un pirate informatique met la main sur ce fichier, il peut créer des attaques de type "on-path" pour n'importe quel site que vous pourriez visiter. Ils pourraient intercepter les requêtes sécurisées envoyées par votre ordinateur à n'importe quel site (votre banque, votre fournisseur de services de santé ou vos réseaux sociaux, par exemple). Si vous avez besoin de savoir où se trouve rootCA-key.pem pour vous assurer qu'il est en sécurité, exécutez mkcert -CAROOT.
• N'utilisez mkcert qu'à des fins de développement et, par conséquent, ne demandez jamais aux utilisateurs finaux d'exécuter des commandes mkcert.
• Équipes de développement : tous les membres de votre équipe doivent installer et exécuter mkcert séparément (et non stocker et partager l'autorité de certification et le certificat).

Configuration

1. Installez mkcert (une seule fois).

   Suivez les instructions pour installer mkcert sur votre système d'exploitation. Par exemple, sur macOS :

   brew install mkcert
   brew install nss # if you use Firefox
   

2. Ajoutez mkcert à vos autorités de certification racine locales.

   Dans le terminal, exécutez la commande suivante :

   mkcert -install
   

   Cela génère une autorité de certification (CA) locale. L'autorité de certification locale générée par mkcert n'est approuvée que localement, sur votre appareil.

3. Générez un certificat pour votre site, signé par mkcert.

   Dans votre terminal, accédez au répertoire racine de votre site ou à celui dans lequel vous souhaitez conserver votre certificat.

   Exécutez ensuite la commande ci-dessous :

   mkcert localhost
   

   Si vous utilisez un nom d'hôte personnalisé tel que mysite.example, exécutez la commande suivante :

   mkcert mysite.example
   

   Cette commande a deux effets :

   • Génère un certificat pour le nom d'hôte que vous avez spécifié.
   • Permet à mkcert de signer le certificat.

   Votre certificat est maintenant prêt et signé par une autorité de certification à laquelle votre navigateur fait confiance localement.

4. Configurez votre serveur pour qu'il utilise le certificat TLS que vous venez de créer.

   Les détails de la procédure à suivre dépendent de votre serveur. Voici quelques exemples :

   👩🏻‍💻 Avec Node :

   server.js (remplacez {PATH/TO/CERTIFICATE...} et {PORT}) :

   const https = require('https');
   const fs = require('fs');
   const options = {
     key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'),
     cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),
   };
   https
     .createServer(options, function (req, res) {
       // server code
     })
     .listen({PORT});
   

   👩🏻‍💻 Avec http-server :

   Démarrez votre serveur comme suit (remplacez {PATH/TO/CERTIFICATE...}) :

   http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
   

   -S exécute votre serveur avec HTTPS, tandis que -C définit le certificat et -K définit la clé.

   👩🏻‍💻 Avec un serveur de développement React :

   Modifiez votre fichier package.json comme suit, en remplaçant {PATH/TO/CERTIFICATE...} :

   "scripts": {
   "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
   

   Par exemple, si vous avez créé un certificat pour localhost dans le répertoire racine de votre site :

   |-- my-react-app
       |-- package.json
       |-- localhost.pem
       |-- localhost-key.pem
       |--...
   

   Votre script start devrait alors se présenter comme suit :

   "scripts": {
       "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
   

   👩🏻‍💻 Autres exemples :

   • Serveur de développement Angular
   • Python

5. Ouvrez https://localhost ou https://mysite.example dans votre navigateur pour vérifier que vous exécutez votre site en local avec HTTPS. Vous ne verrez aucun avertissement du navigateur, car votre navigateur considère mkcert comme une autorité de certification locale.

Référence rapide mkcert

Référence rapide mkcert

Pour exécuter votre site de développement local avec HTTPS :

1. Configurez mkcert.

   Si ce n'est pas déjà fait, installez mkcert, par exemple sur macOS :

   brew install mkcert
   
   
   

   Consultez Installer mkcert pour obtenir des instructions pour Windows et Linux.

   Créez ensuite une autorité de certification locale :

   mkcert -install

2. Créez un certificat approuvé.

   mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}

   Cela crée un certificat valide que mkcert signe automatiquement.

3. Configurez votre serveur de développement pour qu'il utilise HTTPS et le certificat que vous avez créé à l'étape 2.

Vous pouvez désormais accéder à https://{YOUR HOSTNAME} dans votre navigateur, sans avertissement.

Attention  : N'effectuez cette opération que pour des fins de développement et n'exportez ni ne partagez jamais le fichier rootCA-key.pem. Si vous avez besoin de savoir où se trouve ce fichier pour vous assurer qu'il est sûr, exécutez mkcert -CAROOT.

</div>

Exécuter votre site en local avec HTTPS : autres options

Voici d'autres façons de configurer votre certificat. Ces méthodes sont généralement plus complexes ou plus risquées que l'utilisation de mkcert.

Certificat autosigné

Vous pouvez également choisir de ne pas utiliser d'autorité de certification locale comme mkcert et de signer vous-même votre certificat. Cette approche présente quelques pièges :

• Les navigateurs ne vous font pas confiance en tant qu'autorité de certification. Ils afficheront donc des avertissements que vous devrez contourner manuellement. Dans Chrome, vous pouvez utiliser le flag #allow-insecure-localhost pour contourner automatiquement cet avertissement sur localhost.
• Cela n'est pas sûr si vous travaillez sur un réseau non sécurisé.
• Il n'est pas nécessairement plus facile ni plus rapide que d'utiliser une CA locale comme mkcert.
• Les certificats autosignés ne se comportent pas exactement de la même manière que les certificats approuvés.
• Si vous n'utilisez pas cette technique dans un contexte de navigateur, vous devez désactiver la validation du certificat pour votre serveur. Si vous oubliez de la réactiver en production, cela peut entraîner des problèmes de sécurité.

Avertissements affichés par les navigateurs lorsqu'un certificat autosigné est utilisé.

Si vous ne spécifiez pas de certificat, les options HTTPS du serveur de développement de React et Vue créent un certificat autosigné en arrière-plan. Cette méthode est rapide, mais elle présente les mêmes avertissements de navigateur et autres inconvénients que les certificats autosignés. Heureusement, vous pouvez utiliser l'option HTTPS intégrée des frameworks d'interface et spécifier un certificat approuvé localement créé à l'aide de mkcert ou d'un outil similaire. Pour en savoir plus, consultez l'exemple mkcert avec React.

Pourquoi les navigateurs ne font-ils pas confiance aux certificats autosignés ?

Si vous ouvrez votre site exécuté localement dans votre navigateur à l'aide de HTTPS, votre navigateur vérifie le certificat de votre serveur de développement local. Lorsqu'il constate que vous avez signé vous-même le certificat, il vérifie si vous êtes enregistré en tant qu'autorité de certification de confiance. Comme ce n'est pas le cas, votre navigateur ne peut pas approuver le certificat et affiche un avertissement indiquant que votre connexion n'est pas sécurisée. La connexion HTTPS est tout de même établie si vous continuez, mais à vos propres risques.

Pourquoi les navigateurs n'approuvent pas les certificats autosignés

Certificat signé par une autorité de certification standard

Vous pouvez également utiliser un certificat signé par une autorité de certification officielle. Cela entraîne les complications suivantes :

• Vous devez effectuer plus de tâches de configuration que lorsque vous utilisez une technique d'autorité de certification locale comme mkcert.
• Vous devez utiliser un nom de domaine valide que vous contrôlez. Cela signifie que vous ne pouvez pas utiliser d'AC officielles pour les éléments suivants :
  • localhost et d'autres noms de domaine réservés tels que example ou test.
  • Tout nom de domaine que vous ne contrôlez pas.
  • Domaines de premier niveau non valides. Pour en savoir plus, consultez la liste des domaines de premier niveau valides.

Proxy inverse

Une autre option pour accéder à un site exécuté localement avec HTTPS consiste à utiliser un proxy inverse tel que ngrok. Cela présente les risques suivants :

• Toute personne avec laquelle vous partagez l'URL du proxy inversé peut accéder à votre site de développement local. Cela peut être utile pour présenter votre projet à des clients, mais cela peut également permettre à des personnes non autorisées de partager des informations sensibles.
• Certains services de proxy inverse facturent l'utilisation. Le prix peut donc être un facteur à prendre en compte dans votre choix de service.
• Les nouvelles mesures de sécurité dans les navigateurs peuvent affecter le fonctionnement de ces outils.

Signaler (non recommandé)

Si vous utilisez un nom d'hôte personnalisé comme mysite.example dans Chrome, vous pouvez utiliser un indicateur pour forcer le navigateur à considérer mysite.example comme sécurisé. Évitez de le faire pour les raisons suivantes :

• Vous devez être sûr à 100% que mysite.example est toujours résolu en adresse locale. Sinon, vous risquez de divulguer des identifiants de production.
• Cet indicateur ne fonctionne que dans Chrome. Vous ne pouvez donc pas déboguer sur plusieurs navigateurs.

Merci beaucoup à tous les relecteurs et contributeurs pour leurs contributions et leurs commentaires, en particulier à Ryan Sleevi, Filippo Valsorda, Milica Mihajlija et Rowan Merewood. 🙌

Arrière-plan de l'image principale par @anandu sur Unsplash, modifié.