Utilizzare HTTPS per lo sviluppo locale

Maud Nalpas

Nella maggior parte dei casi, http://localhost si comporta come HTTPS per scopi di sviluppo. Tuttavia, esistono alcuni casi speciali, come i nomi host personalizzati o l'utilizzo di cookie sicuri tra i browser, in cui devi configurare esplicitamente il tuo sito di sviluppo in modo che si comporti come HTTPS per rappresentare con precisione il funzionamento del tuo sito in produzione. Se il tuo sito web di produzione non utilizza HTTPS, dai la priorità al passaggio a HTTPS.

In questa pagina viene spiegato come eseguire il tuo sito localmente con HTTPS.

Per istruzioni brevi, consulta la guida di riferimento rapido di mkcert.**

Esegui il tuo sito localmente 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 disporre di un certificato TLS firmato da un'entità considerata attendibile dal tuo dispositivo e dal 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.

Ti consigliamo di utilizzare mkcert, una CA multipiattaforma, per creare e firmare il certificato. Per altre opzioni utili, consulta Esegui il tuo sito localmente con HTTPS: altre opzioni.

Molti sistemi operativi includono librerie per la creazione di certificati, come openssl. Tuttavia, sono più complessi e meno affidabili di mkcert e non sono necessariamente multipiattaforma, il che li rende meno accessibili ai team di sviluppatori più grandi.

Configurazione

1. Installa mkcert (solo una volta).

   Segui le istruzioni 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 radice locali.

   Nel terminale, esegui questo comando:

   mkcert -install
   

   In questo modo viene generata un'autorità di certificazione (CA) locale. La CA locale generata da mkcert è considerata attendibile solo localmente, sul tuo dispositivo.

3. Genera un certificato per il tuo sito, firmato da mkcert.

   Nel terminale, vai alla directory root del tuo sito o alla directory in cui vuoi conservare il certificato.

   Poi, esegui:

   mkcert localhost
   

   Se utilizzi un nome host personalizzato come mysite.example, esegui:

   mkcert mysite.example
   

   Questo comando esegue due operazioni:

   • Genera un certificato per il nome host specificato.
   • Consente a mkcert di firmare il certificato.

   Il certificato è ora pronto e firmato da un'autorità di certificazione considerata attendibile dal tuo browser a livello locale.

4. Configura il server in modo che utilizzi HTTPS con il certificato TLS appena creato.

   I dettagli su come eseguire questa operazione dipendono dal tuo server. Ecco alcuni esempi:

   👩🏻‍💻 Con Node:

   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});
   

   👩🏻‍💻 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.

   👩🏻‍💻 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 principale del tuo sito:

   |-- my-react-app
       |-- package.json
       |-- localhost.pem
       |-- localhost-key.pem
       |--...
   

   In questo caso, lo script start dovrebbe essere simile al seguente:

   "scripts": {
       "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
   

   👩🏻‍💻 Altri esempi:

   • Server di sviluppo Angular
   • Python

5. Apri https://localhost o https://mysite.example nel browser per verificare che il sito sia in esecuzione localmente con HTTPS. Non vedrai alcun avviso del browser, perché il tuo browser considera mkcert un'autorità di certificazione locale attendibile.

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 la sezione Installazione di mkcert per le istruzioni relative a Windows e Linux.

   Poi, crea un'autorità di certificazione locale:

   mkcert -install

2. Crea un certificato attendibile.

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

   In questo modo viene creato un certificato valido che mkcert firma automaticamente.

3. Configura il server di sviluppo in modo che utilizzi HTTPS e il certificato che hai creato nel passaggio 2.

Ora puoi accedere a https://{YOUR HOSTNAME} nel browser, senza avvisi

</div>

Esegui il tuo sito localmente con HTTPS: altre opzioni

Di seguito sono riportati altri modi per configurare il certificato. In genere, sono più complicati o rischiosi rispetto all'utilizzo di mkcert.

Certificato autofirmato

Puoi anche decidere di non utilizzare un'autorità di certificazione locale come mkcert e firmare il certificato autonomamente. Questo approccio presenta alcune insidie:

• I browser non ti considerano un'autorità di certificazione, quindi mostreranno avvisi che dovrai ignorare manualmente. In Chrome, puoi utilizzare il flag #allow-insecure-localhost per ignorare automaticamente questo avviso su localhost.
• Questa operazione non è sicura se lavori in una rete non protetta.
• Non è necessariamente più facile o più veloce rispetto all'utilizzo di una CA locale come mkcert.
• I certificati autofirmati non si comportano esattamente come i certificati attendibili.
• Se non utilizzi questa tecnica in un contesto del browser, devi disattivare la verifica del certificato 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. Questo metodo è rapido, ma presenta gli stessi avvisi del browser e altre insidie dei certificati autofirmati. Fortunatamente, puoi utilizzare l'opzione HTTPS integrata dei framework frontend e specificare un certificato attendibile localmente creato utilizzando mkcert o un certificato simile. Per saperne di più, consulta l'esempio mkcert con React.

Perché i browser non considerano attendibili i certificati autofirmati?

Se apri il tuo sito in esecuzione localmente nel browser utilizzando HTTPS, il browser controlla il certificato del tuo server di sviluppo locale. Quando rileva che hai firmato il certificato, verifica se sei registrato come autorità di certificazione attendibile. Poiché non lo sei, il tuo browser non può considerare attendibile il certificato e mostra un avviso che ti informa che la connessione non è sicura. Se procedi, la connessione HTTPS viene comunque creata, ma a tuo rischio e pericolo.

Certificato firmato da un'autorità di certificazione standard

Puoi anche utilizzare un certificato firmato da una CA ufficiale. Questo comporta le seguenti complicazioni:

• Il lavoro di configurazione da svolgere è maggiore rispetto a quando si utilizza una tecnica di CA locale come mkcert.
• Devi utilizzare un nome di dominio valido che controlli. Ciò significa che non puoi utilizzare CA ufficiali per quanto segue:
  • localhost e altri nomi di dominio riservati come example o test.
  • Qualsiasi nome di dominio che non controlli.
  • Domini di primo livello non validi. Per saperne di più, consulta l'elenco dei domini di primo livello validi.

Reverse proxy

Un'altra opzione per accedere a un sito in esecuzione in locale con HTTPS è utilizzare un reverse proxy come ngrok. Ciò comporta i seguenti rischi:

• Chiunque abbia l'URL del reverse proxy può accedere al tuo sito di sviluppo locale. Questo può essere utile per mostrare il 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 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 avere la certezza assoluta che mysite.example venga sempre risolto in un indirizzo locale. In caso contrario, rischi di divulgare le credenziali di produzione.
• Questo flag funziona solo in Chrome, quindi non puoi eseguire il debug su più browser.

Ringraziamo tutti i revisori e i collaboratori per i loro contributi e feedback, in particolare Ryan Sleevi, Filippo Valsorda, Milica Mihajlija e Rowan Merewood. 🙌