Utilizzare HTTPS per lo sviluppo locale

Maud Nalpas
Maud Nalpas
X GitHub

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 su più browser, in cui devi configurare esplicitamente il sito di sviluppo in modo che si comporti come HTTPS per rappresentare con precisione il funzionamento del 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.

Per istruzioni brevi, consulta la guida rapida di mkcert.**

Esegui il tuo sito localmente con HTTPS utilizzando mkcert (opzione consigliata)

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à attendibile per il tuo dispositivo e il tuo browser, chiamata autorità di certificazione (CA). 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 tuo certificato, ti consigliamo di utilizzare mkcert, una CA multipiattaforma. Per altre opzioni utili, consulta Eseguire il 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 a team di sviluppatori più grandi.

Configurazione

  1. Installa mkcert (una sola 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 il seguente comando:

    mkcert -install

    Verrà generata un'autorità di certificazione (CA) locale. La tua CA locale generata da mkcert viene considerata attendibile solo localmente sul tuo dispositivo.

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

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

    Quindi, 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.
    • Consenti a mkcert di firmare il certificato.

    Il certificato è pronto e firmato da un'autorità di certificazione considerata attendibile dal browser localmente.

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

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

    👩🏻‍💻 Con il nodo:

    server.js (sostituisce {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 nel seguente modo (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:

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

Riferimento rapido a mkcert

Riferimento rapido a 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 le istruzioni di installazione di mkcert 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}

    Viene creato un certificato valido che viene firmato automaticamente da mkcert.

  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>

Eseguire il sito localmente con HTTPS: altre opzioni

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

Certificato autofirmato

Puoi anche decidere di non utilizzare un'autorità di certificazione locale, come mkcert, e invece di firmare il certificato personalmente. Questo approccio presenta alcuni inconvenienti:

  • I browser non si fidano di te come autorità di certificazione, quindi mostreranno avvisi da ignorare manualmente. In Chrome, puoi utilizzare il flag #allow-insecure-localhost per ignorare automaticamente questo avviso su localhost.
  • Questa operazione non è sicura se utilizzi una rete non sicura.
  • Non è necessariamente più facile o veloce dell'utilizzo di un'autorità di certificazione locale come mkcert.
  • I certificati autofirmati non funzionano 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 riattivarlo in produzione, si verificano problemi di sicurezza.
Screenshot degli avvisi visualizzati dai browser quando viene utilizzato un certificato autofirmato.
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. Questa operazione è rapida, ma presenta gli stessi avvisi del browser e gli 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 un programma simile. Per ulteriori informazioni, consulta l'esempio di mkcert con React.

Perché i browser non considerano attendibili i certificati autofirmati?

Se apri il sito in esecuzione locale nel browser utilizzando HTTPS, il browser controlla il certificato del server di sviluppo locale. Quando verifica che il certificato sia stato firmato personalmente, l'app controlla 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 che indica che la connessione non è sicura. Se continui, la connessione HTTPS viene comunque creata, ma a tuo rischio.

Perché i browser non si fidano dei certificati autofirmati: un diagramma.
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. Ciò comporta le seguenti complicazioni:

  • Devi eseguire più operazioni di configurazione rispetto all'utilizzo di una tecnica CA locale come mkcert.
  • Devi utilizzare un nome di dominio valido di tua proprietà. Ciò significa che non puoi utilizzare CA ufficiali per:

Reverse proxy

Un'altra opzione per accedere a un sito eseguito localmente con HTTPS è utilizzare 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 opzione può essere utile per mostrare il progetto ai clienti, ma può anche consentire a persone non autorizzate di condividere informazioni sensibili.
  • Alcuni servizi di proxy inverso prevedono un costo per l'utilizzo, pertanto i prezzi potrebbero influire sulla scelta del servizio.
  • Le nuove misure di sicurezza nei browser possono influire sul funzionamento di questi strumenti.

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 si risolva sempre a 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 a tutti i recensori e i collaboratori per i contributi e i feedback, in particolare a Ryan Sleevi, Filippo Valsorda, Milica Mihajlija e Rowan Merewood. 🙌

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