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.
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
✨ 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
, atauSameSite:none
, atau memiliki awalan__Host
. CookieSecure
hanya disetel di HTTPS, tetapi tidak dihttp://localhost
untuk semua browser. Selain itu, karenaSameSite:none
dan__Host
juga mengharuskan cookie berupaSecure
, 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, misalnyamysite.example
. Biasanya, hal ini berarti Anda telah mengganti file hosts lokal: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
ataulocalhost
(mysite.localhost
).test
tidak memiliki perlakuan khusus di browser, tetapilocalhost
memilikinya: Chrome dan Edge langsung mendukunghttp://<name>.localhost
, dan akan berperilaku aman saat localhost melakukannya. Cobalah: jalankan situs apa pun di localhost dan akseshttp://<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 sepertimysite.localhost
) adalah karenalocalhost
bukan hanya nama host: ini juga TLD lengkap, seperticom
.
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.