Analisis Kode Implementasi Kriptografi AES-128

Dokumen ini memberikan penjelasan teknis mengenai kode JavaScript yang digunakan untuk mendemonstrasikan proses enkripsi dan dekripsi menggunakan algoritma AES-128 dengan mode CBC (Cipher Block Chaining).

Implementasi ini memanfaatkan Web Crypto API, sebuah antarmuka bawaan browser modern yang menyediakan metode kriptografi aman, efisien, dan dijalankan secara *native*.

Konsep Dasar & Teknologi

Web Crypto API

Ini adalah standar W3C yang memungkinkan operasi kriptografi (seperti enkripsi, dekripsi, hashing) dilakukan secara aman di dalam browser tanpa memerlukan pustaka eksternal. Semua proses berat dijalankan secara native oleh browser, membuatnya efisien dan aman.

AES-CBC (Advanced Encryption Standard - Cipher Block Chaining)

AES: Algoritma enkripsi simetris yang menjadi standar global. Varian 128-bit digunakan, yang berarti kunci yang dipakai harus memiliki panjang 128 bit (setara dengan 16 karakter).
CBC: Mode operasi yang membuat setiap blok ciphertext bergantung pada semua blok plaintext sebelumnya. Ini membutuhkan blok data acak unik yang disebut Initialization Vector (IV) untuk memulai proses.

Penjelasan Mendalam: Initialization Vector (IV)

Secara sederhana, IV adalah "kunci acak tambahan" atau "nomor seri" yang digunakan hanya satu kali untuk setiap proses enkripsi. Tujuannya adalah untuk menambahkan keacakan.

Analogi: Bayangkan kunci AES adalah kunci utama brankas. Jika Anda mengenkripsi teks yang sama ("Halo") berulang kali dengan kunci yang sama, hasil ciphertext akan selalu berbeda karena IV yang digunakan selalu unik. Ini mencegah pengamat mengenali pola.

Tujuan Utama: Menghilangkan pola dan memastikan hasil enkripsi selalu unik, bahkan jika pesan dan kuncinya identik.
Cara Kerja di CBC: IV digabungkan secara matematis dengan blok pertama plaintext sebelum dienkripsi, menciptakan efek berantai yang kuat.
Sifat IV: IV tidak perlu dirahasiakan. Ia dikirim secara terbuka bersama dengan ciphertext. Dalam implementasi ini, IV digabungkan di bagian depan data terenkripsi.

Elemen HTML Terkait dan Fungsinya

Setiap elemen interaktif memiliki id unik yang digunakan oleh JavaScript untuk mengambil input dan menampilkan output.

Elemen (ID)	Tipe	Fungsi / Deskripsi
Kolom Enkripsi
#aes-text	textarea	Area input untuk memasukkan pesan asli (plaintext).
#aes-key	input	Kolom input untuk kunci rahasia (wajib 16 karakter).
#aes-encrypt-btn	button	Pemicu untuk memulai proses enkripsi.
Kolom Dekripsi
#aes-ciphertext	textarea	Menampilkan hasil enkripsi (ciphertext) dan sebagai input untuk dekripsi.
#aes-key-decrypt	input	Kolom input untuk memasukkan kembali kunci rahasia untuk proses dekripsi.
#aes-decrypt-btn	button	Pemicu untuk menjalankan proses dekripsi.
Area Hasil
#aes-result	div	Kontainer yang menampilkan hasil dekripsi (tersembunyi secara default).
#decrypted-text	p	Menampilkan teks asli setelah berhasil didekripsi.

Analisis Kode Proses Enkripsi

Fungsi `getAesKey(keyStr)`

Fungsi ini mengubah kunci teks dari pengguna menjadi format CryptoKey yang dapat digunakan oleh Web Crypto API.

async function getAesKey(keyStr) {
    // 1. Mengubah string menjadi byte menggunakan TextEncoder
    const encoder = new TextEncoder();

    // 2. Memastikan kunci memiliki panjang 16 byte (128-bit) dengan padding jika perlu
    const keyData = encoder.encode(keyStr.padEnd(16, '\0'));

    // 3. Mengimpor data byte menjadi sebuah objek CryptoKey
    return await crypto.subtle.importKey(
        'raw', // Format kunci mentah (byte)
        keyData,
        { name: 'AES-CBC' }, // Algoritma yang akan digunakan
        false, // Kunci tidak dapat diekstrak dari API
        ['encrypt', 'decrypt'] // Izin penggunaan kunci
    );
}

Event Listener Tombol Enkripsi

Kode ini berjalan saat tombol #aes-encrypt-btn diklik.

document.getElementById('aes-encrypt-btn').addEventListener('click', async () => {
    // Validasi input
    if (aesKey.value.length !== 16) return showToast('Kunci AES harus 16 karakter.');
    if (!aesText.value) return showToast('Teks asli tidak boleh kosong.');

    // 1. Dapatkan kunci AES yang sudah diproses
    const key = await getAesKey(aesKey.value);

    // 2. Buat Initialization Vector (IV) yang acak (16 byte)
    const iv = crypto.getRandomValues(new Uint8Array(16));

    // 3. Ubah teks asli menjadi format biner (byte)
    const encodedText = new TextEncoder().encode(aesText.value);

    // 4. Lakukan proses enkripsi
    const ciphertext = await crypto.subtle.encrypt(
        { name: 'AES-CBC', iv }, // Parameter: nama algoritma dan IV
        key,                    // Kunci yang digunakan
        encodedText             // Data yang akan dienkripsi
    );

    // 5. Gabungkan IV dan Ciphertext untuk proses dekripsi nanti
    const buffer = new Uint8Array(iv.length + ciphertext.byteLength);
    buffer.set(iv, 0);
    buffer.set(new Uint8Array(ciphertext), iv.length);

    // 6. Ubah hasil gabungan menjadi format Base64 agar bisa ditampilkan
    const base64String = btoa(String.fromCharCode.apply(null, buffer));
    document.getElementById('aes-ciphertext').value = base64String;

    showToast('Enkripsi berhasil!', 'success');
});

Alur Proses:

Validasi Input: Memastikan kunci memiliki panjang 16 karakter dan teks tidak kosong.
Membuat Kunci: Memanggil getAesKey untuk mempersiapkan kunci.
Membuat IV: crypto.getRandomValues menghasilkan IV 16-byte yang unik untuk setiap enkripsi.
Enkripsi Inti: crypto.subtle.encrypt dijalankan dengan algoritma, IV, kunci, dan data.
Menggabungkan IV & Ciphertext: IV ditempatkan di depan ciphertext. Ini adalah praktik umum agar penerima bisa memisahkannya untuk dekripsi.
Konversi ke Base64: Hasil biner diubah menjadi string Base64 menggunakan btoa() agar mudah ditampilkan dan dikirim.

Analisis Kode Proses Dekripsi

Event Listener Tombol Dekripsi

Proses ini terjadi ketika pengguna menekan tombol #aes-decrypt-btn.

document.getElementById('aes-decrypt-btn').addEventListener('click', async () => {
    // Validasi input
    if (aesKeyDecrypt.value.length !== 16) return showToast('Kunci AES harus 16 karakter.');
    if (!aesCiphertext.value) return showToast('Ciphertext tidak boleh kosong.');

    try {
        // 1. Dapatkan kunci AES yang sudah diproses
        const key = await getAesKey(aesKeyDecrypt.value);

        // 2. Ubah ciphertext dari Base64 kembali ke format biner
        const data = atob(aesCiphertext.value).split('').map(c => c.charCodeAt(0));

        // 3. Pisahkan IV dan ciphertext (IV adalah 16 byte pertama)
        const iv = new Uint8Array(data.slice(0, 16));
        const ciphertext = new Uint8Array(data.slice(16));

        // 4. Lakukan proses dekripsi
        const decrypted = await crypto.subtle.decrypt(
            { name: 'AES-CBC', iv }, // Parameter: nama algoritma dan IV
            key,                    // Kunci yang digunakan
            ciphertext              // Data yang akan didekripsi
        );

        // 5. Ubah hasil dekripsi (biner) kembali menjadi teks yang bisa dibaca
        const decodedText = new TextDecoder().decode(decrypted);
        document.getElementById('decrypted-text').textContent = decodedText;

        // Tampilkan hasil
        document.getElementById('aes-result').classList.remove('hidden');
        showToast('Dekripsi berhasil!', 'success');
    } catch (e) {
        showToast('Dekripsi gagal. Pastikan kunci dan ciphertext benar.');
    }
});

Alur Proses:

Mendapatkan Kunci: Sama seperti proses enkripsi, kunci disiapkan terlebih dahulu.
Decode Base64: Ciphertext dalam format Base64 diubah kembali menjadi array byte menggunakan atob().
Pemisahan IV: 16 byte pertama dari data diambil sebagai IV, dan sisanya adalah ciphertext murni.
Dekripsi Inti: crypto.subtle.decrypt membalikkan proses enkripsi menggunakan kunci dan IV yang benar.
Decode Teks: TextDecoder digunakan untuk mengubah data biner hasil dekripsi kembali menjadi teks yang dapat dibaca.
Penanganan Error: Blok try...catch digunakan untuk menangani kegagalan dekripsi, yang biasanya terjadi jika kunci atau ciphertext salah.

Kesimpulan

Implementasi ini menunjukkan penggunaan standar industri untuk enkripsi data di sisi klien (browser) secara aman dan efisien. Poin-poin kuncinya adalah:

Penggunaan API Standar: Memanfaatkan Web Crypto API memastikan keamanan dan performa yang teruji tanpa dependensi eksternal.
Kunci dan IV: Keamanan sistem ini sangat bergantung pada kerahasiaan kunci dan keunikan IV pada setiap proses enkripsi.
Alur yang Aman: Proses enkripsi dan dekripsi mengikuti alur standar: persiapan kunci, pembuatan IV, enkripsi/dekripsi, dan konversi format (Teks/Base64), yang merupakan praktik terbaik dalam kriptografi terapan.

Dengan memahami alur ini, Anda dapat dengan percaya diri menjelaskan bagaimana aplikasi menerapkan enkripsi AES-128 secara teknis dan benar.