Secure Sockets Layer (SSL) er en sikkerhetsprotokoll som etablerer en sikker kobling mellom en server og en klient. Det er en del av HTTPS-protokollen som utfører datakryptering. SSL er viktig fordi det beskytter data mot avlytting og relaterte angrep.
Som standard, hvis du oppretter en React-applikasjon ved hjelp av create-react-app, bruker ikke applikasjonen HTTPS. Å aktivere HTTPS for appen din er nyttig, spesielt hvis du planlegger å sende proxy-forespørsler til et API som betjener dem via HTTPS.
Bruke HTTPS i React
Når du lag en app ved hjelp av create-react-app, kjører den på HTTP som standard. For å bruke SSL og vise sider over HTTPS, må du angi HTTPS variabel til sann i package.json. Gjør det ved å endre scripts.start verdi for å se slik ut:
"scripts": {
"start": "HTTPS=ekte react-scripts starter",
},
Alternativt kan du stille inn HTTPS miljøvariabelen til sann når du starter appen.
På Linux/macOS:
HTTPS=ekte npm start
På Windows cmd:
sett HTTPS=ekte&&npm start
På Windows Powershell:
($env: HTTPS = "ekte") -og (npm start)
Hver tilnærming er imidlertid bare det første trinnet. Hvis du prøver å starte React-applikasjonen din på dette tidspunktet, får du en feilmelding. For å fullføre prosessen, må du sette opp en gyldig SSL-sertifikat.
Opprett en sertifiseringsinstans på maskinen din
Et av verktøyene du kan bruke for å generere et SSL-sertifikat er mkcert. Den lar deg lage lokalt testede utviklingssertifikater uten å konfigurere noe.
Den er kompatibel med flere plattformer og fungerer på Windows, Linux og macOS. Denne artikkelen bruker Linux.
Finn installasjonsveiledningen for plattformen du bruker fra mkcert GitHub-side.
Start med å installere certutil.
sudo apt installere libnss3-verktøy
Deretter kan du installere mkcert bruker Homebrew
brygge installere mkcert
Opprett en lokal sertifiseringsinstans (Ca) ved å kjøre følgende kommando.
mkcert -installere
Etter at CA er opprettet, kan du nå begynne å generere SSL-sertifikater.
Generer SSL-sertifikat
Naviger til rotmappen til React-appen din og generer et SSL-sertifikat.
Først oppretter du en mappe for sertifikatet.
mkdir reactcert
Kjør følgende for å generere sertifikatet og lagre det i mappen du nettopp opprettet.
mkcert -key-file ./reactcert/key.pem -cert-file ./reactcert/cert.pem "lokal vert"
Konfigurer React for å bruke SSL
I package.json legger du til en bane som peker til SSL-sertifikatene.
"scripts": {
"start":
"HTTPS=ekteSSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem reaksjonsskript starter"
}
Sikre ditt React-nettsted med SSL
Denne artikkelen viste deg hvordan du kan bruke SSL-sertifikater i et React-lokalt miljø. SSL-sertifikater er imidlertid avgjørende for alle nettapplikasjoner. De beskytter nettstedet ditt mot hackere og beskytter dataene til brukerne som besøker nettstedet ditt.
