La maggior parte delle volte, http://localhost
si comporta come HTTPS per scopi di sviluppo. Tuttavia, esistono alcuni casi particolari, come nomi host personalizzati o l'utilizzo di cookie sicuri nei browser, in cui devi configurare esplicitamente il comportamento del sito di sviluppo in modo che agisca come HTTPS per rappresentare con precisione il funzionamento del sito in produzione. Se il tuo sito web di produzione non utilizza HTTPS, imposta il passaggio ad HTTPS come priorità.
In questa pagina viene spiegato come eseguire il sito in locale con HTTPS.
Per brevi istruzioni, consulta la guida rapida per mkcert.**
Esegui il sito in locale con HTTPS utilizzando mkcert (consigliato)
Per utilizzare HTTPS con il tuo sito di sviluppo locale e accedere a https://localhost
o https://mysite.example
(nome host personalizzato), devi avere un certificato TLS firmato da un'entità attendibile per il tuo dispositivo e il tuo browser, chiamata autorità di certificazione (CA) attendibile.
Il browser verifica se il certificato del server di sviluppo è firmato da una CA attendibile prima di creare una connessione HTTPS.
Per creare e firmare il certificato, ti consigliamo di utilizzare mkcert, una CA multipiattaforma. Per altre opzioni utili, consulta l'articolo Eseguire il sito in locale con HTTPS: altre opzioni.
Molti sistemi operativi includono librerie per la creazione di certificati, come openssl. Tuttavia, sono più complesse e meno affidabili di mkcert e non sono necessariamente multipiattaforma, il che le rende meno accessibili ai team di sviluppatori più grandi.
Configurazione
Installa mkcert (solo una volta).
Segui le instructions per installare mkcert sul tuo sistema operativo. Ad esempio, su macOS:
brew install mkcert brew install nss # if you use Firefox
Aggiungi mkcert alle CA principali locali.
Nel tuo terminale, esegui questo comando:
mkcert -install
In questo modo viene generata un'autorità di certificazione (CA) locale. L'autorità di certificazione locale generata da mkcert è considerata attendibile solo localmente sul tuo dispositivo.
Genera un certificato per il tuo sito, firmato da mkcert.
Nel terminale, accedi alla directory radice del sito o a qualsiasi directory in cui desideri conservare il certificato.
Quindi, esegui:
mkcert localhost
Se utilizzi un nome host personalizzato come
mysite.example
, esegui:mkcert mysite.example
Questo comando ha due funzioni:
- Genera un certificato per il nome host che hai specificato.
- Consente a mkcert di firmare il certificato.
Il certificato è ora pronto e firmato da un'autorità di certificazione che il browser considera attendibile localmente.
Configura il tuo server in modo che utilizzi HTTPS il certificato TLS appena creato.
I dettagli su come eseguire questa operazione dipendono dal server. Ecco alcuni esempi:
👩🏻 atura NA Con nodo:
server.js
(sostituisci{PATH/TO/CERTIFICATE...}
e{PORT}
):const https = require('https'); const fs = require('fs'); const options = { key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'), cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'), }; https .createServer(options, function (req, res) { // server code }) .listen({PORT});
👩🏻 venire freddi dai visitatori con http-server:
Avvia il server come segue (sostituisci
{PATH/TO/CERTIFICATE...}
):http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
-S
esegue il server con HTTPS, mentre-C
imposta il certificato e-K
imposta la chiave.👩🏻 web Con un server di sviluppo React:
Modifica
package.json
come segue e sostituisci{PATH/TO/CERTIFICATE...}
:"scripts": { "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
Ad esempio, se hai creato un certificato per
localhost
nella directory root del tuo sito:|-- my-react-app |-- package.json |-- localhost.pem |-- localhost-key.pem |--...
Lo script
start
dovrebbe avere il seguente aspetto:"scripts": { "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
👩🏻 Alias altri esempi:
Apri
https://localhost
ohttps://mysite.example
nel browser per verificare di eseguire il sito localmente con HTTPS. Non verrà visualizzato alcun avviso del browser perché il browser considera mkcert come autorità di certificazione locale.
Riferimento rapido per mkcert
Per eseguire il tuo sito di sviluppo locale con HTTPS:
-
Configura mkcert.
Se non l'hai ancora fatto, installa mkcert, ad esempio su macOS:
brew install mkcert
Consulta install mkcert per le istruzioni per Windows e Linux.
Quindi, crea un'autorità di certificazione locale:
mkcert -install
-
Creare un certificato attendibile.
mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
Verrà creato un certificato valido che mkcert firma automaticamente.
-
Configura il tuo server di sviluppo per l'utilizzo di HTTPS e del certificato creato nel passaggio 2.
Ora puoi accedere a https://{YOUR HOSTNAME}
nel browser, senza avvisi
</div>
Esegui il sito in locale con HTTPS: altre opzioni
Di seguito sono riportati altri modi per configurare il certificato. Solitamente questi sono più complicati o più rischiosi rispetto all'uso di mkcert.
Certificato autofirmato
Puoi anche decidere di non utilizzare un'autorità di certificazione locale come mkcert e di firmare il certificato personalmente. Questo approccio presenta alcune insidie:
- I browser non considerano l'autorità di certificazione attendibile, pertanto mostreranno avvisi che è necessario ignorare manualmente. In Chrome, puoi utilizzare il flag
#allow-insecure-localhost
per ignorare automaticamente questo avviso il giornolocalhost
. - Questa impostazione non è sicura se stai lavorando su una rete non sicura.
- Non è necessariamente più semplice o veloce rispetto all'utilizzo di un'autorità di certificazione locale come mkcert.
- I certificati autofirmati non funzionano esattamente come i certificati attendibili.
- Se non utilizzi questa tecnica nel contesto del browser, devi disabilitare la verifica dei certificati per il tuo server. Se dimentichi di riattivarla in produzione, si verificano problemi di sicurezza.
Se non specifichi un certificato, le opzioni HTTPS del server di sviluppo di React e Vue creano un certificato autofirmato in background. Si tratta di una procedura rapida, ma include gli stessi avvisi del browser e altre insidie dei certificati autofirmati. Fortunatamente, puoi utilizzare l'opzione HTTPS integrata dei framework di frontend e specificare un certificato attendibile a livello locale creato utilizzando mkcert o un certificato simile. Per maggiori informazioni, consulta l'esempio mkcert with React.
Se apri il sito in esecuzione in locale nel browser utilizzando HTTPS, il browser controlla il certificato del server di sviluppo locale. Quando rileva che hai firmato il certificato personalmente, verifica se hai effettuato la registrazione come autorità di certificazione attendibile. In caso contrario, il browser non può considerare attendibile il certificato e viene visualizzato un avviso per indicare che la connessione non è sicura. Se procedi, la connessione HTTPS viene comunque creata, ma questa operazione è a tuo rischio.
Certificato firmato da una normale autorità di certificazione
Puoi anche utilizzare un certificato firmato da un'autorità di certificazione ufficiale. Questo comporta le seguenti complicazioni:
- La configurazione è molto più complessa rispetto all'utilizzo di una tecnica di CA locale come mkcert.
- Devi utilizzare un nome di dominio valido controllato da te. Ciò significa che non puoi utilizzare CA ufficiali per:
localhost
e altri nomi di dominio riservati comeexample
otest
.- Qualsiasi nome di dominio che non hai il controllo.
- Domini di primo livello non validi. Per ulteriori informazioni, consulta l'elenco dei domini di primo livello validi.
Inverti proxy
Un'altra opzione per accedere a un sito in esecuzione in locale con HTTPS utilizza un proxy inverso come ngrok. Questo comporta i seguenti rischi:
- Tutte le persone con cui condividi l'URL del proxy inverso possono accedere al tuo sito di sviluppo locale. Questo può essere utile per una demo del progetto ai clienti, ma può anche consentire a persone non autorizzate di condividere informazioni sensibili.
- Alcuni servizi di reverse proxy addebitano un costo per l'utilizzo, quindi i prezzi potrebbero essere un fattore determinante nella scelta del servizio.
- Le nuove misure di sicurezza nei browser possono influire sul funzionamento di questi strumenti.
Flag (non consigliato)
Se utilizzi un nome host personalizzato come mysite.example
in Chrome, puoi utilizzare un flag per forzare il browser a considerare mysite.example
sicuro. Evita di farlo per i seguenti motivi:
- Devi assicurarti al 100% che
mysite.example
risolva sempre un indirizzo locale. In caso contrario, rischi di perdere le credenziali di produzione. - Questo flag funziona solo in Chrome, quindi non è possibile eseguire il debug su più browser.
Grazie mille per il contributo e il feedback a tutti i recensori e a tutti i collaboratori, soprattutto Ryan Sleevi, Filippo Valsorda, Milica Mihajlija e Rowan Merewood. 🙌
Sfondo dell'immagine hero di @anandu su Unsplash, modificato.