Utilizzare HTTPS per lo sviluppo locale

Maud Nalpas

Nella maggior parte dei casi, http://localhost si comporta come HTTPS a scopo di sviluppo. Tuttavia, esistono alcuni casi speciali, come i nomi host personalizzati o l'utilizzo di cookie sicuri nei 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.

Questa pagina spiega come eseguire il tuo sito localmente con HTTPS.

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

Per istruzioni brevi, consulta mkcert quick reference.**

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. Prima di creare una connessione HTTPS, il browser verifica se il certificato del server di sviluppo è firmato da un'autorità di certificazione attendibile.

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, ad esempio 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.

Attenzione:

• Non esportare o condividere mai il file rootCA-key.pem creato automaticamente da mkcert quando esegui mkcert -install. Un malintenzionato che entra in possesso di questo file può creare attacchi on-path per qualsiasi sito che visiti. Potrebbero intercettare richieste sicure dal tuo computer a qualsiasi sito, ad esempio la tua banca, il tuo fornitore di servizi sanitari o i social network. Se hai bisogno di sapere dove si trova rootCA-key.pem per assicurarti che sia sicuro, esegui mkcert -CAROOT.
• Utilizza mkcert solo per scopi di sviluppo e, di conseguenza, non chiedere mai agli utenti finali di eseguire comandi mkcert.
• Team di sviluppo: tutti i membri del team devono installare ed eseguire mkcert separatamente (non archiviare e condividere la CA e il certificato).

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
   

   Viene generata un'autorità di certificazione (CA) locale. La CA locale generata da mkcert è attendibile solo localmente, sul tuo dispositivo.

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

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

   Dopodiché, 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 localmente dal browser.

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

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

   👩🏻‍💻 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});
   

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

   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"
   

   👩🏻‍💻 Altri esempi:

   • Server di sviluppo Angular
   • Python

5. Apri https://localhost o https://mysite.example nel browser per verificare che il sito venga eseguito localmente con HTTPS. Non visualizzerai avvisi del browser perché il browser considera mkcert un'autorità di certificazione locale.

Riferimento rapido di mkcert

Riferimento rapido di mkcert

Per eseguire il 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.

   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

Attenzione: esegui questa operazione solo per scopi di sviluppo e non esportare o condividere mai il file rootCA-key.pem. Se devi sapere dove si trova questo file per assicurarti che sia sicuro, esegui mkcert -CAROOT.

</div>

Esegui il sito localmente con HTTPS: altre opzioni

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

Certificato autofirmato

Puoi anche decidere di non utilizzare un'autorità di certificazione locale come mkcert e firmare tu stesso il certificato. Questo approccio presenta alcuni svantaggi:

• 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ù semplice o veloce dell'utilizzo di una CA locale come mkcert.
• I certificati autofirmati non si comportano esattamente come i certificati attendibili.
• Se non utilizzi questa tecnica nel contesto di un browser, devi disattivare la verifica del certificato per il tuo server. Se dimentichi di riattivarla in produzione, si verificano problemi di sicurezza.

Gli avvisi mostrati dai browser 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. Questo metodo è rapido, ma presenta gli stessi avvisi del browser e altri inconvenienti dei certificati autofirmati. Fortunatamente, puoi utilizzare l'opzione HTTPS integrata dei framework frontend e specificare un certificato attendibile a livello locale creato utilizzando mkcert o uno strumento simile. Per saperne di più, consulta l'esempio mkcert con React.

Perché i browser non si fidano dei certificati autofirmati?

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

Perché i browser non considerano attendibili i certificati autofirmati.

Certificato firmato da un'autorità di certificazione regolare

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

• Devi eseguire più operazioni di configurazione rispetto a quando utilizzi una tecnica 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 ulteriori informazioni, 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 è l'utilizzo di un proxy inverso come ngrok. Ciò comporta i seguenti rischi:

• Chiunque condivida l'URL del proxy inverso può accedere al tuo sito di sviluppo locale. Questa funzionalità può essere utile per mostrare la demo del tuo progetto ai clienti, ma può anche consentire a persone non autorizzate di condividere informazioni sensibili.
• Alcuni servizi di reverse proxy addebitano costi per l'utilizzo, pertanto il prezzo potrebbe 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 essere sicuro al 100% 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.

Un ringraziamento speciale per i contributi e il feedback a tutti i revisori e collaboratori, in particolare a Ryan Sleevi, Filippo Valsorda, Milica Mihajlija e Rowan Merewood. 🙌

Sfondo dell'immagine promozionale di @anandu su Unsplash, modificato.