Menggunakan HTTPS untuk pengembangan lokal

Maud Nalpas

Sebagian besar waktu, http://localhost berperilaku seperti HTTPS untuk tujuan pengembangan. Namun, ada beberapa kasus khusus, seperti nama host kustom atau penggunaan cookie aman di seluruh browser, yang mengharuskan Anda menyiapkan situs pengembangan secara eksplisit agar berperilaku seperti HTTPS untuk secara akurat merepresentasikan cara kerja situs Anda dalam produksi. (Jika situs produksi Anda tidak menggunakan HTTPS, segera beralih ke HTTPS).

Halaman ini menjelaskan cara menjalankan situs Anda secara lokal dengan HTTPS.

Catatan: Dalam postingan ini, pernyataan tentang localhost juga berlaku untuk 127.0.0.1 dan [::1], karena keduanya menjelaskan alamat komputer lokal (juga disebut alamat loopback). Agar lebih sederhana, petunjuk ini tidak menentukan nomor port. Jadi, saat Anda melihat http://localhost, baca sebagai http://localhost:{PORT} atau http://127.0.0.1:{PORT}.

Untuk mengetahui petunjuk singkat, lihat referensi cepat mkcert.**

Jalankan situs Anda secara lokal dengan HTTPS menggunakan mkcert (direkomendasikan)

Untuk menggunakan HTTPS dengan situs pengembangan lokal dan mengakses https://localhost atau https://mysite.example (nama host kustom), Anda memerlukan sertifikat TLS yang ditandatangani oleh entitas yang dipercaya oleh perangkat dan browser Anda, yang disebut otoritas sertifikat (CA) tepercaya. Browser memeriksa apakah sertifikat server pengembangan Anda ditandatangani oleh CA tepercaya sebelum membuat koneksi HTTPS.

Sebaiknya gunakan mkcert, CA lintas platform, untuk membuat dan menandatangani sertifikat Anda. Untuk opsi bermanfaat lainnya, lihat Menjalankan situs Anda secara lokal dengan HTTPS: opsi lainnya.

Banyak sistem operasi menyertakan library untuk membuat sertifikat, seperti openssl. Namun, cara ini lebih rumit dan kurang dapat diandalkan daripada mkcert, serta tidak selalu lintas platform, sehingga kurang dapat diakses oleh tim developer yang lebih besar.

Perhatian:

• Jangan pernah mengekspor atau membagikan file rootCA-key.pem yang dibuat mkcert secara otomatis saat Anda menjalankan mkcert -install. Penyerang yang mendapatkan file ini dapat membuat serangan di jalur untuk situs mana pun yang mungkin Anda kunjungi. Mereka dapat mencegat permintaan aman dari komputer Anda ke situs mana pun—bank, penyedia layanan kesehatan, atau jaringan sosial Anda. Jika Anda perlu mengetahui lokasi rootCA-key.pem untuk memastikan keamanannya, jalankan mkcert -CAROOT.
• Gunakan mkcert hanya untuk tujuan pengembangan—dan dengan demikian, jangan pernah meminta pengguna akhir untuk menjalankan perintah mkcert.
• Tim pengembangan: semua anggota tim Anda harus menginstal dan menjalankan mkcert secara terpisah (tidak menyimpan dan membagikan CA dan sertifikat).

Penyiapan

1. Instal mkcert (hanya sekali).

   Ikuti petunjuk untuk menginstal mkcert di sistem operasi Anda. Misalnya, di macOS:

   brew install mkcert
   brew install nss # if you use Firefox
   

2. Tambahkan mkcert ke CA root lokal Anda.

   Di terminal, jalankan perintah berikut:

   mkcert -install
   

   Tindakan ini akan menghasilkan certificate authority (CA) lokal. CA lokal yang dibuat mkcert hanya dipercaya secara lokal, di perangkat Anda.

3. Buat sertifikat untuk situs Anda, yang ditandatangani oleh mkcert.

   Di terminal, buka direktori root situs Anda atau direktori mana pun yang ingin Anda gunakan untuk menyimpan sertifikat.

   Kemudian, jalankan:

   mkcert localhost
   

   Jika Anda menggunakan nama host kustom seperti mysite.example, jalankan:

   mkcert mysite.example
   

   Perintah ini melakukan dua hal:

   • Membuat sertifikat untuk nama host yang telah Anda tentukan.
   • Biarkan mkcert menandatangani sertifikat.

   Sertifikat Anda kini siap dan ditandatangani oleh otoritas sertifikat yang dipercaya browser Anda secara lokal.

4. Konfigurasi server Anda untuk menggunakan HTTPS dan sertifikat TLS yang baru saja Anda buat.

   Detail cara melakukannya bergantung pada server Anda. Berikut beberapa contohnya:

   👩🏻‍💻 Dengan node:

   server.js (ganti {PATH/TO/CERTIFICATE...} dan {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});
   

   👩🏻‍💻 Dengan http-server:

   Mulai server Anda sebagai berikut (ganti {PATH/TO/CERTIFICATE...}):

   http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
   

   -S menjalankan server Anda dengan HTTPS, sementara -C menetapkan sertifikat dan -K menetapkan kunci.

   👩🏻‍💻 Dengan server pengembangan React:

   Edit package.json Anda sebagai berikut, dan ganti {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"
   

   Misalnya, jika Anda telah membuat sertifikat untuk localhost di direktori root situs Anda:

   |-- my-react-app
       |-- package.json
       |-- localhost.pem
       |-- localhost-key.pem
       |--...
   

   Kemudian, skrip start Anda akan terlihat seperti ini:

   "scripts": {
       "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
   

   👩🏻‍💻 Contoh lainnya:

   • Server pengembangan Angular
   • Python

5. Buka https://localhost atau https://mysite.example di browser Anda untuk memeriksa ulang bahwa Anda menjalankan situs secara lokal dengan HTTPS. Anda tidak akan melihat peringatan browser apa pun, karena browser Anda memercayai mkcert sebagai otoritas sertifikat lokal.

Referensi cepat mkcert

Referensi cepat mkcert

Untuk menjalankan situs pengembangan lokal dengan HTTPS:

1. Siapkan mkcert.

   Jika Anda belum melakukannya, instal mkcert, misalnya di macOS:

   brew install mkcert
   
   
   

   Lihat menginstal mkcert untuk mengetahui petunjuk Windows dan Linux.

   Kemudian, buat certificate authority lokal:

   mkcert -install

2. Buat sertifikat tepercaya.

   mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}

   Tindakan ini akan membuat sertifikat valid yang ditandatangani mkcert secara otomatis.

3. Konfigurasi server pengembangan Anda untuk menggunakan HTTPS dan sertifikat yang Anda buat di Langkah 2.

Anda kini dapat mengakses https://{YOUR HOSTNAME} di browser Anda, tanpa peringatan

Perhatian: Lakukan ini hanya untuk tujuan pengembangan dan jangan pernah mengekspor atau membagikan file rootCA-key.pem. Jika Anda perlu mengetahui lokasi file ini untuk memastikan keamanannya, jalankan mkcert -CAROOT.

</div>

Menjalankan situs Anda secara lokal dengan HTTPS: opsi lain

Berikut adalah cara lain untuk menyiapkan sertifikat Anda. Cara ini umumnya lebih rumit atau berisiko daripada menggunakan mkcert.

Sertifikat yang ditandatangani sendiri

Anda juga dapat memutuskan untuk tidak menggunakan otoritas sertifikat lokal seperti mkcert, dan menandatangani sertifikat Anda sendiri. Pendekatan ini memiliki beberapa kelemahan:

• Browser tidak memercayai Anda sebagai certificate authority, sehingga browser akan menampilkan peringatan yang harus Anda lewati secara manual. Di Chrome, Anda dapat menggunakan flag #allow-insecure-localhost untuk melewati peringatan ini secara otomatis di localhost.
• Tindakan ini tidak aman jika Anda bekerja di jaringan yang tidak aman.
• Cara ini tidak selalu lebih mudah atau lebih cepat daripada menggunakan CA lokal seperti mkcert.
• Sertifikat yang ditandatangani sendiri tidak akan berperilaku persis sama dengan sertifikat tepercaya.
• Jika Anda tidak menggunakan teknik ini dalam konteks browser, Anda harus menonaktifkan verifikasi sertifikat untuk server Anda. Lupa mengaktifkannya kembali di produksi menyebabkan masalah keamanan.

Peringatan yang ditampilkan browser saat sertifikat yang ditandatangani sendiri digunakan.

Jika Anda tidak menentukan sertifikat, opsi HTTPS server pengembangan React dan Vue akan membuat sertifikat yang ditandatangani sendiri di balik layar. Cara ini cepat, tetapi disertai dengan peringatan browser yang sama dan potensi masalah lainnya dari sertifikat yang ditandatangani sendiri. Untungnya, Anda dapat menggunakan opsi HTTPS bawaan framework frontend dan menentukan sertifikat yang dipercaya secara lokal yang dibuat menggunakan mkcert atau yang serupa. Untuk mengetahui informasi selengkapnya, lihat contoh mkcert dengan React.

Mengapa browser tidak memercayai sertifikat yang ditandatangani sendiri?

Jika Anda membuka situs yang berjalan secara lokal di browser menggunakan HTTPS, browser akan memeriksa sertifikat server pengembangan lokal Anda. Saat melihat bahwa Anda telah menandatangani sertifikat sendiri, browser akan memeriksa apakah Anda terdaftar sebagai certificate authority tepercaya. Karena Anda tidak menggunakannya, browser Anda tidak dapat memercayai sertifikat, dan akan menampilkan peringatan yang memberi tahu Anda bahwa koneksi Anda tidak aman. Koneksi HTTPS tetap dibuat jika Anda melanjutkan, tetapi Anda melakukannya dengan risiko yang Anda tanggung sendiri.

Alasan browser tidak memercayai sertifikat yang ditandatangani sendiri.

Sertifikat yang ditandatangani oleh otoritas sertifikat reguler

Anda juga dapat menggunakan sertifikat yang ditandatangani oleh CA resmi. Hal ini memiliki detail berikut:

• Anda harus melakukan lebih banyak pekerjaan penyiapan daripada saat menggunakan teknik CA lokal seperti mkcert.
• Anda harus menggunakan nama domain valid yang Anda kontrol. Artinya, Anda tidak dapat menggunakan CA resmi untuk hal berikut:
  • localhost dan nama domain yang dicadangkan lainnya seperti example atau test.
  • Nama domain yang tidak Anda kontrol.
  • Domain tingkat teratas tidak valid. Untuk mengetahui informasi selengkapnya, lihat daftar domain tingkat teratas yang valid.

Reverse proxy

Opsi lain untuk mengakses situs yang berjalan secara lokal dengan HTTPS adalah menggunakan proxy terbalik seperti ngrok. Hal ini memiliki risiko berikut:

• Siapa pun yang Anda bagikan URL proxy terbalik dapat mengakses situs pengembangan lokal Anda. Hal ini dapat berguna untuk mendemonstrasikan project Anda kepada klien, tetapi juga dapat memungkinkan orang yang tidak berwenang membagikan informasi sensitif.
• Beberapa layanan reverse proxy mengenakan biaya untuk penggunaan, sehingga harga mungkin menjadi faktor dalam pilihan layanan Anda.
• Tindakan keamanan baru di browser dapat memengaruhi cara kerja alat ini.

Bendera (tidak direkomendasikan)

Jika Anda menggunakan nama host kustom seperti mysite.example di Chrome, Anda dapat menggunakan tanda untuk memaksa browser menganggap mysite.example aman. Hindari melakukan hal ini karena alasan berikut:

• Anda harus 100% yakin bahwa mysite.example selalu di-resolve ke alamat lokal. Jika tidak, Anda berisiko membocorkan kredensial produksi.
• Tombol ini hanya berfungsi di Chrome, sehingga Anda tidak dapat men-debug di seluruh browser.

Terima kasih banyak atas kontribusi dan masukan kepada semua peninjau dan kontributor—terutama Ryan Sleevi, Filippo Valsorda, Milica Mihajlija, dan Rowan Merewood. 🙌

Latar belakang gambar utama oleh @anandu di Unsplash, diedit.