Sloj sigurnih utičnica (SSL) je sigurnosni protokol koji uspostavlja sigurnu vezu između poslužitelja i klijenta. To je dio HTTPS protokola koji obavlja enkripciju podataka. SSL je važan jer štiti podatke od prisluškivanja i povezanih napada.

Prema zadanim postavkama, ako izradite React aplikaciju pomoću create-react-app, aplikacija ne koristi HTTPS. Omogućavanje HTTPS-a za vašu aplikaciju korisno je osobito ako planirate proxy zahtjeve API-ju koji ih poslužuje putem HTTPS-a.

Korištenje HTTPS-a u Reactu

Kada ti izradite aplikaciju koristeći create-react-app, prema zadanim postavkama radi na HTTP-u. Za korištenje SSL-a i posluživanje stranica putem HTTPS-a, morat ćete postaviti HTTPS varijabla u istinito u paket.json. Učinite to modificiranjem skripte.start vrijednost da izgleda ovako:

"skripte": {
"početak": "HTTPS=pravi react-skripte počinju",
},

Alternativno, možete postaviti HTTPS varijabla okruženja na true kada pokrenete svoju aplikaciju.

Na Linux/macOS:

HTTPS=pravi npm start

Na Windows cmd:

instagram viewer
skupa HTTPS=pravi&&npm početak

Na Windows Powershell-u:

($env: HTTPS = "pravi") -i (npm početak)

Međutim, svaki pristup je samo prvi korak. Ako u ovom trenutku pokušate pokrenuti svoju React aplikaciju, dobit ćete pogrešku. Da biste dovršili postupak, morat ćete postaviti valjani SSL certifikat.

Izradite tijelo za izdavanje certifikata na svom računalu

Jedan od alata koji možete koristiti za generiranje SSL certifikata je mkcert. Omogućuje vam stvaranje lokalno testiranih razvojnih certifikata bez konfiguriranja bilo čega.

Kompatibilan je s više platformi i radi na Windows, Linux i macOS. Ovaj članak koristi Linux.

Pronađite vodič za instalaciju platforme koju koristite na mkcert GitHub stranica.

Počnite s instalacijom certutil.

sudo apt instalirati libnss3-alati

Zatim možete instalirati mkcert koristeći Homebrew

skuhati instalirati mkcert

Izradite lokalno certifikacijsko tijelo (Ca) pokretanjem sljedeće naredbe.

mkcert -instalirati

Nakon što je CA uspješno kreiran, sada možete početi generirati SSL certifikate.

Generirajte SSL certifikat

Idite do korijenske mape vaše React aplikacije i generirajte SSL certifikat.

Prvo stvorite mapu za certifikat.

mkdir reactcert

Pokrenite sljedeće da biste generirali certifikat i pohranili ga u mapu koju ste upravo stvorili.

mkcert -key-file ./reactcert/key.pem -cert-file ./reactcert/cert.pem "lokalni domaćin"

Konfigurirajte React za korištenje SSL-a

U package.json dodajte put koji ukazuje na SSL certifikate.

"skripte": {
"početak":
"HTTPS=praviSSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem react-skripte počinju"
}

Osigurajte svoje React web mjesto pomoću SSL-a

Ovaj vam je članak pokazao kako možete koristiti SSL certifikate u React lokalnom okruženju. Međutim, SSL certifikati su neophodni za sve web aplikacije. Oni štite vašu web stranicu od hakera i štite podatke korisnika koji posjećuju vašu stranicu.