Secure Sockets Layer (SSL) er en sikkerhedsprotokol, der etablerer en sikker forbindelse mellem en server og en klient. Det er en del af HTTPS-protokollen, der udfører datakryptering. SSL er vigtigt, fordi det beskytter data mod aflytning og relaterede angreb.
Som standard, hvis du opretter en React-applikation ved hjælp af create-react-app, bruger applikationen ikke HTTPS. Det er nyttigt at aktivere HTTPS for din app, især hvis du planlægger at proxy-anmodninger til en API, der betjener dem via HTTPS.
Brug af HTTPS i React
Når du oprette en app ved hjælp af create-react-app, den kører på HTTP som standard. For at bruge SSL og vise sider over HTTPS skal du indstille HTTPS variabel til sand i package.json. Gør det ved at ændre scripts.start værdi for at se sådan ud:
"scripts": {
"Start": "HTTPS=rigtigt React-scripts starter",
},
Alternativt kan du indstille HTTPS miljøvariablen til sand, når du starter din app.
På Linux/macOS:
HTTPS=rigtigt npm start
På Windows cmd:
sæt HTTPS=rigtigt&&npm Start
På Windows Powershell:
($env: HTTPS = "rigtigt") -og (npm start)
Hver tilgang er dog kun det første skridt. Hvis du prøver at starte din React-applikation på dette tidspunkt, får du en fejl. For at fuldføre processen skal du oprette en gyldig SSL certifikat.
Opret en certifikatmyndighed på din maskine
Et af de værktøjer, du kan bruge til at generere et SSL-certifikat, er mkcert. Det giver dig mulighed for at oprette lokalt testede udviklingscertifikater uden at konfigurere noget.
Det er cross-platform-kompatibelt og fungerer på Windows, Linux og macOS. Denne artikel bruger Linux.
Find installationsvejledningen til den platform, du bruger, fra mkcert GitHub side.
Start med at installere certutil.
sudo apt installere libnss3-værktøjer
Så kan du installere mkcert ved hjælp af Homebrew
brygge installere mkcert
Opret en lokal certifikatmyndighed (Ca) ved at køre følgende kommando.
mkcert -installere
Når CA'en er oprettet, kan du nu begynde at generere SSL-certifikater.
Generer SSL-certifikat
Naviger til rodmappen på din React-app, og generer et SSL-certifikat.
Først skal du oprette en mappe til certifikatet.
mkdir reactcert
Kør følgende for at generere certifikatet og gemme det i den mappe, du lige har oprettet.
mkcert -key-file ./reactcert/key.pem -cert-file ./reactcert/cert.pem "lokal vært"
Konfigurer React to Use SSL
I package.json skal du tilføje en sti, der peger på SSL-certifikaterne.
"scripts": {
"Start":
"HTTPS=rigtigtSSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem React-scripts starter"
}
Sikre dit React-websted ved hjælp af SSL
Denne artikel viste dig, hvordan du kan bruge SSL-certifikater i et React lokalt miljø. SSL-certifikater er dog afgørende for alle webapplikationer. De beskytter dit websted mod hackere og beskytter data fra de brugere, der besøger dit websted.
