Secure Sockets Layer (SSL) è un protocollo di sicurezza che stabilisce un collegamento sicuro tra un server e un client. Fa parte del protocollo HTTPS che esegue la crittografia dei dati. SSL è importante perché protegge i dati dalle intercettazioni e dai relativi attacchi.
Per impostazione predefinita, se crei un'applicazione React utilizzando create-react-app, l'applicazione non utilizza HTTPS. L'abilitazione di HTTPS per la tua app è utile soprattutto se prevedi di inoltrare le richieste a un'API che le serve tramite HTTPS.
Utilizzo di HTTPS in React
Quando tu crea un'app usando create-react-app, viene eseguito su HTTP per impostazione predefinita. Per utilizzare SSL e servire pagine su HTTPS, dovrai impostare il HTTPS variabile a vero in pacchetto.json. Fallo modificando il scripts.start valore per assomigliare a questo:
"script": {
"inizio": "HTTPS=VERO gli script di reazione iniziano",
},
In alternativa, è possibile impostare il HTTPS variabile di ambiente su true all'avvio dell'app.
Su Linux/macOS:
HTTPS=VERO inizio npm
Su Windows cmd:
impostare HTTPS=VERO&&npm inizio
Su Windows PowerShell:
($env: HTTPS = "VERO") -e (inizio npm)
Tuttavia, ogni approccio è solo il primo passo. Se provi ad avviare la tua applicazione React a questo punto, riceverai un errore. Per completare il processo, dovrai impostare un valido Certificato SSL.
Crea un'autorità di certificazione sulla tua macchina
Uno degli strumenti che puoi utilizzare per generare un certificato SSL è mkcert. Ti consente di creare certificati di sviluppo testati localmente senza configurare nulla.
È compatibile con più piattaforme e funziona su Windows, Linux e macOS. Questo articolo usa Linux.
Trova la guida all'installazione della piattaforma che stai utilizzando dal mkcert pagina GitHub.
Inizia installando certutil.
sudo apt installare libnss3-tools
Quindi puoi installare mkcert usando Homebrew
birra installare mkcert
Creare un'autorità di certificazione locale (Ca) eseguendo il comando seguente.
mkcert -installare
Dopo aver creato correttamente la CA, ora puoi iniziare a generare certificati SSL.
Genera certificato SSL
Passa alla cartella principale della tua app React e genera un certificato SSL.
Innanzitutto, crea una cartella per il certificato.
mkdir reactcert
Eseguire quanto segue per generare il certificato e archiviarlo nella cartella appena creata.
mkcert -file-chiave ./reactcert/key.pem -file-cert ./reactcert/cert.pem "host locale"
Configura React per utilizzare SSL
In package.json, aggiungi un percorso che punti ai certificati SSL.
"script": {
"inizio":
"HTTPS=VEROSSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem gli script di reazione iniziano"
}
Proteggi il tuo sito React utilizzando SSL
Questo articolo ti ha mostrato come utilizzare i certificati SSL in un ambiente locale React. I certificati SSL sono tuttavia essenziali per tutte le applicazioni web. Proteggono il tuo sito web dagli hacker e proteggono i dati degli utenti che visitano il tuo sito.
