Cara Install Valid SSL (HTTPS) pada Local Development (Localhost)

Cara install vaild SSL (HTTPS) pada local development (localhost). Dari sekian banyak tutorial yang beredar di internet mengenai cara install HTTPS pada localhost, hampir semuanya sama, yaitu:

HTTPS work namun tetap muncul peringatan (exception) pada sertifikat SSL karena browser mendeteksi sertifikat SSL tersebut tidak valid (untrusted) seperti gambar dibawah ini.

Baiklah, jadi bagaimana membuat sertifikat SSL yang valid untuk localhost?
Solusi nya yaitu dengan menggunakan OpenSSL.

Membuat Root Sertifikat SSL

Kita akan meng-generate RSA-2048 key dengan nama file rootCA.key. Silahkan buat direktori sementara untuk menyimpan key dan sertifikat SSL nantinya. Contoh pada artikel ini saya menggunakan folder LocalHTTPS, kemudian jalankan perintah dibawah ini, lalu buat password baru untuk key tersebut.

openssl genrsa -des3 -out rootCA.key 2048

Sekarang kita akan gunakan key tersebut untuk meng-generate root sertifikat SSL.

openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

Masukkan password yang kita buat pada key diatas dan isi beberapa informasi seperti dibawah ini.

Sekarang lihat pada folder LocalHTTPS, terdapat dua file yaitu: rootCA.key dan rootCA.pem.

Membuat Domain Sertifikat SSL untuk localhost

Buat konfigurasi OpenSSL, sebagai contoh saya menamainya: server.csr.cnf dan salin kode berikut ini.

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn

[dn]
C=ID
ST=Whatever
L=Whatever
O=wadagizigDEV
OU=WG
emailAddress=hello@wadagizig.com
CN = localhost

Buat file dengan nama v3.ext, lalu salin kode berikut ini.

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

Langkah selanjutnya adalah membuat sertifikat untuk local development alias domain localhost.
1. server.key

openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <( cat server.csr.cnf )

2. server.crt

openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

Jika langkah diatas dilakukan dengan benar, maka isi folder LocalHTTPS adalah seperti dibawah ini.

Mengimpor Root Sertifikat SSL

Untuk macOS, kita bisa melakukan import root sertifikat melalui fitur Keychain Access seperti artikel berikut: How to get HTTPS working on your local development environment in 5 minutes.

Karena saya pengguna Linux, bukan macOS, jadi untuk mengakalinya, kita akan melakukan import root sertifikat tersebut langsung melalui browser.

Import root sertifikat SSL pada Google Chrome

Buka Settings > Advanced > Manage Certificates atau cukup masukkan alamat berikut pada Google Chrome: chrome://settings/certificates

Masuk ke tab AUTHORITIES lalu klik IMPORT dan pilih root sertifikat yang tadi kita buat: rootCA.pem.

Import root sertifikat SSL pada Mozzila Firefox

Masuk ke Edit > Preferences > Privacy & Security > Certicifates > View Certificates. Sama seperti tadi, masuk ke tab Authorities dan pilih import.

Selesai, sekarang kita sudah berhasil mengimport root sertifikat pada browser. Langkah terakhir adalah menggunakan sertifikat tersebut.

Pada artikel ini saya menggunakan web server apache untuk local development.

Menggunakan Sertifikat SSL pada Localhost (Apache)

Aktifkan modul SSL dengan perintah berikut ini.

sudo a2enmod ssl
sudo systemctl restart apache2

Pindahkan atau salin sertifikat yang sudah kita buat diatas ke direktori /etc/ssl/certs/. Saya sarankan buat folder baru saja, sebagai contoh saya menggunakan nama folder 2018. Jadi saya salin semua sertifikat tersebut ke direktori /etc/ssl/certs/2018/disini

Edit konfigurasi SSL apache.

sudo nano /etc/apache2/sites-available/default-ssl.conf

Lalu gunakan sertifikat SSL yang baru kita pindahkan ke folder /etc/ssl/certs/2018/.

<IfModule mod_ssl.c>
    <VirtualHost _default_:443>
        ServerAdmin hello@wadagizig.com
        ServerName localhost

        DocumentRoot /var/www/html
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
        SSLEngine on
        SSLCertificateFile /etc/ssl/certs/2018/server.crt
        SSLCertificateKeyFile /etc/ssl/certs/2018/server.key
        <FilesMatch "\.(cgi|shtml|phtml|php)$">
                        SSLOptions +StdEnvVars
        </FilesMatch>
        <Directory /usr/lib/cgi-bin>
                        SSLOptions +StdEnvVars
        </Directory>
        BrowserMatch "MSIE [2-6]" \
                        nokeepalive ssl-unclean-shutdown \
                        downgrade-1.0 force-response-1.0
        BrowserMatch "MSIE [17-9]" ssl-unclean-shutdown
    </VirtualHost>
</IfModule>
    

Silahkan sesuaikan baris kode yang dicetak tebal dengan local development anda lalu simpan.

Langkah terakhir yaitu mengaktifkan modul SSL virtual host

sudo a2ensite default-ssl.conf
sudo systemctl restart apache2

Testing HTTPS pada localhost

Sekarang tutup semua konfigurasi, buka browser dan masuk ke alamat https://localhost.

Hmm.. it works!
Selesai, sekarang local development anda: localhost sudah full SSL tanpa adanya peringatan sertifikat error.