Membuat koneksi HTTPS dari localhost
Hallo guys! Semoga kita sedang dalam keadaan yang sehat dan baik di tengah kondisi pandemi yang masih memaksa kita untuk membatasi aktivitas sosial kita.
Pada kesempatan kali ini, saya akan membagikan cara membuat koneksi HTTPS dari localhost kita.
Mengapa kita butuh ini?
Ada beberapa kasus di mana kita menginginkan koneksi HTTPS pada saat mengakses localhost kita, misalnya ketika membangun RESTFul API untuk aplikasi mobile. Sistem mobile Android dan iOS terbaru, secara default mengharuskan kita untuk melalui koneksi HTTPS ketika akan mengakses resource dari luar. Meskipun terdapat cara untuk memaksa menggunakan HTTP, namun cara ini tidak aman dan sangat tidak direkomendasikan.
Secara default, aplikasi webserver local yang terinstall di komputer kita (dalam hal ini saya memakai MAMP di Macbook) hanya support koneksi HTTP saja. Oleh karena itu perlu adanya konfigurasi khusus agar kita dapat mengakses skema HTTPS dari localhost kita.
Di tulisan ini, hanya akan dijelaskan 2 alternatif saja. Tentunya masih banyak cara lain yang dapat digunakan.
Prerequisite/persyaratan:
- Sudah install webserver (dalam hal ini saya pakai Apache dari MAMP)
- Sudah punya project website yang akan diakses
- Jalankan webservernya sehingga kita bisa akses http://localhost
Solusi 1: Memakai ngrok
ngrok adalah software yang dapat melakukan tunneling dari internet public ke dalam port komputer local. Secara sederhana, orang lain secara umum dapat mengakses komputer anda (yang bertindak sebagai server). Hal ini sangat berguna karna kita tidak perlu menyewa hosting untuk membuat resource kita diakses oleh publik. Ketika kita mengaktifkan ngrok, maka ia akan otomatis mengizinkan kita untuk mengakses via 2 protokol, HTTP dan HTTPS.
- install ngrok via brew (buka terminal dan ketik)
brew cask install ngrok- jalankan ngrok nya dengan port 80 (atau boleh di ganti dengan port berapapun)
ngrok http 80- jika berhasil nanti akan muncul seperti ini
- jika gagal, kemungkinan instalasi ngrok anda bermasalah. anda bisa install ngrok dengan Node.js.
npm i -g ngrok- dari gambar di atas, kita diberikan 2 akses koneksi (HTTP via http://8c98e25781c2.ngrok.io dan HTTPS via https://8c98e25781c2.ngrok.io)
- buka https://8c98e25781c2.ngrok.io di web browser atau bisa dijadikan host API kamu. URL ini otomatis akan merefer ke resource komputer lokal kita (sama halnya ketika mengakses http://localhost)
- Voila! kamu sudah bisa mengakses https dari lokal server.
Solusi 2: Install self signed certificate
Solusi ini berguna jika kita memerlukan validasi sertifikat saat melakukan koneksi. Solusi 1 di atas, tidak bisa melakukan validasi sertifikat secara default, sehingga kita perlu memakai cara kedua ini.
Contoh kasus yang match untuk saya adalah ketika saya ingin melakukan SSL Pinning dalam aplikasi yang sedang saya buat. Oke langsung saya kita jalankan langka-langkah berikut.
- Buka MAMP -> Preferences -> Ubah default Port menjadi 80 untuk apache. Kemudian restart MAMP.
- Untuk menghindari kesalahan konfigurasi, backup dulu folder
/Applications/MAMP/conf/ - Generate seritifikat dummy
$ cd ~
# generate sebuah private key (enter password sebanyak 2 kali)
$ openssl genrsa -des3 -out server.key 1024
# generate certificate signing request (passwordnya sama kaya di atas)
$ openssl req -new -key server.key -out server.csr
# Jawab beberapa pertanyaan
Country Name (2 letter code): AU
State or Province Name (full name) [Some-State]: Quebec
Locality Name (eg, city) []: Montreal
Organization Name (eg, company) [Internet Widgits Pty Ltd]: Moxspoy
Organizational Unit Name (eg, section) []: Development
Common Name (eg, YOUR name) []: localhost
Email Address []: email@domain.com
A challenge password []: # kosongkan
An optional company name []: # kosongkan
# generate certificate
$ openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt
# remove the password from the server key
$ cp server.key server.tmp
$ openssl rsa -in server.tmp -out server.key
# Move the certificate into your MAMP apache configuration folder
$ cp server.crt /Applications/MAMP/conf/apache
$ cp server.key /Applications/MAMP/conf/apache- Buka /Applications/MAMP/conf/apache/httpd.conf dan uncomment
Include /Applications/MAMP/conf/apache/extra/httpd-ssl.conf - Buka /Applications/MAMP/conf/apache/extra/httpd-ssl.conf dan replace semua yang ada di dalam tag
<VirtualHost...>dengan kode berikut.
<VirtualHost *:443>
SSLEngine on
SSLCertificateFile /Applications/MAMP/conf/apache/server.crt
SSLCertificateKeyFile /Applications/MAMP/conf/apache/server.key
</VirtualHost>- Save perubahannya
- Tekan Command (⌘) + Spacebar dan ketik ‘Keychain Access’ untuk membuka Keychain Access.
- Klik lock icon dan enter password Mac kamu
- Klik System
- Klik File>Import Items
- Pilih file server.crt dan import.
- Nanti akan muncul sertifikat untuk
localhost. Klik kanan dan pilih “Get Info”. Kemudian klik “Trust” dan set “When using this certificate” ke “Always Trust.”
Restart browser kamu dan buka https://localhost.
