Halaman ini diterjemahkan oleh Cloud Translation API.

Menggunakan HTTPS untuk pengembangan lokal

Maud Nalpas

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

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

Untuk petunjuk singkat, lihat referensi cepat mkcert.**

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

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

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

Banyak sistem operasi menyertakan {i>library<i} untuk membuat sertifikat, seperti openssl. Namun, mereka lebih kompleks dan tidak terlalu handal daripada mkcert, dan tidak harus lintas platform, yang membuatnya kurang dapat diakses oleh tim pengembang yang lebih besar.

Perhatian:

Jangan pernah mengekspor atau membagikan file rootCA-key.pem yang dibuat secara otomatis oleh mkcert saat Anda menjalankan mkcert -install. Penyerang yang mendapatkan file ini dapat menimbulkan serangan di jalur untuk situs mana pun yang mungkin Anda kunjungi. Mereka dapat mencegat permintaan yang aman dari komputer Anda ke situs mana pun—bank Anda, penyedia layanan kesehatan, atau jejaring sosial. Jika Anda perlu mengetahui lokasi rootCA-key.pem untuk memastikan keamanannya, jalankan mkcert -CAROOT.
Hanya gunakan mkcert 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

Instal mkcert (hanya sekali).

Ikuti petunjuknya untuk menginstal {i>mkcert<i} pada sistem operasi Anda. Misalnya, di macOS:
```
brew install mkcert
brew install nss # if you use Firefox
```
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.
Buat sertifikat untuk situs Anda, yang ditandatangani oleh mkcert.

Di terminal Anda, navigasikan ke direktori {i>root <i}situs Anda atau direktori tempat Anda ingin menyimpan sertifikat.

Kemudian, jalankan:
```
mkcert localhost
```
Jika Anda menggunakan nama host khusus seperti mysite.example, jalankan:
```
mkcert mysite.example
```
Perintah ini melakukan dua hal:
- Membuat sertifikat untuk nama host yang telah Anda tentukan.
- Mari kita mkcert menandatangani sertifikat.
Sertifikat Anda sudah siap dan ditandatangani oleh otoritas sertifikat dipercaya oleh browser secara lokal.

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

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, 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 telah membuat sertifikat untuk localhost di elemen direktori {i>root<i}:

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

Buka https://localhost atau https://mysite.example di browser Anda untuk periksa kembali apakah Anda menjalankan situs secara lokal dengan HTTPS. Anda tidak akan melihat peringatan browser, karena browser memercayai mkcert sebagai sertifikat lokal {i>authority<i}.

referensi cepat mkcert

Untuk menjalankan situs pengembangan lokal dengan HTTPS:

Menyiapkan mkcert.

Jika belum melakukannya, instal mkcert, misalnya di macOS:
```
brew install mkcert
```
Memeriksa instal mkcert untuk instruksi Windows dan Linux.

Kemudian, buat certificate authority lokal:
```
mkcert -install
```
Buat sertifikat tepercaya.
```
mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
```
Perintah ini akan membuat sertifikat valid yang ditandatangani oleh {i>mkcert<i} secara otomatis.
Konfigurasi server pengembangan untuk menggunakan HTTPS dan sertifikat yang yang dibuat pada Langkah 2.

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

Perhatian: Lakukan ini hanya untuk pengembangan tujuan dan jangan pernah mengekspor atau membagikan file rootCA-key.pem. Jika Anda perlu tahu di mana file ini berada pastikan keamanannya, jalankan mkcert -CAROOT.

</div>

Jalankan situs Anda secara lokal dengan HTTPS: opsi lainnya

Berikut adalah cara lain untuk menyiapkan sertifikat. Ini umumnya lebih rumit atau lebih berisiko dibandingkan dengan menggunakan {i>mkcert<i}.

Sertifikat yang ditandatangani sendiri

Anda juga dapat memutuskan untuk tidak menggunakan otoritas sertifikat lokal seperti {i>mkcert<i}, dan sebagai gantinya tanda tangani sertifikat Anda sendiri. Pendekatan ini memiliki beberapa kesalahan:

Browser tidak memercayai Anda sebagai certificate authority, sehingga mereka akan menampilkan peringatan Anda harus mengabaikan secara manual. Di Chrome, Anda dapat menggunakan penanda #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 CA {i>root<i}.
Jika tidak menggunakan teknik ini dalam konteks browser, Anda harus menonaktifkan verifikasi sertifikat untuk server Anda. Lupa mengaktifkannya kembali di produksi akan menyebabkan masalah keamanan.

Screenshot browser peringatan akan ditampilkan saat sertifikat yang ditandatangani sendiri digunakan. — Browser peringatan muncul saat sertifikat yang ditandatangani sendiri digunakan.

Jika Anda tidak menentukan sertifikat, React dan Vue opsi HTTPS server pengembangan membuat sertifikat yang ditandatangani sendiri di bawah layar. Proses ini cepat, tetapi memunculkan peringatan browser yang sama dan kesalahan sertifikat yang ditandatangani sendiri. Untungnya, Anda dapat menggunakan frontend kerangka kerja opsi HTTPS bawaan dan menentukan sertifikat tepercaya lokal dibuat menggunakan {i>mkcert<i} atau yang serupa. Untuk informasi selengkapnya, lihat Contoh mkcert dengan React.

Mengapa browser tidak memercayai sertifikat yang ditandatangani sendiri?

Jika Anda membuka situs yang berjalan secara lokal di {i>browser<i} Anda menggunakan HTTPS, {i>browser<i} Anda akan memeriksa sertifikat server pengembangan lokal Anda. Kapan melihat bahwa Anda telah menandatangani sertifikat sendiri, Anda terdaftar sebagai otoritas sertifikat tepercaya. Karena Anda tidak, browser Anda tidak dapat memercayai sertifikat tersebut, dan hal itu akan menampilkan peringatan memberi tahu Anda bahwa koneksi Anda tidak aman. HTTPS masih membuat HTTPS jika Anda melanjutkan, tetapi Anda melakukannya dengan risiko Anda sendiri.

Alasan browser tidak memercayai sertifikat yang ditandatangani sendiri: diagram. — Alasan browser tidak memercayai sertifikat yang ditandatangani sendiri.

Sertifikat yang ditandatangani oleh certificate authority reguler

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

Anda memiliki lebih banyak pekerjaan pengaturan yang harus dilakukan dibandingkan saat menggunakan teknik CA lokal seperti {i>mkcert<i}.
Anda harus menggunakan nama domain valid yang Anda kontrol. Ini berarti Anda tidak bisa gunakan CA resmi untuk hal berikut:
- localhost dan reservasi lainnya nama domain Anda, seperti example atau test.
- Nama domain apa pun yang tidak Anda kontrol.
- Domain level teratas tidak valid. Untuk informasi selengkapnya, lihat daftar domain level teratas yang valid.

Balik proxy

Pilihan lain untuk mengakses situs yang berjalan secara lokal dengan HTTPS adalah menggunakan reverse proxy seperti ngrok. Hal ini disertai dengan risiko berikut:

Siapa pun yang Anda bagikan URL reverse proxy dapat mengakses pengembangan lokal Anda situs Anda. Langkah ini dapat membantu untuk mendemonstrasikan proyek Anda kepada klien, tetapi juga bisa membiarkan orang yang tidak berwenang membagikan informasi sensitif.
Beberapa layanan reverse proxy mengenakan biaya untuk penggunaan, sehingga harga mungkin menjadi faktor dalam layanan pilihan Anda.
Langkah keamanan baru di browser dapat memengaruhi cara kerja alat-alat ini.

Laporkan (tidak direkomendasikan)

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

Anda harus 100% yakin bahwa mysite.example selalu di-resolve ke lokal alamat IPv6 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 kepada semua pengulas dan kontributor—terutama Ryan Sleevi, Filippo Valsorda, Milica Mihajlija, dan Rowan Merewood. 🙌

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