Recentemente ho avuto l’esigenza di configurare un certificato ssl per poter far funzionare alcune libreria in locale, per poi poter spostare il tutto in produzione. Pensavo fosse una cosa più semplice, in realtà mi ha portato via una buona mezza giornata e da questa esperienza ho deciso di realizzare questa piccola guida.

Generiamo il certificato

La prima cosa da fare, è generare il certificato. Vi indicherò un semplice comando da eseguire in terminale che restituirà il certificato già pronto, senza password, autofirmato, che avrà la funzione di convalidare tutte le richieste sicure che verranno fatte.

openssl req -x509 -out localhost.crt -keyout localhost.key \
  -newkey rsa:2048 -nodes -sha256 \
  -subj '/CN=localhost' -extensions EXT -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

Aggiungere il certificato al sistema

Una volta che avrete il certificato, andrà aggiunto al Portachiavi di Sistema, sotto la categoria Certificati, trascinarlo nella schermata.

A questo punto occorre indicare al certificato di accettare tutte le richieste, basterà fare doppio click sul certificato e selezionare da “attendibilità” Fidati sempre per Quando si usa questo certificato.

Dopo fatto questo, abbiamo il nostro certificato, ma dobbiamo indicare al nostro web server che esiste.
Come anticipato all’inizio uso il sistema operativo Mac Os e utilizzo per i mie progetti web l’applicazione MAMP.
Ciò non toglie che la guida, può essere utilizzata ache su sistemi e web server diversi, vi basterà conoscerli quel tanto che basta per fare le semplici operazioni che sto per spiegarvi.

Configurare MAMP

Un piccolo consiglio, prima di iniziare, è più semplice che MAMP sia configurato con le porte standard anziché con quelle di default di MAMP.

Ora spostiamoci sul file di configurazione di apache all’interno di MAMP

Machintosh HD⁩ ▸ ⁨Applicazioni⁩ ▸ ⁨MAMP⁩ ▸ ⁨conf⁩ ▸ ⁨apache⁩ ▸ httpd.conf

In questo file dovremo abilitare l’uso del certificato SSL, cercando e decommentando la riga corretta e cercando e decommentando la riga che abilita l’uso delle virtual-hosts. Di seguito entrambe le righe:

Secure (SSL/TLS) connections
#Include /Applications/MAMP/conf/apache/extra/httpd-ssl.conf

Virtual hosts
# Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

Configuriamo apache per SSL

Adesso aggiungiamo nel file di configurazione dell’SSL di apache presente in questa posizione il codice che vedete di seguito, in modo dire alla virtual host qual’è il certificato che dovrà prendere per le chiamate sulla porta 443.
Il file è:

Machintosh HD⁩ ▸ ⁨Applicazioni⁩ ▸ ⁨MAMP⁩ ▸ ⁨conf⁩ ▸ ⁨apache⁩ ▸ ⁨extra⁩ ▸ httpd-ssl.conf

UPDATE: nelle ultime versioni di MAMP è necessario modificare anche alcune cose prima di chiudere il file.

Occorre, innanzitutto assegnare una wildcard per la porta di default dell’ssl e quindi andremo a sostituire

old : <VirtualHost _default_:443> 
new : <VirtualHost *:443>

Inoltre bisogna indicare il ServerName che si occuperà di gestire la richiesta e quindi sostituiremo

old: ServerName localhost:443
new: ServerName localhost:443

Ultima modifica da fare prima di poter inserire il nostro VirtualHost è quella di indicare in quale cartella sarà presente il certificato che si occuperà di controfirmare le nostre richieste, in pratica quello creato all’inizio del tutorial.
Quindi sostituiremo i due path di deafault

old: SSLCertificateFile "/Applications/MAMP/conf/apache/server.crt"
old: SSLCertificateKeyFile "/Applications/MAMP/conf/apache/server.key"

new: SSLCertificateFile "/Applications/MAMP/conf/ssl/localhost.crt"
new: SSLCertificateKeyFile "/Applications/MAMP/conf/ssl/localhost.key"

Ora possiamo continuare inserendo il nostro VirtualHost

<VirtualHost progettodiesempio.local:443>
  SSLEngine on
  SSLCertificateFile "/Applications/MAMP/conf/ssl/localhost.crt"
  SSLCertificateKeyFile "/Applications/MAMP/conf/ssl/localhost.key"
  
  ServerAdmin info@website.com
  DocumentRoot "/Applications/MAMP/htdocs/progettodiesempio/public"
  ServerName progettodiesempio.local
  DirectoryIndex index.php
  <Directory "/Applications/MAMP/htdocs/progettodiesempio/public">
    AllowOverride All
    Allow from All
  </Directory>
</VirtualHost>

Come puoi vedere, ho un virtual host che si chiama progettodiesempio, significa che per poter visitare l’applicazione che sto conservando nella cartella htdocs di MAMP sotto il nome di progettodiesempio, non mi basterà fare altro che digitare nel browser progettodiesempio.local, ma è ancora presto per provare.

Configuriamo il nostro virtual host

Adesso possiamo completare la configurazione del nostro virtual host, aprendo il file di seguito e incollando il codice:

Machintosh HD⁩ ▸ ⁨Applicazioni⁩ ▸ ⁨MAMP⁩ ▸ ⁨conf⁩ ▸ ⁨apache⁩ ▸ ⁨extra⁩ ▸ httpd-vhosts.conf

<VirtualHost 127.0.0.1>
  ServerAdmin info@website.com
  DocumentRoot "/Applications/MAMP/htdocs/progettodiesempio/public"
  ServerName progettodiesempio.local
  DirectoryIndex index.php
  <Directory "/Applications/MAMP/htdocs/progettodiesempio/public">
    AllowOverride All
    Allow from All
  </Directory>
</VirtualHost>

In questo caso stiamo dicendo che le richieste che arriveranno da localhost faranno capo al mio solito progetto dal nome progettodiesempio che ancora una volta avrà la sua posizione nella cartella htdocs di MAMP e che risponderà quando nella barra dell’url del browser avremo chiamato progettodiesempio.local.

Insegniamo al computer a puntare sul nostro dominio

Non ci resta che dire alla gestione degli host del sistema operativo che cose ne vogliamo fare del nostro indirizzo progettodiesempio.local, per farlo, apriamo il file hosts che sul Mac si trova nella posizione:

Machintosh HD⁩ ▸ ⁨private⁩ ▸ ⁨etc⁩ ▸ hosts

#custom domain
127.0.0.1	progettodiesempio.local

Scrivendo quello che vedete sopra, non farete altro che dire al computer, che se dovesse arrivare una richiesta dal browser per il sito progettodiesempio.local, il computer dovrà rigirare al richiesta al localhost.

Ora non vi resta che riavviare apache o MAMP dopodiché, adesso il vostro applicativo risponderà in https senza problemi, e vedrete che il certificato che vi mostrerà è proprio quello che abbiamo creato.

Configurare il browser per accettare il certificato autofirmato

Alcuni browser, ma è molto probabile che mentre mi stai leggendo oramai lo facciano tutti, non accettano certificati autofirmati e potrebbe uscirvi una schermata che vi esorta a non proseguire, tipo questa:

Come nell’esempio basterà cliccare su procedi su progettodiesempio.local per permettere a Chrome (in questo caso) di accettare il certificato.

Conclusioni

Dal momento in cui ho scritto questa piccola guida a quando lo leggerete, probabilmente sarà cambiato qualcosa, o semplicemente conoscete un modo migliore per fare quello che ho fatto.
Mi farebbe piacere conoscere le vostre opinioni. ☺️

PS: ci sono delle cose che volutamente non ho trattato nel tutorial, ma solo perché in MAMP sono abilitate già dalla prima installazione.