Utilizzare HTTPS per lo sviluppo locale

Maud Nalpas

La maggior parte delle volte, http://localhost si comporta come HTTPS per lo sviluppo scopi. Tuttavia, ci sono alcuni casi particolari: come nomi host personalizzati o l'uso di cookie sicuri su più browser, dove sono necessari impostare in modo esplicito il tuo sito per sviluppatori affinché si comporti come HTTPS rappresentare il funzionamento del sito in produzione. (Se il sito web di produzione non usano HTTPS, rendi prioritarie il passaggio a HTTPS).

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

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

Esegui il tuo sito in locale con HTTPS utilizzando mkcert (consigliato)

Per utilizzare HTTPS con il tuo sito di sviluppo locale e accedere a https://localhost oppure https://mysite.example (nome host personalizzato), ti serve un Certificato TLS firmato da un'entità considerata attendibile dal dispositivo e dal browser autorità di certificazione (CA). Il browser controlla se il certificato del server di sviluppo è firmato da un attendibile prima di creare una connessione HTTPS.

Ti consigliamo di utilizzare mkcert, una un'autorità di certificazione multipiattaforma, per creare e firmare il tuo certificato. Per altre vedi Esegui il sito a livello locale con HTTPS: altre opzioni.

Molti sistemi operativi includono librerie per la creazione di certificati, ad esempio openssl. Tuttavia, sono più complessi e meno sono affidabili di mkcert e non sono necessariamente multipiattaforma, il che li rende meno accessibile a 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 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, accedi alla directory principale del tuo sito o a un'altra in cui 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.
   • Consenti a mkcert di firmare il certificato.

   Il tuo certificato è pronto e firmato da un'autorità di certificazione il tuo il browser considera attendibili localmente.

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

   I dettagli su come eseguire questa operazione dipendono dal server. Di seguito sono riportati 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 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 tuo 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 cartella directory principale:

   |-- 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 Angolare
   • Python

5. Apri https://localhost o https://mysite.example nel browser per verifica di eseguire il sito localmente con HTTPS. Non vedrai alcun avvisi del browser, perché il browser considera attendibile mkcert come certificato locale l'autorità competente.

riferimento rapido mkcert

riferimento rapido mkcert

Per gestire 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
   
   
   

   Seleziona install mkcert per Windows e Linux.

   Quindi, 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 creato nel passaggio 2.

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

</div>

Esegui il tuo sito localmente con HTTPS: altre opzioni

Di seguito sono riportati altri modi per configurare il certificato. Di solito si tratta di più complicato o più rischioso rispetto all'uso di mkcert.

Certificato autofirmato

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

• I browser non si fidano di te come autorità di certificazione, quindi mostreranno avvisi dovrai bypassare 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 quelli attendibili certificati.
• Se non utilizzi questa tecnica in un contesto del browser, devi disattivare la verifica del certificato per il tuo server. Hai dimenticato di riattivarlo in l'ambiente di produzione causa problemi di sicurezza.

di Gemini Advanced.

Se non specifichi un certificato, React e Vue le opzioni HTTPS del server di sviluppo creano un certificato autofirmato cappuccio. Si tratta di una procedura veloce, ma include gli stessi avvisi del browser e altre insidie dei certificati autofirmati. Fortunatamente, puoi usare il frontend framework integrata in HTTPS e specificare un certificato attendibile a livello locale creato utilizzando mkcert o simili. Per ulteriori informazioni, consulta Esempio di mkcert con React.

Perché i browser non considerano attendibili i certificati autofirmati?

Se apri il sito eseguito in locale nel browser utilizzando HTTPS, verifica il certificato del server di sviluppo locale. Quando vede che il certificato è stato firmato personalmente, controlla se hai effettuato la registrazione come autorità di certificazione attendibile. Perché stai significa che il browser non può considerare attendibile il certificato e viene visualizzato un avviso ti comunica che la connessione non è sicura. ma crea comunque la connessione, ma lo fai a tuo rischio e pericolo.

Certificato firmato da una normale autorità di certificazione

Puoi anche utilizzare un certificato firmato da un'autorità di certificazione ufficiale. Questo insieme di seguenti complicanze:

• Devi svolgere più operazioni di configurazione rispetto a una tecnica dell'autorità di certificazione locale come mkcert.
• Devi utilizzare un nome di dominio valido sotto il tuo controllo. Ciò significa che non puoi utilizza CA ufficiali per:
  • localhost e altri prenotati nomi di dominio come example o test.
  • Qualsiasi nome di dominio che non è sotto il tuo 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 eseguito localmente con HTTPS è utilizzare un proxy inverso come ngrok. Ciò comporta i seguenti rischi:

• Tutte le persone con cui condividi l'URL del proxy inverso possono accedere al tuo sviluppo locale sito. Questo può essere utile per dimostrare il progetto ai clienti, ma può anche consentire la condivisione di informazioni sensibili a persone non autorizzate.
• Alcuni servizi di proxy inversi addebitano l'utilizzo, pertanto i prezzi potrebbero essere un fattore importante il servizio che preferisci.
• Nuove misure di sicurezza nei browser possono incidere sul il funzionamento di questi strumenti.

Flag (sconsigliato)

Se utilizzi un nome host personalizzato come mysite.example in Chrome, puoi utilizzare un nome host per forzare il browser a considerare mysite.example sicuro. Evita di farlo per i seguenti motivi:

• Devi avere la certezza al 100% che mysite.example si risolva sempre in una richiesta locale . In caso contrario, rischi di perdere le credenziali di produzione.
• Questo flag funziona solo in Chrome, quindi non puoi eseguire il debug su più browser.

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

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