Tutorial Enkripsi dan Dekripsi di Javascript
Oke gank, beberapa waktu lalu saya sempat mengikuti test seleksi bootcamp pemprograman secara online. Dimana pada seleksi tersebut, peserta diberi 4 buah soal yang bisa dikerjakan menggunakan bahasa pemprograman yang paling dikuasai dan juga boleh buka google.Gila gampang banget kan!
Iya, bagi sebagian besar yang sudah faham fundamental bahasa pemprograman soal - soal tersebut harusnya bisa dikerjain dengan gampang, namun buat yang masih pemula yang mengandalkan peruntungan kayaknya perlu belajar lagi aja (kayak gw wkwkwk). Kalian bisa mencoba program coding 30hari yang sudah sempat saya bahas dan pastinya gratis!.
Oke, back to topik, pada kesempatan kali ini kita akan belajar cara Enkripsi dan Dekripsi di Javascript. Saya tertarik untuk membahas tutorial ini karena kebetulan pada soal test seleksi bootcamp yang saya ikuti kemarin ada soal ini dan saya cari tutorialnya di google masih jarang ada yang bahas.
Apa itu enkripsi dan deskripsi?
Sederhananya, Enkripsi meupakan metode untuk mengamankan/menyamarkan data yang kita input supaya tidak mudah dibaca oleh orang lain, sedangkan Deskripsi merupakan proses pengembalian data yang kita samarkan menjadi bentuk aslinya. Make sense?
Contohnya gini :Proses EnkripsiNatalia ---> A2sznk?lsnlkmProses DeskripsiA2sznk?lsnlkm ---> Natalia
Bagaimana cara kita melakukannya?
Banyak jalan menjuju roma, banyak cara yang bisa kita tempuh, tetapi saya lebih suka cara yang simpel hehe.
Di Javascript ada sebuah library yang bernama CryptoJS, yang mana library ini bisa kita gunakan untuk melakukan enkripsi dan deskripsi dengan mudah. CryptoJS juga memiliki banyak pilihan metode enkripsi yang bisa kita gunakan seperti hashing, HMAC, Chippers dan lainnya, lebih lengkap bisa baca dokumentasinya disini.
Bagaimana cara pengaplikasian CryptoJS dalam Javascript?
Oke, langsung saja kita praktek. Pertama, buka VSCode atau text editor kesukaan kalian masing - masing.
Kemudian buatlah file baru dengan nama index.html lalu isi dengan kode berikut ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Encrypt & Decrypt Password</title>
<!-- CDN untuk library CryptoJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
</head>
<body>
<!-- Membuat Input dan Output Untuk Enkripsi Password -->
<form onsubmit="event.preventDefault(); enkrip()">
<label>Enkripsi Password</label>
<input id="enkripsi-password" type="text" required>
<button>Enter</button>
</form>
<br />
<div class="hasil-enkripsi">
<p>Hasil Enkripsi :</p>
</div>
<!-- Membuat Enkripsi untuk Input dan Output Dekripsi Password -->
<br />
<form onsubmit="event.preventDefault(); dekrip()">
<label>Dekripsi Password</label>
<input id="dekripsi-password" type="text" required>
<button>Enter</button>
</form>
<br />
<div class="hasil-dekripsi">
<p>Hasil Deskipsi :</p>
</div>
<script>
const enkripsiPassword = document.getElementById('enkripsi-password')
const dekripsiPassword = document.getElementById('dekripsi-password')
const hasilEnkripsi = document.querySelector('.hasil-enkripsi')
const hasilDeskripsi = document.querySelector('.hasil-dekripsi')
// Fungsi untuk mengenkripsi
function enkrip(){
let Enkripsi = CryptoJS.AES.encrypt(enkripsiPassword.value, "PASSWORD")
Enkripsi = Enkripsi.toString() //Kita convert hasil enkripsinya kedalam string supaya bisa ditampilkan dilayar
const hasil = document.createElement("P")
hasil.innerHTML = Enkripsi
hasilEnkripsi.appendChild(hasil)
enkripsiPassword.value = ''
}
// Fungsi untuk mendekripsi
function dekrip(){
let Dekripsi = CryptoJS.AES.decrypt(dekripsiPassword.value, "PASSWORD")
Dekripsi = Dekripsi.toString(CryptoJS.enc.Utf8) //Kita convert hasil deskripsinya supaya bisa ditampilkan dilayar, kita juga menambahkan parameter kedalam toString supaya nilai yang dihasilkan bisa dibaca.
const hasil = document.createElement("P")
hasil.innerHTML = Dekripsi
hasilDeskripsi.appendChild(hasil)
dekripsiPassword.value = ''
}
</script>
</body>
</html>
Pada bagian <head> tepatnya dibawah <title> saya menambahkan CDN untuk CryptoJSnya (ini wajib ya), karena CryptoJS bukan build in function.
Kemudian didalam tag <body> saya membuat 2 buah form yang mana form pertama untuk menangani Enkripsi dan form kedua untuk deskripsi.
Didalam masing - masing form, saya memberikan fungsi onsubmit untuk menjalankan fungsi dekrip atau enkrip yang akan kita buat. Oh iya, saya juga menambahkan event.preventDefault(); pada fungsi yang dijalankan onsubmit supaya brower tidak merefresh saat kita melakukan enkripsi maupun deskripsi sehingga hasil enkripsi maupun deskripsi tersebut bisa tampil dilayar.
Didalam form, saya membuat 3 buah element HTML yaitu label, input dan button. dimana pada setiap input saya memberikan id yang berguna sebagai parameter yang akan kita ambil value / nilainya. Tak lupa kita juga memberikan atribut required supaya input tidak bisa dikirim jika kosong.
Terakhir saya menambahkan tag br untuk memberikan jarak dibawahnya kemudan div dengan class hasil-enkripsi dan hasil-deskripsi yang nantinya akan dijadikan parent untuk menampilkan hasil enkripsi maupun deskripsinya.
Baiklah untuk htmlnya kurang lebih seperti itu, kemudian kita lanjut pada javascriptnya.
Yup, saya memang sengaja menaruh javascriptnya didalam HTML karena cuma sedikit hehe. Untuk menulis javascript di HTML, kita perlu membuat tag <script></script>. Saran dari saya taruh javascript dibagian paling bawah sebelum tag penutup body ( </body> )
Didalam tag javascript tersebut, saya membuat 4 buah variabel const yang berisi id dari input enkripsi dan deskripsi, kemudian 2 buah class untuk menampilakan hasil enkripsi maupun deskripsi.
Lanjut kita membuat fungsi untuk melakukan enkripsi. Dibaris pertama, kita membuat variabel yang didalamnya berisi fungsi untuk mengubah/mengenkripsi input yang kita berikan dengan cara CryptoJS.AES.encrypt(enkripsiPassword.value, "PASSWORD"). Maksud dari kode tersebut kurang lebih CryptoJS adalah library yang kita gunakan, AES adalah jenis enkripsi yang kita gunakan, encrypt adalah metode yang kita gunakan lalu didalam kurung ada 2 parameter. Yang pertama adalah nilai/value yang kita berikan dan yang kedua adalah kode rahasia yang kita buat (ini bisa kalian ubah sesuai keinginan kalian).
Setelah kita lakukan enkripsi, kita ubah hasil enkripsi yang masih berupa objek menjadi String menggunakan metode toString() supaya bisa ditampilkan dilayar. Kemudian dibawahnya kita membuat element "p" yang kita isi dengan hasil enkripsi yang sudah kita ubah menjadi String lalu menampilaknnya dilayar! Hore kita berhasil melakukan Enkripsi.
Next, kita melakukan deskripsi. Fungsi yang kita gunakan sangatlah mirip. yang perlu kita ubah hanya pada bagian CryptoJS.AES.decrypt(dekripsiPassword.value, "PASSWORD"), methodnya saja yang sebelumnya adalah encrypt kita ubah jadi decrypt. Lalu pada bagian toString() kita juga perlu menambahkan parameter CryptoJS.enc.Utf8 supaya hasil deskripsinya bisa dibaca, karena jika tidak hasil deskripsinya akan berupa angka.
Selamat! sekarang kalian sudah bisa melakukan enkripsi dan deskripsi di javascript. Kalian juga bisa berimprovisasi lagi dengan mencoba metode enkripi lainnya yang ada di dokumentasi CryptoJS. Selamat Belajar!
Demo : disini
Souce code : disini