Secure Sockets Layer (SSL) is een beveiligingsprotocol dat een beveiligde verbinding tot stand brengt tussen een server en een client. Het maakt deel uit van het HTTPS-protocol dat gegevenscodering uitvoert. SSL is belangrijk omdat het gegevens beschermt tegen afluisteren en gerelateerde aanvallen.
Als u een React-toepassing maakt met create-react-app, gebruikt de toepassing standaard geen HTTPS. Het inschakelen van HTTPS voor uw app is vooral handig als u van plan bent verzoeken te proxyen naar een API die ze via HTTPS bedient.
HTTPS gebruiken in React
Wanneer je maak een app met behulp van create-react-app, het draait standaard op HTTP. Om SSL te gebruiken en pagina's via HTTPS weer te geven, moet u de HTTPS variabel naar true in pakket.json. Doe dit door de scripts.start waarde om er als volgt uit te zien:
"scripts": {
"begin": "HTTPS=WAAR react-scripts starten",
},
Als alternatief kunt u de HTTPS omgevingsvariabele op true wanneer u uw app start.
Op Linux/macOS:
HTTPS=WAAR npm start
Op Windows-cmd:
set HTTPS=WAAR&&npm begin
Op Windows Powershell:
($env: HTTPS = "WAAR") -en (npm begin)
Elke benadering is echter slechts de eerste stap. Als u op dit punt uw React-toepassing probeert te starten, krijgt u een foutmelding. Om het proces te voltooien, moet je een geldig SSL-certificaat.
Maak een certificeringsinstantie op uw computer
Een van de tools die u kunt gebruiken om een SSL-certificaat te genereren, is mkcert. Hiermee kunt u lokaal geteste ontwikkelingscertificaten maken zonder iets te configureren.
Het is platformonafhankelijk en werkt op Windows, Linux en macOS. Dit artikel maakt gebruik van Linux.
Zoek de installatiehandleiding van het platform dat u gebruikt in de mkcert GitHub-pagina.
Begin met installeren zeker.
sudo apt installeren libnss3-tools
Dan kunt u installeren mkcert met behulp van Homebrew
brouwen installeren mkcert
Maak een lokale certificeringsinstantie (Ca) door de volgende opdracht uit te voeren.
mkcert -installeren
Nadat de CA met succes is gemaakt, kunt u nu beginnen met het genereren van SSL-certificaten.
SSL-certificaat genereren
Navigeer naar de hoofdmap van je React-app en genereer een SSL-certificaat.
Maak eerst een map voor het certificaat.
mkdir reactcert
Voer het volgende uit om het certificaat te genereren en op te slaan in de map die u zojuist hebt gemaakt.
mkcert -sleutelbestand ./reactcert/key.pem -cert-bestand ./reactcert/cert.pem "localhost"
Configureer Reageren om SSL te gebruiken
Voeg in package.json een pad toe dat naar de SSL-certificaten verwijst.
"scripts": {
"begin":
"HTTPS=WAARSSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem reageer-scripts starten"
}
Beveilig uw React-site met SSL
Dit artikel liet zien hoe je SSL-certificaten kunt gebruiken in een lokale React-omgeving. SSL-certificaten zijn echter essentieel voor alle webapplicaties. Ze beschermen uw website tegen hackers en beschermen de gegevens van de gebruikers die uw site bezoeken.
