Secure Sockets Layer (SSL) adalah protokol keamanan yang membuat tautan aman antara server dan klien. Ini adalah bagian dari protokol HTTPS yang melakukan enkripsi data. SSL penting karena melindungi data dari penyadapan dan serangan terkait.
Secara default, jika Anda membuat aplikasi React menggunakan create-react-app, aplikasi tersebut tidak menggunakan HTTPS. Mengaktifkan HTTPS untuk aplikasi Anda berguna terutama jika Anda berencana untuk mem-proxy permintaan ke API yang menyajikannya melalui HTTPS.
Menggunakan HTTPS di React
Ketika kamu buat aplikasi menggunakan create-react-app, ini berjalan di HTTP secara default. Untuk menggunakan SSL dan menyajikan halaman melalui HTTPS, Anda perlu mengatur HTTPS variabel menjadi benar dalam package.json. Lakukan dengan memodifikasi scripts.start nilai agar terlihat seperti ini:
"skrip": {
"Mulailah": "HTTPS=BENAR reaksi-skrip mulai",
},
Atau, Anda dapat mengatur HTTPS variabel lingkungan menjadi true saat Anda memulai aplikasi.
Di Linux/macOS:
HTTPS=BENAR npm mulai
Di Windows cmd:
mengatur HTTPS=BENAR&&npm Mulailah
Di Windows Powershell:
($env: HTTPS = "BENAR") -dan (npm mulai)
Namun, setiap pendekatan hanyalah langkah pertama. Jika Anda mencoba memulai aplikasi React Anda pada saat ini, Anda akan mendapatkan kesalahan. Untuk menyelesaikan proses, Anda harus menyiapkan yang valid sertifikat SSL.
Buat Otoritas Sertifikat di Mesin Anda
Salah satu alat yang dapat Anda gunakan untuk menghasilkan sertifikat SSL adalah mkcert. Ini memungkinkan Anda membuat sertifikat pengembangan yang diuji secara lokal tanpa mengonfigurasi apa pun.
Ini kompatibel lintas platform dan berfungsi di Windows, Linux, dan macOS. Artikel ini menggunakan Linux.
Temukan panduan instalasi platform yang Anda gunakan dari halaman GitHub mkcert.
Mulailah dengan menginstal certutil.
sudo tepat Install libnss3-alat
Kemudian Anda dapat menginstal mkcert menggunakan Homebrew
buatan Install mkcert
Buat otoritas sertifikat lokal (Ca) dengan menjalankan perintah berikut.
mkcert -Install
Setelah CA berhasil dibuat, Anda sekarang dapat mulai membuat sertifikat SSL.
Hasilkan Sertifikat SSL
Arahkan ke folder root aplikasi React Anda dan buat sertifikat SSL.
Pertama, buat folder untuk sertifikat.
sertifikat reaksi mkdir
Jalankan yang berikut ini untuk menghasilkan sertifikat dan menyimpannya di folder yang baru saja Anda buat.
mkcert -key-file ./reactcert/key.pem -cert-file ./reactcert/cert.pem "localhost"
Konfigurasikan React untuk Menggunakan SSL
Di package.json, tambahkan jalur yang mengarah ke sertifikat SSL.
"skrip": {
"Mulailah":
"HTTPS =BENARSSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem skrip reaksi mulai"
}
Amankan Situs Bereaksi Anda Menggunakan SSL
Artikel ini menunjukkan kepada Anda bagaimana Anda dapat menggunakan sertifikat SSL di lingkungan lokal React. Namun sertifikat SSL penting untuk semua aplikasi web. Mereka melindungi situs web Anda dari peretas dan melindungi data pengguna yang mengunjungi situs Anda.
