Kembali ke Dashboard Dokumentasi AES-256
AES-256-CBC

Panduan Komprehensif AES-256

Eksplorasi mendalam algoritma AES-256-CBC, dasar matematika Galois Field, visualisasi proses round, metodologi pengujian latensi, dan integrasi sistem dashboard.

1. Panduan Penggunaan Dashboard

1.1 Persyaratan

1.2 Cara Membuka

1

Buka index.html

Double-klik file web-dashboard/index.html di File Explorer. Atau jika memakai VS Code, gunakan Live Server untuk menghindari masalah CORS.

2

Kunci Otomatis Dimuat

Dashboard secara otomatis memuat kunci default SkadutaPresensi2025SecureKey1234 dari project Dart. Indikator hijau di pojok kanan atas menandakan kunci aktif.

3

Pilih Fitur dari Sidebar

Navigasi menggunakan sidebar kiri. Di perangkat mobile, sidebar dapat dibuka dengan tombol hamburger (≡) di pojok kiri atas.

1.3 Fitur Per Tab

Tab 1 — Dashboard

Halaman utama berisi:

Tab 2 — Enkripsi Manual (Menu 1 Dart)

Setara dengan menu "Enkripsi Manual" di program Dart:

Tab 3 — Dekripsi Manual (Menu 2 Dart)

Tab 4 — Batch Test JSON (Menu 3 Dart)

Setara dengan menuBatchTest() di aes_test.dart:

Tab 5 — Log Latensi (Menu 4 Dart)

Tab 6 — Log Data (Menu 5 Dart)

Tab 7 — Pengaturan Kunci

Tab 8 — Penyimpanan Lokal

💡 Toggle Tema Gelap / Terang
Klik ikon bulan/matahari di pojok kanan topbar untuk beralih antara tema gelap dan terang. Preferensi tersimpan otomatis dan diingat saat halaman direfresh.

2. Fitur Baru Dashboard v2.0 (Premium)

2.1 Eksplorasi Biner: Bit-View Mode

Fitur ini memungkinkan pengguna melihat representasi data di level bit (binary). Sangat berguna untuk analisis struktur data sebelum dan sesudah diproses oleh algoritma AES.

2.2 Produktivitas: Pintasan Keyboard

Navigasi secepat kilat tanpa perlu melepas tangan dari keyboard:

Tombol Aksi / Fungsi
1 - 9 Berpindah antar tab secara instan
T Ganti Tema (Dark ↔ Light)
Esc Buka / Tutup Sidebar navigasi
Enter Terapkan Kunci Enkripsi (di modal kunci)

2.3 Personalisasi & Performa

🚀 High Performance Mode
Mode ini mengoptimalkan proses rendering grafik Chart.js sehingga dashboard tetap responsif meskipun menangani ribuan titik data latensi.

3. Matematika di Balik AES: Galois Field GF(2⁸)

3.1 Finite Field (Medan Hingga)

AES tidak menggunakan matematika bilangan bulat biasa, melainkan Galois Field GF(2⁸). Dalam medan ini, semua hasil operasi (penjumlahan, perkalian) dijamin tetap berada dalam rentang 0–255 (1 byte).

Addition: A ⊕ B = (A XOR B) mod 2
Multiplication: A ⊗ B = (A × B) mod P(x)
Irreducible Polynomial: P(x) = x⁸ + x⁴ + x³ + x + 1 (0x11B)

3.2 Contoh Operasi Matematika

Perkalian dengan {02} (x) dalam GF(2⁸) sering disebut xtime:

If (byte & 0x80) {
  return (byte << 1) ^ 0x1B;
} else {
  return (byte << 1);
}

Kriptografi membutuhkan sifat **"Avalanche Effect"** (efek domino). Dalam GF(2⁸), perubahan 1 bit pada input akan menyebar secara merata dan tidak terduga ke seluruh output setelah operasi perkalian. Ini mencegah pola linear yang mudah dipecah oleh kriptanalisis.

🔬 Byte sebagai Polinomial
Satu byte 0x53 (biner: 01010011) dalam AES direpresentasikan sebagai polinomial: x⁶ + x⁴ + x + 1.

4. Pengantar AES (Advanced Encryption Standard) NIST FIPS 197

4.1 Sejarah Singkat

AES (Advanced Encryption Standard) dipilih oleh NIST (National Institute of Standards and Technology) pada tahun 2001 sebagai standar enkripsi simetris pengganti DES. Algoritma yang terpilih adalah Rijndael, karya kriptografer Belgia Joan Daemen dan Vincent Rijmen.

2.2 Varian Ukuran Kunci

Varian Ukuran Kunci Jumlah Round Keamanan
AES-128 128-bit (16 byte) 10 round ~128-bit security
AES-192 192-bit (24 byte) 12 round ~192-bit security
AES-256 ✓ 256-bit (32 byte) 14 round ~256-bit security

Dashboard ini menggunakan AES-256 dengan kunci 32 karakter ASCII = 256-bit. Ini adalah level tertinggi dan paling aman yang tersedia di AES.

2.3 Enkripsi Simetris

AES adalah enkripsi simetris — kunci yang sama digunakan untuk enkripsi dan dekripsi. Ini berbeda dengan enkripsi asimetris (RSA) yang menggunakan pasangan kunci publik-privat.

Plaintext
AES-256
Encrypt
←→
Kunci 256-bit
(sama)
AES-256
Decrypt
Plaintext

5. Struktur Blok AES

5.1 Block Size

AES beroperasi pada blok data 128-bit (16 byte) tetap. Jika plaintext lebih panjang dari 16 byte, ia dibagi menjadi beberapa blok, dan mode operasi (seperti CBC) menentukan cara memproses blok-blok tersebut. Jika panjang data tidak kelipatan 16, ditambahkan padding PKCS7.

3.2 State Matrix (4×4)

AES merepresentasikan tiap blok 16 byte sebagai matriks 4×4 byte yang disebut state. Semua operasi internal AES dilakukan pada matriks ini:

State matrix 4×4 (tiap sel = 1 byte)

b₀
b₄
b₈
b₁₂
b₁
b₅
b₉
b₁₃
b₂
b₆
b₁₀
b₁₄
b₃
b₇
b₁₁
b₁₅

Byte-byte input diisikan kolom per kolom (column-major order). Sel diagonal yang disorot adalah diagonal utama yang dipakai dalam operasi ShiftRows.

Setiap operasi round AES (SubBytes, ShiftRows, MixColumns, AddRoundKey) memanipulasi matriks ini secara berurutan.

3.3 Padding PKCS7

Karena AES membutuhkan input kelipatan 16 byte, padding PKCS7 ditambahkan:

// Contoh PKCS7: "Hello" (5 byte) → perlu 11 byte padding
"Hello"  → [48 65 6C 6C 6F | 0B 0B 0B 0B 0B 0B 0B 0B 0B 0B 0B]
                  (5 byte)     (11 byte padding = nilai 0x0B = 11)

6. Proses Per Round AES-256

Struktur Round AES-256 (14 Round)
AES-256 terdiri dari 14 round. Round pertama (round 0) hanya AddRoundKey. Round 1–13 lengkap 4 langkah. Round 14 (terakhir) tanpa MixColumns.

4.1 Diagram Alur Enkripsi

Plaintext Block
(16 byte)
AddRoundKey (Round 0)
XOR dengan Key[0]

Ulangi untuk Round 1 – 13:

①SubBytes
②ShiftRows
③MixColumns
④AddRoundKey
Round 14 (Final): SubBytes + ShiftRows + AddRoundKey
(tanpa MixColumns)
Ciphertext Block

3.2 Empat Transformasi Per Round

① SubBytes — Substitusi Non-linear

Setiap byte dalam state diganti menggunakan S-Box (Substitution Box) — tabel lookup 256 entri yang sudah ditetapkan di standar AES. Operasi ini bersifat non-linear, sehingga menyulitkan analisis kriptografi.

S-Box Logic: f(x) = M(x⁻¹) ⊕ C
1. Find multiplicative inverse x⁻¹ in GF(2⁸).
2. Apply Affine Transformation M and add constant C = {63}.

② ShiftRows — Pergeseran Baris

Setiap baris dalam state matrix digeser ke kiri secara siklik:

Tujuan: menyebarkan byte-byte dari kolom yang sama ke kolom berbeda (diffusion).

// Sebelum ShiftRows:
[b0  b4  b8  b12]     // baris 0 — tidak berubah
[b1  b5  b9  b13]  →  // baris 1 — geser 1
[b2  b6  b10 b14]     // baris 2 — geser 2
[b3  b7  b11 b15]     // baris 3 — geser 3

// Sesudah ShiftRows:
[b0  b4  b8  b12]
[b5  b9  b13 b1 ]
[b10 b14 b2  b6 ]
[b15 b3  b7  b11]

③ MixColumns — Pencampuran Kolom

Setiap kolom dari state matrix diperlakukan sebagai polinomial atas GF(2⁸) (Galois Field) dan dikalikan dengan polinomial tetap {03}x³+{01}x²+{01}x+{02}. Ini menghasilkan efek diffusion yang kuat — setiap byte output bergantung pada keempat byte input di kolom yang sama.

⚠️ MixColumns Tidak Ada di Round Terakhir
Round ke-14 (final) tidak menggunakan MixColumns. Ini by-design agar dekripsi bisa menggunakan operasi invers yang tersusun rapi tanpa perlu mengompensasi MixColumns di level bit terakhir.

④ AddRoundKey — XOR dengan Round Key

State di-XOR byte per byte dengan round key yang dihasilkan dari Key Schedule. Ini menambahkan ketergantungan kunci ke tiap round. Karena XOR invertible, dekripsi cukup XOR lagi dengan round key yang sama.

4. Mode Operasi CBC (Cipher Block Chaining) CBC

4.1 Apa Itu Mode Operasi?

AES dasar (ECB — Electronic Codebook) mengenkripsi tiap blok secara independen. Ini tidak aman karena dua blok plaintext yang sama menghasilkan ciphertext yang sama. Mode operasi seperti CBC mengatasi masalah ini.

4.2 Cara Kerja CBC Enkripsi

Pada CBC, setiap blok plaintext di-XOR dengan ciphertext blok sebelumnya sebelum dienkripsi. Blok pertama di-XOR dengan IV (Initialization Vector).

IV (16 byte
random)
XOR
Plaintext
Blok 1
AES
Encrypt
Cipher
Blok 1
Cipher
Blok 1
XOR
Plaintext
Blok 2
AES
Encrypt
Cipher
Blok 2

Dan seterusnya hingga blok terakhir...

4.3 Cara Kerja CBC Dekripsi

Dekripsi CBC bersifat parallelizable — setiap blok didekripsi terlebih dahulu oleh AES, lalu di-XOR dengan ciphertext blok sebelumnya (atau IV untuk blok pertama).

4.4 IV (Initialization Vector)

IV adalah nilai acak 16 byte yang digunakan untuk blok pertama. IV bersifat:

✅ Format Output Dashboard
Output enkripsi berformat: Base64(IV[16 byte] + Ciphertext). IV dan ciphertext digabungkan, lalu di-encode Base64. Saat dekripsi, 16 byte pertama diambil sebagai IV dan sisanya sebagai ciphertext. Format ini identik dengan implementasi Dart (api_encryption.dart).

8. Key Schedule & Inverse Key Schedule

8.1 Key Expansion (Prinsip Dasar)

AES-256 tidak langsung menggunakan kunci asal pada tiap round. Proses Key Schedule menghasilkan round keys (sub-key) dari kunci 256-bit untuk setiap round:

Step 1: Copy 256-bit key into first 8 words (w[0] - w[7]).
Step 2: For words w[i] where i is multiple of 4:
  w[i] = w[i-4] ⊕ SubWord(RotWord(w[i-1]))Rcon[i/4]
Step 3: For other words, w[i] = w[i-1] ⊕ w[i-4].

8.2 Inverse Key Schedule (Mengapa Dekripsi Lebih Lambat?)

Untuk dekripsi AES, diperlukan operasi InvMixColumns yang diaplikasikan ke round key (kecuali round pertama dan terakhir). Ini disebut Equivalent Inverse Cipher.

InvMixColumns melibatkan perkalian di GF(2⁸) menggunakan konstanta berbeda dari enkripsi. Operasi ini memerlukan komputasi tambahan: Konstanta {0E, 0B, 0D, 09} memiliki bobot bit yang lebih banyak dibanding {02, 03, 01}.

Operasi Enkripsi Dekripsi
SubBytes S-Box lookup InvSubBytes (InvS-Box lookup)
ShiftRows Geser kiri Geser kanan (invers)
MixColumns Multiply {02,03,01,01} InvMixColumns {0E,0B,0D,09} — lebih berat!
AddRoundKey XOR round key XOR round key + InvMixColumns(key)
🔬 Implementasi di Dashboard
Dashboard mengimplementasikan fungsi _simIKS() (Simulated Inverse Key Schedule) yang mensimulasikan overhead komputasi GF(2⁸) dari InvMixColumns. Ini memastikan latensi dekripsi yang terukur di dashboard sebanding dengan implementasi Dart, bukan hanya operasi Web Crypto yang dioptimasi browser.

8.3 Jumlah Round Key per Varian

Varian Kunci Asal Round Keys Total Byte Round Key
AES-128 128-bit 11 176 byte
AES-192 192-bit 13 208 byte
AES-256 256-bit 15 240 byte

9. Format Output Enkripsi

9.1 Struktur Output

// Output akhir adalah string Base64 dari:
[IV: 16 byte random] + [AES-CBC Ciphertext]

// Contoh (dalam byte hex):
IV      :  A1 B2 C3 D4 E5 F6 07 18 29 3A 4B 5C 6D 7E 8F 90  (16 byte)
Cipher  :  XX XX XX XX XX XX XX XX ... XX XX XX XX XX XX XX  (N×16 byte)
Combined:  A1 B2 C3 ... 90 | XX XX XX ...
Base64  :  obLDlOX2Bxgp...  (string Base64)

9.2 Mengapa Ukuran Berbeda?

9.3 Tentang "Klaim Dosen" (Ukuran 2×)

📚 Penjelasan Klaim Ukuran 2×

Klaim bahwa "ukuran file hasil dekripsi = 2× ukuran asli" tidak berlaku standar untuk AES-CBC. Secara teknis, dekripsi menghasilkan kembali plaintext asli (ukuran sama ± padding).

Kemungkinan klaim tersebut merujuk pada skenario di mana file output menyimpan plaintext + ciphertext sekaligus, sehingga total menjadi ~2×. Dashboard mengecek rasio 1.8–2.2× dan menampilkan penjelasan pada setiap perbandingan ukuran.

10. Metodologi Pengujian latensi

10.1 Pengukuran Waktu Eksisi

Dashboard menggunakan high-resolution timestamp melalui performance.now(). Berbeda dengan Date.now() yang memiliki keterbatasan presisi, performance.now() memberikan akurasi hingga seperseribu milidetik (μs), sangat krusial untuk mengukur operasi kriptografi yang cepat.

10.2 Perhitungan Throughput

Throughput dihitung dengan rumus: Speed (KB/s) = (Size in Bytes / (Time in ms / 1000)) / 1024. Ini memberikan gambaran performa hardware dalam memproses data per detik.

10.3 Verifikasi Integritas

Setiap operasi batch menyertakan uji verifikasi: Plaintext ≡ Decrypted(Encrypted(Plaintext)). Jika hasil dekripsi tidak identik bit-per-bit dengan input asli, dashboard akan menandai status FAIL.

11. Arsitektur Dashboard Web

Aplikasi dibangun dengan arsitektur Serverless SPA (Single Page Application) yang fokus pada keamanan data lokal.

12. Kompatibilitas dengan Implementasi Dart

12.1 Pemetaan Fitur Dart → Web

Kode Dart Implementasi Web
ApiEncryption.encrypt() aesEncrypt() — Web Crypto AES-CBC
ApiEncryption.decrypt() aesDecrypt() + _simIKS()
ApiEncryption.setKey() importKey() via SubtleCrypto.importKey()
IV.fromSecureRandom(16) crypto.getRandomValues(Uint8Array(16))
base64Encode(iv + cipher) btoa(String.fromCharCode(...iv, ...cipher))
base64Decode(input) atob(input) → Uint8Array
Stopwatch + elapsedMicroseconds performance.now() (presisi sub-ms)
menuBatchTest() doBatch() — sama persis alurnya
latency.log / data.log localStorage + export .log
code/original, enkripsi, dekripsi Download file dari Blob URL

12.2 Format Kunci Identik

Kunci yang digunakan adalah string UTF-8 32 karakter. Di Dart: Key.fromUtf8(_key). Di Web: TextEncoder().encode(key) → 32 byte → SubtleCrypto.importKey(). Keduanya menghasilkan kunci 256-bit yang identik.

// Dart (api_encryption.dart)
final key = Key.fromUtf8("SkadutaPresensi2025SecureKey1234");
final iv  = IV.fromSecureRandom(16);
final combined = iv.bytes + encrypted.bytes;
return base64Encode(combined);

// JavaScript (app.js)
const iv  = crypto.getRandomValues(new Uint8Array(16));
const enc = await crypto.subtle.encrypt({name:'AES-CBC',iv}, key, data);
const out = new Uint8Array(16 + enc.byteLength);
out.set(iv,0); out.set(new Uint8Array(enc),16);
return btoa(String.fromCharCode(...out));
✅ Interoperabilitas
Karena format kunci, IV, dan output identik, ciphertext yang dihasilkan Dart bisa didekripsi di Web dan sebaliknya, asalkan menggunakan kunci yang sama.

13. Glosarium Teknis Kriptografi

Avalanche Effect (Efek Domino) Sifat di mana perubahan kecil pada input (misal: ganti 1 bit) menghasilkan perubahan besar pada output (misal: 50% bit ciphertext berubah). AES-256 memiliki avalanche effect yang sangat kuat.
Confusion (Kebingungan) Teknik untuk membuat hubungan antara statistik plaintext and ciphertext menjadi serumit mungkin (diperoleh lewat langkah SubBytes).
Diffusion (Penebaran) Teknik untuk menyebarkan pengaruh satu bit plaintext ke banyak bit ciphertext (diperoleh lewat langkah ShiftRows and MixColumns).
Galois Field GF(2⁸) Sistem matematika medan hingga di mana semua operasi aritmatika dilakukan terhadap polinomial, memastikan hasil tetap dalam rentang 8-bit (0-255).
Padding PKCS7 Metode untuk melengkapi blok data agar sesuai dengan ukuran blok 16 byte cipher, dengan menambahkan byte yang nilainya sama dengan jumlah byte yang ditambahkan.
Web Crypto API Antarmuka standar browser modern untuk melakukan operasi kriptografi tingkat rendah (native) secara aman dan cepat.

14. FAQ

Apakah data saya aman?

Ya. Dashboard ini berjalan sepenuhnya di browser (client-side). Tidak ada data yang dikirim ke server manapun. Enkripsi/dekripsi dilakukan menggunakan Web Crypto API bawaan browser yang diimplementasikan di level C++ native dan telah diaudit secara keamanan.

Mengapa dekripsi sering lebih lambat dari enkripsi?

Karena Inverse Key Schedule — dekripsi AES memerlukan transformasi InvMixColumns terhadap round keys yang melibatkan perkalian polinomial di GF(2⁸). AES-256 memiliki 14 round, sehingga overhead ini signifikan. Dokumentasi teknis: NIST FIPS 197, Section 5.3.

Bagaimana cara deploy ke GitHub Pages?

1

Buat repository GitHub

Upload folder web-dashboard/ ke repository baru atau yang sudah ada.

2

Aktifkan GitHub Pages

Settings → Pages → Branch: main, Folder: /web-dashboard → Save.

3

Akses URL

Dashboard tersedia di https://[username].github.io/[repo-name]/ dalam beberapa menit.

Apakah localStorage aman untuk menyimpan data enkripsi?

localStorage menyimpan data di browser lokal tanpa enkripsi tambahan. Data yang tersimpan (log latensi, log data, statistik) tidak mengandung plaintext sensitif — hanya metadata operasi. Jangan menyimpan plaintext atau kunci di localStorage secara manual.

Berapa kapasitas localStorage?

Umumnya 5–10 MB per domain, bergantung browser dan pengaturan. Dashboard menampilkan estimasi penggunaan vs kapasitas 5 MB di tab Penyimpanan Lokal.

Apakah dashboard berfungsi offline?

Ya, hampir sepenuhnya. Tanpa internet, Google Fonts tidak dimuat (font fallback ke system sans-serif), namun semua fungsi enkripsi, dekripsi, log, dan penyimpanan tetap berjalan normal.

Dokumentasi AES-256 Dashboard — Referensi: NIST FIPS 197, RFC 3602 (AES-CBC), PKCS #7

← Kembali ke Dashboard