Secure Sockets Layer (SSL) este un protocol de securitate care stabilește o legătură securizată între un server și un client. Face parte din protocolul HTTPS care realizează criptarea datelor. SSL este important pentru că protejează datele de interceptări și atacuri asociate.
În mod implicit, dacă creați o aplicație React folosind create-react-app, aplicația nu folosește HTTPS. Activarea HTTPS pentru aplicația dvs. este utilă mai ales dacă intenționați să trimiteți cererile către un API care le deservește prin HTTPS.
Utilizarea HTTPS în React
Cand tu creați o aplicație folosind create-react-app, rulează implicit pe HTTP. Pentru a utiliza SSL și a difuza pagini prin HTTPS, va trebui să setați HTTPS variabilă la adevărat în pachet.json. Faceți acest lucru modificând scripturi.start valoare să arate astfel:
„scripturi”: {
"start": "HTTPS=Adevărat pornesc react-script-urile",
},
Alternativ, puteți seta HTTPS variabila de mediu la true când porniți aplicația.
Pe Linux/macOS:
HTTPS=Adevărat npm start
Pe Windows cmd:
a stabilit HTTPS=Adevărat&&npm start
Pe Windows Powershell:
($env: HTTPS = "Adevărat") -și (pornire npm)
Cu toate acestea, fiecare abordare este doar primul pas. Dacă încercați să porniți aplicația React în acest moment, veți primi o eroare. Pentru a finaliza procesul, va trebui să configurați un valid certificat SSL.
Creați o autoritate de certificare pe mașina dvs
Unul dintre instrumentele pe care le puteți utiliza pentru a genera un certificat SSL este mkcert. Vă permite să creați certificate de dezvoltare testate local fără a configura nimic.
Este compatibil cu mai multe platforme și funcționează pe Windows, Linux și macOS. Acest articol folosește Linux.
Găsiți ghidul de instalare al platformei pe care o utilizați din Pagina GitHub mkcert.
Începeți prin a instala certutil.
sudo apt instalare libnss3-tools
Apoi puteți instala mkcert folosind Homebrew
bere instalare mkcert
Creați o autoritate de certificare locală (Ca) rulând următoarea comandă.
mkcert -instalare
După ce CA este creată cu succes, acum puteți începe să generați certificate SSL.
Generați certificat SSL
Navigați la folderul rădăcină al aplicației dvs. React și generați un certificat SSL.
Mai întâi, creați un folder pentru certificat.
mkdir reactcert
Rulați următoarele pentru a genera certificatul și stocați-l în folderul pe care tocmai l-ați creat.
mkcert -key-file ./reactcert/key.pem -cert-file ./reactcert/cert.pem "gazdă locală"
Configurați React pentru a utiliza SSL
În package.json, adăugați o cale care indică certificatele SSL.
„scripturi”: {
"start":
„HTTPS=AdevăratSSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem pornesc react-script-urile"
}
Securizează-ți site-ul React folosind SSL
Acest articol v-a arătat cum puteți utiliza certificatele SSL într-un mediu local React. Certificatele SSL sunt totuși esențiale pentru toate aplicațiile web. Acestea vă protejează site-ul web de hackeri și protejează datele utilizatorilor care vă vizitează site-ul.