Kapan harus menggunakan HTTPS untuk pengembangan lokal

Umumnya, Anda dapat menggunakan http://localhost untuk pengembangan lokal, kecuali dalam beberapa kasus khusus. Postingan ini menjelaskan kapan Anda perlu menjalankan situs pengembangan lokal dengan HTTPS.

Maud Nalpas
Maud Nalpas
X GitHub

Lihat juga: Cara menggunakan HTTPS untuk pengembangan lokal.

Dalam postingan ini, pernyataan tentang localhost juga valid untuk 127.0.0.1 dan [::1], karena keduanya mendeskripsikan alamat komputer lokal, yang juga disebut "loopback address". Selain itu, agar semuanya tetap sederhana, nomor port tidak ditentukan. Jadi, saat Anda melihat http://localhost, baca sebagai http://localhost:{PORT} atau http://127.0.0.1:{PORT}.

Ringkasan

Saat melakukan pengembangan secara lokal, gunakan http://localhost secara default. Service Worker, Web Authentication API, dan lainnya akan berfungsi. Namun, dalam kasus berikut, Anda memerlukan HTTPS untuk pengembangan lokal:

  • Menyetel cookie Aman secara konsisten di seluruh browser
  • Men-debug masalah konten campuran
  • Menggunakan HTTP/2 dan yang lebih baru
  • Menggunakan library atau API pihak ketiga yang memerlukan HTTPS

  • Menggunakan nama host kustom

    Daftar kasus ketika Anda perlu menggunakan HTTPS untuk pengembangan lokal.
    Kapan harus menggunakan HTTPS untuk pengembangan lokal.

✨ Hanya ini yang perlu Anda ketahui. Jika Anda tertarik untuk mengetahui detailnya, teruslah membaca.

Alasan situs pengembangan Anda harus berperilaku aman

Untuk menghindari masalah tak terduga, Anda ingin situs pengembangan lokal berperilaku sebaik mungkin seperti situs produksi Anda. Jadi, jika situs produksi menggunakan HTTPS, Anda ingin situs pengembangan lokal Anda berperilaku seperti situs HTTPS.

Gunakan http://localhost secara default

Browser memperlakukan http://localhost dengan cara khusus: meskipun berupa HTTP, sebagian besar perilakunya seperti situs HTTPS.

Pada http://localhost, Service Worker, Sensor API, Authentication API, Payments, dan fitur lain yang memerlukan jaminan keamanan tertentu didukung dan berperilaku sama persis seperti di situs HTTPS.

Kapan harus menggunakan HTTPS untuk pengembangan lokal

Anda mungkin menemukan kasus khusus ketika http://localhost tidak berperilaku seperti situs HTTPS—atau Anda mungkin hanya ingin menggunakan nama situs kustom yang bukan http://localhost.

Anda harus menggunakan HTTPS untuk pengembangan lokal dalam kasus berikut:

  • Anda harus menetapkan cookie secara lokal yang berupa Secure, atau SameSite:none, atau memiliki awalan __Host. Cookie Secure hanya disetel di HTTPS, tetapi tidak di http://localhost untuk semua browser. Selain itu, karena SameSite:none dan __Host juga mengharuskan cookie berupa Secure, menyetel cookie semacam itu di situs pengembangan lokal Anda juga memerlukan HTTPS.

  • Anda perlu men-debug secara lokal masalah yang hanya terjadi di situs HTTPS, tetapi tidak di situs HTTP, bahkan http://localhost, seperti masalah konten campuran.

  • Anda perlu menguji secara lokal atau mereproduksi perilaku khusus untuk HTTP/2 atau yang lebih baru. Misalnya, jika Anda perlu menguji performa pemuatan di HTTP/2 atau yang lebih baru. HTTP/2 yang tidak aman atau yang lebih baru tidak didukung, bahkan di localhost.

  • Anda harus menguji library atau API pihak ketiga secara lokal yang memerlukan HTTPS (misalnya OAuth).

  • Anda tidak menggunakan localhost, melainkan nama host kustom untuk pengembangan lokal, misalnya mysite.example. Biasanya, hal ini berarti Anda telah mengganti file hosts lokal:

    Screenshot terminal yang mengedit file hosts
    Mengedit file host untuk menambahkan nama host kustom.

    Dalam hal ini, Chrome, Edge, Safari, dan Firefox secara default tidak menganggap mysite.example sebagai aman, meskipun itu adalah situs lokal. Jadi, situs tersebut tidak akan berperilaku seperti situs HTTPS.

  • Kasus lainnya. Ini bukanlah daftar lengkap, tetapi jika menemukan kasus yang tidak tercantum di sini, Anda akan tahu: segala sesuatunya akan rusak di http://localhost, atau perilakunya tidak seperti situs produksi Anda. 🙃

Dalam semua kasus ini, Anda perlu menggunakan HTTPS untuk pengembangan lokal.

Cara menggunakan HTTPS untuk pengembangan lokal

Jika Anda perlu menggunakan HTTPS untuk pengembangan lokal, buka Cara menggunakan HTTPS untuk pengembangan lokal.

Tips jika Anda menggunakan nama host kustom

Jika Anda menggunakan nama host kustom, misalnya, mengedit file hosts Anda:

  • Jangan gunakan nama host kosong seperti mysite karena jika ada domain level teratas (TLD) yang memiliki nama yang sama (mysite), Anda akan mengalami masalah. Dan bukannya itu tidak mungkin: pada tahun 2020, ada lebih dari 1.500 TLD, dan daftarnya terus bertambah. coffee, museum, travel, dan banyak nama perusahaan besar (bahkan mungkin perusahaan tempat Anda bekerja!) adalah TLD. Lihat daftar lengkapnya di sini.
  • Hanya gunakan domain milik Anda, atau yang dicadangkan untuk tujuan ini. Jika tidak memiliki domain sendiri, Anda dapat menggunakan test atau localhost (mysite.localhost). test tidak memiliki perlakuan khusus di browser, tetapi localhost memilikinya: Chrome dan Edge langsung mendukung http://<name>.localhost, dan akan berperilaku aman saat localhost melakukannya. Cobalah: jalankan situs apa pun di localhost dan akses http://<whatever name you like>.localhost:<your port> di Chrome atau Edge. Perubahan ini mungkin juga akan dapat dilakukan di Firefox dan Safari. Alasan Anda dapat melakukan ini (memiliki subdomain seperti mysite.localhost) adalah karena localhost bukan hanya nama host: ini juga TLD lengkap, seperti com.

Pelajari lebih lanjut

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

Banner besar oleh @moses_lee di Unsplash, diedit.