Secure Sockets Layer (SSL) est un protocole de sécurité qui établit un lien sécurisé entre un serveur et un client. Il fait partie du protocole HTTPS qui effectue le chiffrement des données. SSL est important car il protège les données contre les écoutes clandestines et les attaques connexes.
Par défaut, si vous créez une application React à l'aide de create-react-app, l'application n'utilise pas HTTPS. L'activation de HTTPS pour votre application est utile, en particulier si vous prévoyez de transmettre des requêtes par proxy à une API qui les dessert via HTTPS.
Utiliser HTTPS dans React
Lorsque vous créer une application en utilisant create-react-app, il s'exécute sur HTTP par défaut. Pour utiliser SSL et servir des pages via HTTPS, vous devrez définir le HTTPS variable à vrai dans package.json. Faites-le en modifiant le scripts.start valeur pour ressembler à ceci :
"scripts": {
"début": "HTTPS=vrai les scripts de réaction démarrent",
},
Alternativement, vous pouvez définir le HTTPS variable d'environnement sur true lorsque vous démarrez votre application.
Sous Linux/macOS :
HTTPS=vrai début npm
Sur Windows cmd :
Positionner HTTPS=vrai&npm début
Sur Windows Powershell :
($env: HTTPS = "vrai") -et (début npm)
Cependant, chaque approche n'est qu'une première étape. Si vous essayez de démarrer votre application React à ce stade, vous obtiendrez une erreur. Pour terminer le processus, vous devrez configurer un Certificat SSL.
Créer une autorité de certification sur votre machine
L'un des outils que vous pouvez utiliser pour générer un certificat SSL est mkcert. Il vous permet de créer des certificats de développement testés localement sans rien configurer.
Il est compatible multiplateforme et fonctionne sous Windows, Linux et macOS. Cet article utilise Linux.
Retrouvez le guide d'installation de la plateforme que vous utilisez depuis le Page mkcert GitHub.
Commencez par installer certutil.
sudo apt installer outils libnss3
Ensuite, vous pouvez installer mkcert en utilisant Homebrew
brasser installer mkcert
Créez une autorité de certification locale (Ca) en exécutant la commande suivante.
mkcert -installer
Une fois l'autorité de certification créée avec succès, vous pouvez maintenant commencer à générer des certificats SSL.
Générer un certificat SSL
Accédez au dossier racine de votre application React et générez un certificat SSL.
Tout d'abord, créez un dossier pour le certificat.
mkdir reactcert
Exécutez ce qui suit pour générer le certificat et le stocker dans le dossier que vous venez de créer.
mkcert -key-file ./reactcert/key.pem -cert-file ./reactcert/cert.pem "hôte local"
Configurer React pour utiliser SSL
Dans package.json, ajoutez un chemin qui pointe vers les certificats SSL.
"scripts": {
"début":
"HTTPS=vraiSSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem les scripts de réaction démarrent"
}
Sécurisez votre site React à l'aide de SSL
Cet article vous a montré comment utiliser des certificats SSL dans un environnement local React. Les certificats SSL sont cependant indispensables pour toutes les applications web. Ils protègent votre site Web contre les pirates et protègent les données des utilisateurs visitant votre site.
