Cette page a été traduite par l'API Cloud Translation.

Utiliser HTTPS pour le développement local

Maud Nalpas

La plupart du temps, http://localhost se comporte comme HTTPS pour le développement. objectifs. Il existe cependant des cas particuliers, comme des noms d'hôte personnalisés ou l'utilisation de cookies sécurisés dans tous les navigateurs, lorsque vous avez besoin pour configurer explicitement votre site de développement afin qu'il se comporte comme HTTPS qui représentent le fonctionnement de votre site en production. (Si votre site Web de production utilisez HTTPS, passer à HTTPS en priorité).

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

Pour obtenir de brèves instructions, consultez le guide de référence 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, autorité de certification (CA). Le navigateur vérifie si le certificat de votre serveur de développement est signé par un de confiance avant de créer une connexion HTTPS.

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

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

Attention : <ph type="x-smartling-placeholder">

N'exportez ni ne partagez jamais le fichier rootCA-key.pem que mkcert crée automatiquement lorsque vous exécutez mkcert -install. Un pirate informatique qui s'empare de ce fichier peut créer des attaques sur le chemin pour n'importe quel site que vous consultez. Ils pourraient intercepter les requêtes sécurisées envoyées par votre ordinateur à n'importe quel site (banque, prestataire de santé ou réseau social). Pour savoir où se trouve rootCA-key.pem pour vous assurer qu'il est sûr, exécutez mkcert -CAROOT.
N'utilisez mkcert qu'à des fins de développement et, par extension, 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

Installer mkcert (une seule fois).

Suivez les instructions. pour installer mkcert sur votre système d'exploitation. Par exemple, sous macOS:
```
brew install mkcert
brew install nss # if you use Firefox
```
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 qu'en local sur votre appareil.
Générez un certificat pour votre site, signé par mkcert.

Dans votre terminal, accédez au répertoire racine de votre site ou à un autre 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 fonctions:
- 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 le navigateur approuve localement.

Configurez votre serveur pour utiliser HTTPS le certificat TLS que vous venez de créer.

Les détails de cette procédure dépendent de votre serveur. Voici quelques exemples:

___________ 💻 Avec nœud:

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, -C définit le certificat et -K définit la clé.

___________ 💻 Avec un serveur de développement React:

Modifiez votre package.json comme suit, puis remplacez {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:

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

Ouvrez https://localhost ou https://mysite.example dans votre navigateur pour vérifiez que vous exécutez votre site localement avec HTTPS. Vous n'en verrez aucun Avertissements du navigateur, car votre navigateur fait confiance à mkcert en tant que certificat local une autorité compétente.

Référence rapide sur mkcert

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

Configurer mkcert.

Si vous ne l'avez pas encore fait, installez mkcert, par exemple sous macOS:
```
brew install mkcert
```
Cochez la case install mkcert. pour Windows et Linux.

Ensuite, créez une autorité de certification locale:
```
mkcert -install
```
Créez un certificat de confiance.
```
mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
```
Cela crée un certificat valide que mkcert signe automatiquement.
Configurez votre serveur de développement pour qu'il utilise le protocole HTTPS et le certificat que vous créé à l'étape 2.

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

Attention : À faire uniquement pour le développement objectifs et ne jamais exporter ni partager le fichier rootCA-key.pem Si vous avez besoin de savoir où se trouve ce fichier assurez-vous qu'il est sécurisé, exécutez mkcert -CAROOT.

</div>

Exécuter votre site localement avec HTTPS: autres options

Voici d'autres façons de configurer votre certificat. Il s'agit généralement plus compliqué ou plus risqué que l’utilisation de mkcert.

Certificat autosigné

Vous pouvez également décider de ne pas utiliser une autorité de certification locale comme mkcert, et mais signez vous-même votre certificat. Cette approche présente quelques écueils:

Les navigateurs ne vous font pas confiance en tant qu'autorité de certification, ils afficheront donc des avertissements que vous devez ignorer manuellement. Dans Chrome, vous pouvez utiliser l'indicateur #allow-insecure-localhost pour ignorer automatiquement cet avertissement sur localhost
Cette option n'est pas sécurisée si vous travaillez sur un réseau non sécurisé.
Ce n'est pas nécessairement plus facile ni plus rapide que d'utiliser une AC locale comme mkcert.
Les certificats autosignés ne se comportent pas exactement de la même manière que les certificats de confiance certificats.
Si vous n'utilisez pas cette technique dans un navigateur, vous devez désactiver du certificat pour votre serveur. Vous avez oublié de la réactiver en production entraîne des problèmes de sécurité.

Des captures d'écran des avertissements s'affichent dans les navigateurs lorsqu'un certificat autosigné est utilisé. — Les avertissements s'affichent dans les navigateurs lorsqu'un certificat autosigné est utilisé.

Si vous ne spécifiez pas de certificat, l'API React et Vue les options HTTPS du serveur de développement créent un certificat autosigné dans le fichier sous le capot. C'est rapide, mais les mêmes avertissements et les pièges liés aux certificats autosignés. Heureusement, vous pouvez utiliser l'interface des frameworks l'option HTTPS intégrée et de spécifier un certificat approuvé localement créé à l'aide de mkcert ou similaire. Pour en savoir plus, consultez les Exemple mkcert avec React

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

Si vous ouvrez le site exécuté localement dans votre navigateur à l'aide du protocole HTTPS, votre vérifie le certificat de votre serveur de développement local. Quand le certificat vous-même, il vérifie si vous êtes enregistré en tant qu’autorité de certification de confiance. Parce que vous êtes non, votre navigateur ne peut pas faire confiance au certificat et affiche un avertissement vous indiquant que votre connexion n'est pas sécurisée. Il crée tout de même le protocole HTTPS connexion si vous continuez, mais vous le faites à vos propres risques.

Schéma expliquant pourquoi les navigateurs ne font pas confiance aux certificats autosignés : — Pourquoi les navigateurs ne font pas confiance aux certificats autosignés.

Certificat signé par une autorité de certification standard

Vous pouvez également utiliser un certificat signé par une autorité de certification officielle. Elle est fournie avec complications suivantes:

Vous avez plus de travail de configuration à effectuer que si vous utilisez une technique d'autorité de certification locale telle que mkcert.
Vous devez utiliser un nom de domaine valide que vous contrôlez. Cela signifie que vous ne pouvez pas utilisez des autorités de certification officielles pour: <ph type="x-smartling-placeholder">
- localhost et autres réservés des noms de domaine 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 s'accompagne des risques suivants:

Toute personne avec qui vous partagez l'URL du proxy inverse peut accéder à votre développement local sur votre site. Cela peut être utile pour faire une démonstration de votre projet à des clients, mais cela peut aussi permettre à des personnes non autorisées de partager des informations sensibles.
Certains services de proxy inverse facturent leur utilisation, donc le prix peut être un facteur dans le service de votre choix.
Les nouvelles mesures de sécurité des navigateurs peuvent affecter le le fonctionnement de ces outils.

Indicateur (non recommandé)

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

Vous devez être sûr à 100% que mysite.example renvoie toujours une résolution locale adresse e-mail. Sinon, vous risquez de divulguer des identifiants de production.
Cet indicateur ne fonctionne que dans Chrome. Vous ne pouvez donc pas effectuer de débogage dans tous les navigateurs.

Nous vous remercions vivement pour leurs contributions et leurs commentaires à l'ensemble des examinateurs et des contributeurs, en particulier Ryan Sleevi. Filippo Valsorda, Milica Mihajlija et Rowan Merewood. 🙌

Image principale de l'arrière-plan de @anandu sur Unsplash, modifiée.