Menggunakan HTTPS untuk pengembangan lokal

Maud Nalpas

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

Halaman ini menjelaskan cara menjalankan situs secara lokal dengan HTTPS.

Untuk petunjuk singkat, lihat referensi cepat mkcert.**

Menjalankan situs 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 certificate authority (CA) tepercaya. Browser akan 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 berguna lainnya, lihat Menjalankan situs secara lokal dengan HTTPS: opsi lainnya.

Banyak sistem operasi menyertakan library untuk membuat sertifikat, seperti openssl. Namun, pengujian ini lebih kompleks dan kurang dapat diandalkan dibandingkan mkcert, dan tidak selalu lintas platform, yang membuatnya sulit diakses oleh tim developer yang lebih besar.

Penyiapan

1. Instal mkcert (hanya sekali).

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

   brew install mkcert
   brew install nss # if you use Firefox
   

2. Tambahkan mkcert ke root CA lokal Anda.

   Di terminal Anda, jalankan perintah berikut:

   mkcert -install
   

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

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

   Di terminal, buka direktori utama situs Anda atau direktori mana pun tempat Anda ingin 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 Anda tentukan.
   • Mari {i>mkcert<i} menandatangani sertifikat.

   Sertifikat Anda kini sudah siap dan ditandatangani oleh certificate authority yang dipercaya browser Anda secara lokal.

4. Konfigurasikan server Anda untuk menggunakan HTTPS sertifikat TLS yang baru saja dibuat.

   Detail cara melakukannya bergantung pada server Anda. Beberapa contohnya sebagai berikut:

   Pembelian me Vertex 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});
   

   sengaja bagi 💻 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, sedangkan -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 membuat sertifikat untuk localhost di direktori utama situs:

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

   Maka 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 lain:

   • Server pengembangan sudut
   • Python

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

referensi cepat mkcert

referensi cepat mkcert

Untuk menjalankan situs pengembangan lokal dengan HTTPS:

1. Siapkan mkcert.

   Jika belum melakukannya, instal mkcert, misalnya di macOS:

   brew install mkcert
   
   
   

   Periksa install mkcert untuk instruksi Windows dan Linux.

   Kemudian, buat certificate authority lokal:

   mkcert -install
   

2. Membuat sertifikat tepercaya.

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

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

3. Konfigurasikan server pengembangan untuk menggunakan HTTPS dan sertifikat yang dibuat di Langkah 2.

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

</div>

Menjalankan situs secara lokal dengan HTTPS: opsi lainnya

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

Sertifikat yang ditandatangani sendiri

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

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

Jika Anda tidak menentukan sertifikat, opsi HTTPS server pengembangan React dan Vue akan membuat sertifikat yang ditandatangani sendiri di balik layar. Proses ini tidak lama, tetapi disertai peringatan browser dan perangkap lain dari sertifikat yang ditandatangani sendiri. Untungnya, Anda dapat menggunakan opsi HTTPS bawaan framework frontend dan menentukan sertifikat tepercaya 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. Jika melihat bahwa Anda telah menandatangani sendiri sertifikat, sistem akan memeriksa apakah Anda terdaftar sebagai certificate authority tepercaya. Karena tidak, browser tidak dapat memercayai sertifikat, dan browser menampilkan peringatan yang memberi tahu bahwa koneksi Anda tidak aman. Koneksi HTTPS tetap akan dibuat jika Anda melanjutkan, tetapi Anda melakukannya dengan risiko Anda sendiri.

Sertifikat ditandatangani oleh certificate authority reguler

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

• Anda memiliki lebih banyak pekerjaan penyiapan dibandingkan 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 apa pun yang tidak Anda kontrol.
  • Domain level teratas tidak valid. Untuk mengetahui informasi selengkapnya, lihat daftar domain level teratas yang valid.

{i>Reverse proxy<i}

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 ajak berbagi URL reverse proxy dapat mengakses situs pengembangan lokal Anda. Hal ini dapat berguna untuk menunjukkan project Anda kepada klien, tetapi juga dapat memungkinkan orang yang tidak berwenang berbagi informasi sensitif.
• Beberapa layanan reverse proxy mengenakan biaya atas penggunaan, sehingga harga dapat menjadi faktor dalam pilihan layanan Anda.
• Langkah-langkah keamanan baru di browser dapat memengaruhi cara kerja alat ini.

Tanda (tidak direkomendasikan)

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

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

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

Latar belakang banner besar oleh @anandu di Unsplash, diedit.