A Secure Sockets Layer (SSL) egy biztonsági protokoll, amely biztonságos kapcsolatot hoz létre a kiszolgáló és az ügyfél között. A HTTPS protokoll része, amely adattitkosítást végez. Az SSL azért fontos, mert megvédi az adatokat a lehallgatástól és a kapcsolódó támadásoktól.
Alapértelmezés szerint, ha egy React alkalmazást a Create-react-app használatával hoz létre, az alkalmazás nem használ HTTPS-t. A HTTPS engedélyezése az alkalmazásban különösen akkor hasznos, ha olyan API-hoz kíván proxy kéréseket küldeni, amely HTTPS-en keresztül szolgálja ki azokat.
HTTPS használata a Reactban
Amikor te hozzon létre egy alkalmazást a create-react-app használatával, alapértelmezés szerint HTTP-n fut. Az SSL használatához és az oldalak HTTPS-en keresztüli kiszolgálásához be kell állítania a HTTPS változó igazra package.json. Ehhez módosítsa a scripts.start érték, hogy így nézzen ki:
"scripts": {
"Rajt": "HTTPS=igaz React-scripts start",
},
Alternatív megoldásként beállíthatja a HTTPS környezeti változót igazra, amikor elindítja az alkalmazást.
Linux/macOS rendszeren:
HTTPS=igaz npm start
Windows cmd-n:
készlet HTTPS=igaz&&npm Rajt
Windows Powershell rendszeren:
($env: HTTPS = "igaz") -és (npm start)
Azonban minden megközelítés csak az első lépés. Ha ezen a ponton megpróbálja elindítani a React alkalmazást, hibaüzenetet fog kapni. A folyamat befejezéséhez be kell állítania egy érvényes SSL tanúsítvány.
Hozzon létre egy tanúsító hatóságot a gépén
Az SSL-tanúsítvány generálására használható egyik eszköz az mkcert. Lehetővé teszi helyileg tesztelt fejlesztési tanúsítványok létrehozását anélkül, hogy bármit is konfigurálna.
Több platformon kompatibilis, és Windows, Linux és macOS rendszeren működik. Ez a cikk Linuxot használ.
Keresse meg az Ön által használt platform telepítési útmutatóját a mkcert GitHub oldal.
Kezdje a telepítéssel certutil.
sudo apt telepítés libnss3-tools
Ezután telepítheti mkcert Homebrew használatával
sörfőzés telepítés mkcert
Hozzon létre egy helyi tanúsító hatóságot (Ca) a következő parancs futtatásával.
mkcert -telepítés
A CA sikeres létrehozása után megkezdheti az SSL-tanúsítványok generálását.
SSL-tanúsítvány létrehozása
Keresse meg a React alkalmazás gyökérmappáját, és hozzon létre egy SSL-tanúsítványt.
Először hozzon létre egy mappát a tanúsítvány számára.
mkdir reactcert
Futtassa a következőket a tanúsítvány létrehozásához, és tárolja azt az imént létrehozott mappában.
mkcert -key-file ./reactcert/key.pem -cert-file ./reactcert/cert.pem "helyi kiszolgáló"
A React beállítása az SSL használatára
A package.json fájlban adjon hozzá egy elérési utat, amely az SSL-tanúsítványokra mutat.
"scripts": {
"Rajt":
"HTTPS=igazSSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem React-scripts start"
}
Biztosítsa React webhelyét SSL használatával
Ez a cikk bemutatta, hogyan használhatja az SSL-tanúsítványokat React helyi környezetben. Az SSL-tanúsítványok azonban elengedhetetlenek minden webalkalmazáshoz. Megvédik webhelyét a hackerektől, és védik a webhelyére látogató felhasználók adatait.
