Utilizzare HTTPS per lo sviluppo locale

Maud Nalpas

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.

Nota: in questo post, le dichiarazioni relative a localhost sono valide anche per 127.0.0.1 e [::1], perché descrivono entrambi l'indirizzo del computer locale (chiamato anche indirizzo di loopback). Per semplificare le cose, queste istruzioni non specificano numeri di porta. Quindi, quando vedi http://localhost, leggilo come http://localhost:{PORT} o http://127.0.0.1:{PORT}.

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.

Attenzione:

• Non esportare né condividere mai il file rootCA-key.pem che mkcert crea automaticamente quando esegui mkcert -install. Un malintenzionato che si impossessa di questo file può creare attacchi sul percorso per qualsiasi sito che stai visitando. Potrebbero intercettare richieste protette dal tuo computer a qualsiasi sito: la tua banca, il tuo fornitore di servizi sanitari o i social network. Se devi conoscere la posizione di rootCA-key.pem per verificare che sia sicuro, esegui mkcert -CAROOT.
• Utilizza mkcert solo a scopi di sviluppo e, per estensione, non chiedere mai agli utenti finali di eseguire i comandi mkcert.
• Team di sviluppo: tutti i membri del team devono installare ed eseguire mkcert separatamente (non archiviare e condividere CA e certificato).

Configurazione

1. 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
   

2. 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.

3. 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.

4. 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:

   • Server di sviluppo Angular
   • Python

5. Apri https://localhost o https://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

Riferimento rapido per mkcert

Per eseguire il tuo sito di sviluppo locale con HTTPS:

1. 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
   

2. Creare un certificato attendibile.

   mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
   

   Verrà creato un certificato valido che mkcert firma automaticamente.

3. 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

Attenzione: esegui questa operazione solo a scopi di sviluppo e non esportare o condividere mai il filerootCA-key.pem. Se devi conoscere la posizione del file per assicurarti che sia sicuro, esegui mkcert -CAROOT.

</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 giorno localhost.
• 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.

I browser di avvisi vengono visualizzati quando viene utilizzato un certificato autofirmato.

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.

Perché i browser non considerano attendibili i certificati autofirmati?

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.

Perché i browser non considerano attendibili i certificati autofirmati.

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 come example o test.
  • 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.