Secure Sockets Layer (SSL) je varnostni protokol, ki vzpostavi varno povezavo med strežnikom in odjemalcem. Je del protokola HTTPS, ki izvaja šifriranje podatkov. SSL je pomemben, ker ščiti podatke pred prisluškovanjem in s tem povezanimi napadi.

Če ustvarite aplikacijo React z uporabo create-react-app, aplikacija ne uporablja HTTPS. Omogočanje HTTPS za vašo aplikacijo je koristno, še posebej, če nameravate proxy zahteve za API, ki jim služi prek HTTPS.

Uporaba HTTPS v Reactu

Ko ti ustvarite aplikacijo z uporabo create-react-app, privzeto deluje na HTTP. Za uporabo SSL in prikazovanje strani prek HTTPS, boste morali nastaviti HTTPS spremenljivka v true v package.json. To storite tako, da spremenite skripti.start vrednost naj izgleda takole:

"skripti": {
"začetek": "HTTPS=prav začnejo se odzivni skripti",
},

Druga možnost je, da nastavite HTTPS spremenljivka okolja na true, ko zaženete aplikacijo.

Na Linux/macOS:

HTTPS=prav npm start

V sistemu Windows cmd:

set HTTPS=prav&&npm začnite

V Windows Powershell:

instagram viewer
($env: HTTPS = "prav") -in (začetek npm)

Vendar je vsak pristop le prvi korak. Če na tej točki poskusite zagnati svojo aplikacijo React, boste prejeli napako. Za dokončanje postopka boste morali nastaviti veljavno SSL certifikat.

Ustvarite overitelj potrdil na svoji napravi

Eno od orodij, ki jih lahko uporabite za ustvarjanje potrdila SSL, je mkcert. Omogoča vam ustvarjanje lokalno preizkušenih razvojnih potrdil, ne da bi karkoli konfigurirali.

Je združljiv z več platformami in deluje v sistemih Windows, Linux in macOS. Ta članek uporablja Linux.

Poiščite vodnik za namestitev platforme, ki jo uporabljate stran mkcert GitHub.

Začnite z namestitvijo certutil.

sudo apt namestite libnss3-orodja

Nato lahko namestite mkcert z uporabo Homebrew

pivo namestite mkcert

Ustvarite lokalno potrdilo (Ca) tako, da zaženete naslednji ukaz.

mkcert -namestite

Ko je CA uspešno ustvarjena, lahko zdaj začnete generirati potrdila SSL.

Ustvarite SSL certifikat

Pomaknite se do korenske mape vaše aplikacije React in ustvarite potrdilo SSL.

Najprej ustvarite mapo za potrdilo.

mkdir reactcert

Zaženite naslednje, da ustvarite potrdilo in ga shranite v mapo, ki ste jo pravkar ustvarili.

mkcert -key-file ./reactcert/key.pem -cert-file ./reactcert/cert.pem "lokalni gostitelj"

Konfigurirajte React za uporabo SSL

V package.json dodajte pot, ki kaže na potrdila SSL.

"skripti": {
"začetek":
"HTTPS=pravSSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem react-skripti se začnejo"
}

Zavarujte svoje spletno mesto React s SSL

Ta članek vam je pokazal, kako lahko uporabite potrdila SSL v lokalnem okolju React. Vendar so certifikati SSL bistveni za vse spletne aplikacije. Ščitijo vaše spletno mesto pred hekerji in ščitijo podatke uporabnikov, ki obiščejo vaše spletno mesto.