Adaptasi Vault Dokumen ke Backend FastAPI v1 ???
🔐 Adaptasi Vault Dokumen TXT ke FastAPI Backend (AES-256)
🎯 Tujuan:
- Mengubah logika JavaScript di Vault Dokumen TXT menjadi backend Python menggunakan FastAPI.
- Menggunakan AES-256 dengan IV acak, padding PKCS7, dan encoding Base64.
- Frontend HTML tetap mengelola UI, dan berkomunikasi via
fetchke backend.
🧩 Bagian-Bagian Yang Diadaptasi
| Bagian Asli di JS | Akan Digantikan Oleh | Keterangan |
|---|---|---|
CryptoJS.AES.encrypt() | pycryptodome | Enkripsi dipindah ke server |
localStorage / <textarea> | Tetap di frontend | UI tetap di browser |
| Password dari input | JSON body ke backend | Dikirim dan di-hash server-side |
| Base64, IV, salt | Tetap dipakai | Agar tetap kompatibel |
✅ LANGKAH-LANGKAH DETIL
🔹 Langkah 1: Siapkan Proyek Python
# Buat folder proyek
mkdir vault_project && cd vault_project
# Buat virtual environment (opsional tapi disarankan)
python -m venv env
# Aktifkan virtual environment
source env/bin/activate # Linux/Mac
env\Scripts\activate # Windows
# Install FastAPI dan pycryptodome
pip install fastapi[all] pycryptodome
🔹 Langkah 2: Buat File main.py (Backend)
from fastapi import FastAPI, HTTPException, Request
from pydantic import BaseModel
from Crypto.Cipher import AES
from Crypto.Random import get_random_bytes
from Crypto.Protocol.KDF import PBKDF2
import base64
import json
app = FastAPI()
class VaultData(BaseModel):
password: str
plaintext: str = None
ciphertext: str = None
mode: str # "encrypt" or "decrypt"
@app.post("/vault")
def process_vault(data: VaultData):
try:
salt = get_random_bytes(16)
key = PBKDF2(data.password, salt, dkLen=32, count=100000)
if data.mode == "encrypt":
iv = get_random_bytes(16)
cipher = AES.new(key, AES.MODE_CBC, iv)
padded = pad(data.plaintext.encode('utf-8'))
encrypted = cipher.encrypt(padded)
return {
"ciphertext": base64.b64encode(encrypted).decode(),
"iv": base64.b64encode(iv).decode(),
"salt": base64.b64encode(salt).decode()
}
elif data.mode == "decrypt":
iv = base64.b64decode(data.iv)
salt = base64.b64decode(data.salt)
ciphertext = base64.b64decode(data.ciphertext)
key = PBKDF2(data.password, salt, dkLen=32, count=100000)
cipher = AES.new(key, AES.MODE_CBC, iv)
decrypted = unpad(cipher.decrypt(ciphertext))
return {"plaintext": decrypted.decode()}
else:
raise HTTPException(status_code=400, detail="Invalid mode")
except Exception as e:
raise HTTPException(status_code=500, detail=str(e))
def pad(data):
pad_len = 16 - len(data) % 16
return data + bytes([pad_len]) * pad_len
def unpad(data):
pad_len = data[-1]
return data[:-pad_len]
🔹 Langkah 3: Buat HTML Frontend
<!DOCTYPE html>
<html>
<body>
<textarea id="input" placeholder="Teks rahasia..."></textarea><br>
<input type="password" id="password" placeholder="Password"/><br>
<button onclick="encrypt()">Encrypt</button>
<button onclick="decrypt()">Decrypt</button>
<pre id="output"></pre>
<script>
async function encrypt() {
const plaintext = document.getElementById("input").value;
const password = document.getElementById("password").value;
const res = await fetch("/vault", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ plaintext, password, mode: "encrypt" })
});
const json = await res.json();
document.getElementById("output").innerText = JSON.stringify(json, null, 2);
}
async function decrypt() {
const obj = JSON.parse(document.getElementById("output").innerText);
const password = document.getElementById("password").value;
const res = await fetch("/vault", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ password, ciphertext: obj.ciphertext, iv: obj.iv, salt: obj.salt, mode: "decrypt" })
});
const json = await res.json();
document.getElementById("output").innerText = json.plaintext;
}
</script>
</body>
</html>
🔹 Langkah 4: Jalankan Backend FastAPI
uvicorn main:app --reload
Sekarang backend siap digunakan untuk mengenkripsi dan mendekripsi teks via frontend menggunakan AES-256 CBC, PKCS7 padding, dan IV acak!
Comments
Post a Comment