Secure Sockets Layer (SSL) är ett säkerhetsprotokoll som upprättar en säker länk mellan en server och en klient. Det är en del av HTTPS-protokollet som utför datakryptering. SSL är viktigt eftersom det skyddar data från avlyssning och relaterade attacker.

Som standard, om du skapar en React-applikation med create-react-app, använder applikationen inte HTTPS. Att aktivera HTTPS för din app är användbart, särskilt om du planerar att proxyförfrågningar till ett API som betjänar dem via HTTPS.

Använder HTTPS i React

När du skapa en app med create-react-app, den körs på HTTP som standard. För att använda SSL och visa sidor över HTTPS måste du ställa in HTTPS variabel till sann i package.json. Gör det genom att ändra scripts.start värde för att se ut så här:

"scripts": {
 "Start": "HTTPS=Sann reaktionsskript startar",
},

Alternativt kan du ställa in HTTPS miljövariabeln till true när du startar din app.

På Linux/macOS:

HTTPS=Sann npm start

På Windows cmd:

uppsättning HTTPS=Sann&&npm Start

På Windows Powershell:

($env: HTTPS = "Sann") -och (npm start)

Varje tillvägagångssätt är dock bara det första steget. Om du försöker starta din React-applikation vid det här laget får du ett felmeddelande. För att slutföra processen måste du konfigurera en giltig SSL-certifikat.

Skapa en certifikatutfärdare på din maskin

Ett av verktygen du kan använda för att generera ett SSL-certifikat är mkcert. Det låter dig skapa lokalt testade utvecklingscertifikat utan att konfigurera något.

Det är plattformsoberoende och fungerar på Windows, Linux och macOS. Den här artikeln använder Linux.

Hitta installationsguiden för plattformen du använder från mkcert GitHub-sida.

Börja med att installera certutil.

sudo apt Installera libnss3-verktyg

Sedan kan du installera mkcert använder Homebrew

brygga Installera mkcert

Skapa en lokal certifikatutfärdare (Ca) genom att köra följande kommando.

mkcert -Installera

Efter att CA har skapats kan du nu börja generera SSL-certifikat.

Generera SSL-certifikat

Navigera till rotmappen i din React-app och generera ett SSL-certifikat.

Skapa först en mapp för certifikatet.

mkdir reactcert

Kör följande för att generera certifikatet och lagra det i mappen du just skapade.

mkcert -nyckelfil ./reactcert/key.pem -cert-fil ./reactcert/cert.pem "lokal värd"

Konfigurera React för att använda SSL

I package.json lägger du till en sökväg som pekar på SSL-certifikaten.

"scripts": {
 "Start":
 "HTTPS=SannSSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem reaktionsskript startar"
}

Säkra din React-webbplats med SSL

Den här artikeln visade hur du kan använda SSL-certifikat i en lokal React-miljö. SSL-certifikat är dock viktiga för alla webbapplikationer. De skyddar din webbplats från hackare och skyddar data från de användare som besöker din webbplats.