Adaptasi Vault Dokumen ke Backend FastAPI v3 OK

Adaptasi (HTML + JavaScript) ke Python

Ganti JavaScript dengan Backend FastAPI + AES-256

Adaptasi Vault Dokumen ke Python untuk Enkripsi Aman

Langkah lengkap untuk mengadaptasi isi dari file Vault Dokumen TXT ke Python (FastAPI) agar bisa dijalankan sebagai backend terenkripsi/dekripsi AES-256.

🎯 Tujuan Adaptasi Vault Dokumen TXT ke Backend Python

Dari file Vault Dokumen TXT (Kode HTML + JavaScript) bisa diadaptasi ke Python, namun bukan secara konversi langsung. Adaptasi dilakukan dengan membangun backend Python (misalnya menggunakan FastAPI atau Flask) yang mengubah logika JavaScript di Vault Dokumen TXT menjadi:

• 🔐 Enkripsi & Dekripsi AES-256 (gunakan pycryptodome di Python)
• 📁 Baca/Simpan file .txt di server
• 🔑 Validasi password
• 🔐 Menggunakan IV acak, padding PKCS7, dan Base64 encoding.
• 📡 Terhubung ke frontend HTML melalui fetch API

✅ Kesimpulan Adaptasi

Bagian	Lokasi Awal	Cara Adaptasi ke Python
HTML + CSS	Frontend	Tetap dipakai, tanpa banyak perubahan
JavaScript Encrypt	Frontend	Kirim data ke backend menggunakan fetch()
CryptoJS AES	JavaScript	Dihapus, diganti pycryptodome di backend
localStorage	Frontend	Opsional, bisa diganti dengan database server jika dibutuhkan

🧩 Bagian-Bagian Yang Diadaptasi

Bagian Asli di JS	Akan Digantikan Oleh	Keterangan
CryptoJS.AES.encrypt()	pycryptodome	Enkripsi & dekripsi dipindah ke server
localStorage / <textarea>	Tetap di frontend	Untuk input/output tetap di browser
Password dari input	JSON body ke backend	Dikirim ke server, diolah (salt/hash)
Base64, IV, salt	Tetap dipakai	Untuk menjaga kompatibilitas standar

📦 Mode Operasi: CBC

• CBC (Cipher Block Chaining) digunakan karena aman dan umum.
• GCM juga bisa digunakan jika ingin dukungan autentikasi tambahan (AEAD).
• Hindari ECB — mode ini tidak aman dan sebaiknya tidak digunakan.

🚀 Opsi Pengembangan Lanjutan

• Menggabungkan frontend dan backend menjadi satu proyek
• Menambahkan login dan autentikasi pengguna
• Upload file atau simpan hasil enkripsi ke server
• Alternatif Modern: Gunakan FastAPI (lebih modern dan cepat dibanding Flask)

✅ Langkah-Langkah Detil

🔹 Langkah 1: Siapkan Project Python

🔹 Buat folder proyek, misalnya:

mkdir vault_project && cd vault_project

🔹 Buat Virtual Environment (Opsional tapi disarankan)

# Linux/Mac
  python -m venv env
  source env/bin/activate

  # Windows
  python -m venv env
  env\Scripts\activate

🔹 Instal FastAPI dan dependensinya

pip install fastapi[all] pycryptodome

fastapi[all] akan secara otomatis menginstal Uvicorn, yaitu web server yang digunakan untuk menjalankan aplikasi FastAPI.

🔹 Struktur Folder

vault_project/
  ├── main.py         # Server FastAPI
  └── static/
      └── index.html  # Frontend (HTML/JS)

🔹 Langkah 2: Buat File main.py (Backend)

from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from Crypto.Cipher import AES
from Crypto.Random import get_random_bytes
from base64 import b64encode, b64decode
import hashlib

app = FastAPI()
 langkah lengkap untuk mengadaptasi isi dari file Vault Dokumen TXT ke Python (FastAPI) agar bisa dijalankan sebagai backend terenkripsi/dekripsi AES-256.
# Allow all origins (for testing)
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_methods=["*"],
    allow_headers=["*"],
)

class VaultRequest(BaseModel):
    text: str
    password: str

class DecryptRequest(BaseModel):
    encrypted: str
    password: str

def pad(data: str) -> bytes:
    pad_len = 16 - len(data.encode()) % 16
    return data.encode() + bytes([pad_len] * pad_len)

def unpad(data: bytes) -> str:
    pad_len = data[-1]
    return data[:-pad_len].decode()

@app.post("/encrypt")
def encrypt(data: VaultRequest):
    key = hashlib.sha256(data.password.encode()).digest()
    iv = get_random_bytes(16)
    cipher = AES.new(key, AES.MODE_CBC, iv)
    ciphertext = cipher.encrypt(pad(data.text))
    return {"encrypted": b64encode(iv + ciphertext).decode()}

@app.post("/decrypt")
def decrypt(data: DecryptRequest):
    try:
        key = hashlib.sha256(data.password.encode()).digest()
        raw = b64decode(data.encrypted)
        iv, ciphertext = raw[:16], raw[16:]
        cipher = AES.new(key, AES.MODE_CBC, iv)
        decrypted = unpad(cipher.decrypt(ciphertext))
        return {"decrypted": decrypted}
    except Exception:
        raise HTTPException(status_code=400, detail="Gagal dekripsi.")

🔹 Langkah 3: Jalankan Backend (FastAPI server)

uvicorn main:app --reload

Setelah dijalankan, akses dokumentasi interaktif API melalui browser:
Swagger UI 👉 http://127.0.0.1:8000/docs
ReDoc: 👉 http://127.0.0.1:8000/redoc

🔹 Contoh fetch() dari Frontend

function encryptText() {
    fetch('/encrypt', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        text: document.getElementById('vault').value,
        password: document.getElementById('password').value
      })
    })
    .then(res => res.json())
    .then(data => {
      document.getElementById('vault').value = data.encrypted;
    });
  }
  

⚠️ Catatan: Agar frontend bisa mengakses backend FastAPI, pastikan salah satu dari hal berikut diterapkan:

• Frontend dijalankan di domain yang sama dengan backend
• Atau, aktifkan CORS di backend FastAPI:

🧰 Tambahkan Middleware CORS di main.py:

from fastapi.middleware.cors import CORSMiddleware

  app.add_middleware(
      CORSMiddleware,
      allow_origins=["*"],  # Ganti "*" dengan asal frontend jika perlu
      allow_methods=["*"],
      allow_headers=["*"],
  )
  

📦 Ringkasan

Hal	FastAPI
Web framework	Asynchronous (cepat)
Dokumentasi API	Otomatis di /docs
Kode sederhana	✅ Sangat clean
Backend AES-256	✅ Pakai pycryptodome
Bisa dipakai	Untuk frontend, mobile app, dsb.

🔹 Langkah 4: Adaptasi Frontend HTML (TAKFUNGSI)

🔒 Langkah 5: Penjelasan Proteksi & Keamanan

Teknik	Sudah Dilakukan?	Keterangan
AES-256	✅ Ya	Mode CBC (Cipher Block Chaining)
Random IV	✅ Ya	IV acak setiap enkripsi untuk keamanan
Hash SHA-256 dari password	✅ Ya	Dibuat dengan PBKDF2, tanpa simpan password asli
Base64 Encoding	✅ Ya	Untuk memastikan output aman dikirim sebagai JSON
PKCS7 Padding	✅ Ya (manual)	Padding agar panjang data sesuai blok AES
Side-channel proteksi	❌ Opsional	Bisa menggunakan libsodium atau C libs lebih aman

📦 Bonus Tambahan (Opsional)

• 💾 Simpan hasil ke file .txt di backend
  Tambahkan endpoint baru di FastAPI seperti /save untuk menyimpan hasil enkripsi ke file menggunakan Python.
• 🔑 Tambahkan login/autentikasi
  Gunakan JWT (JSON Web Token) dengan fastapi-jwt-auth atau fastapi-users agar hanya pengguna sah bisa enkripsi/dekripsi.
• 🛡️ Gunakan HTTPS di server produksi
  Sertifikat SSL dapat diatur gratis melalui Let's Encrypt. Wajib diaktifkan di server publik.

📌 Kesimpulan

Proyek Vault kamu kini telah berubah dari sistem berbasis JavaScript menjadi:

• ✅ Backend Python (FastAPI) yang aman
• ✅ Tanpa menyimpan kunci di frontend
• ✅ Siap diintegrasikan ke web, app mobile, atau desktop
• ✅ Siap dikembangkan lebih lanjut: file upload, database, logging, user system, dsb.

🚀 Apa Selanjutnya?

Saya bisa bantu kamu untuk hal-hal lanjutan berikut ini:

• 📂 Versi upload dan enkripsi file .txt
  Contoh: pengguna unggah file .txt → backend enkripsi → file dikirim kembali.
• ☁️ Cara deploy ke server online
  Contoh: Render, Railway, Fly.io
• 🧱 Versi tanpa FastAPI (PHP, Django, dll)
  Jika ingin integrasi ke CMS atau sistem lain.