Written with AI assistance from the source video. The video is the authority.
Log in to leave a comment
No posts yet
Karyawan non-developer membawa aplikasi web keren yang dibuat hanya dalam waktu tiga hari menggunakan alat vibe coding seperti v0 atau Cursor. CEO yang bersemangat menyuruh untuk langsung menghubungkannya ke DB komersial agar bisa segera digunakan oleh pelanggan. Pada saat ini, tim pengembang atau CTO mulai berkeringat dingin. Ketika kode yang dihasilkan AI dibuka, string koneksi DB (DSN) tertanam langsung di tengah-tengah komponen klien, atau kueri SQL dijalankan tanpa validasi apa pun.
Jika ini langsung diunggah ke server produksi, insiden hanya tinggal menunggu waktu. Laporan OWASP Top 10 for LLM Applications 2025 juga menyoroti pemberian hak akses berlebih (Excessive Agency - LLM06) dan kurangnya validasi input (Improper Inventory Management / Unvalidated Input - LLM05) pada kode yang dihasilkan AI sebagai elemen keamanan yang paling berbahaya. Faktanya, 73% insiden pelanggaran keamanan aplikasi web memanfaatkan ketiadaan validasi input.
Untuk melindungi DB perusahaan tanpa mematikan produktivitas non-developer, Anda harus menempatkan lapisan kontrol yang kuat di antara prototipe dan DB.
Hal pertama yang harus dilakukan adalah memblokir jalur agar aplikasi yang dibuat oleh non-developer tidak dapat memanggil DB secara langsung. Tempatkan handler rute server Next.js App Router sebagai proxy, lalu validasi data yang masuk secara real-time di tengah-tengah menggunakan pustaka Zod. Pemeriksaan tipe TypeScript hanya bekerja saat proses pengembangan dan tidak dapat mencegah server tumbang ketika pengguna yang sebenarnya mengirimkan data yang tidak valid.
| Item Validasi | Validasi di Sisi UI Browser | Lapisan Proxy Zod di Sisi Server |
|---|---|---|
| Lokasi Eksekusi | Browser Pelanggan | Runtime Serverless Vercel |
| Keamanan | Mudah dilewati melalui Developer Tools | Diblokir secara paksa di server untuk melindungi DB |
| Validasi Data | Pemeriksaan teks secara formal | Validasi presisi pada rentang nilai dan tipe runtime |
| Penanganan Kegagalan | Menampilkan pesan peringatan di layar | Mengembalikan HTTP 400 dan mencatat log kesalahan Sentry |
Langkah pembuatannya sangat sederhana.
app/api/v1/customer-records/route.ts di dalam proyek terlebih dahulu.companyName minimal 2 karakter, contactEmail menggunakan format email, dan employeeCount hanya menerima integer positif.request.json() menggunakan schema.parse(). Hanya data yang lolos yang dimasukkan ke DB melalui Prisma ORM, dan jika gagal, langsung lempar error 400 dan tolak di tempat.Bersamaan dengan validasi di tingkat aplikasi, benteng pertahanan juga harus dipasang pada DB itu sendiri. Jika Anda menggunakan Supabase berbasis PostgreSQL, pengaturan Row Level Security (RLS) adalah jawabannya. Simpan informasi peran pengguna di dalam raw_app_meta_data yang hanya dapat diubah oleh administrator, bukan raw_user_meta_data yang dapat dimanipulasi oleh pengguna, lalu validasi JWT tersebut.
`sql
-- 1. Aktifkan RLS pada tabel
ALTER TABLE public.enterprise_documents ENABLE ROW LEVEL SECURITY;
-- 2. Buat fungsi untuk mengekstrak peran pengguna dari JWT
CREATE OR REPLACE FUNCTION get_user_role()
RETURNS text AS
LANGUAGE sql STABLE;
-- 3. Kebijakan yang hanya mengizinkan pemanggilan jika departemen sama atau merupakan admin
CREATE POLICY "Department Access Policy" ON public.enterprise_documents
FOR SELECT USING (
get_user_role() = 'admin' OR
department = (current_setting('request.jwt.claims', true)::json->'app_metadata'->>'department')
);
`
Dengan melakukan langkah ini, bahkan jika seorang non-developer secara tidak sengaja membocorkan Kunci Peran Layanan (Service Role Key) di dalam kode, dokumen rahasia departemen lain tidak akan pernah bobol.
Alat AI dirancang untuk fokus menampilkan layar terlebih dahulu, sehingga sering kali menggunakan kunci API atau string koneksi DB di lokasi yang terekspos ke browser. Kesalahan yang paling sering terlihat adalah menempelkan awalan NEXT_PUBLIC_ di sembarang tempat. Di Next.js, variabel dengan awalan ini masuk sebagai teks polos (plaintext) ke dalam berkas JavaScript browser. Saat Anda membuat variabel seperti NEXT_PUBLIC_OPENAI_API_KEY, siapa pun yang tahu cara membuka Developer Tools (F12) dapat mengambil kunci API Anda dan menggunakannya sesuka hati.
Lihat saja insiden pelanggaran keamanan yang terjadi pada infrastruktur Vercel pada April 2026. Ketika izin alat AI pihak ketiga yang terintegrasi berhasil ditembus, variabel lingkungan yang tidak disembunyikan menjadi terekspos, memaksa banyak tim bergadang untuk menerbitkan ulang kata sandi DB dan kunci API satu per satu.
Mustahil bagi manusia untuk memeriksa kesalahan seperti ini secara manual satu per satu. Anda harus memasang alat analisis statis Gitleaks pada GitHub Actions untuk menyaringnya secara otomatis sebelum kode digabungkan (merge).
`yaml
name: Security Scan
on:
push:
branches: [main, develop]
pull_request:
branches: [main]
jobs:
gitleaks-scan:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Install and Run Gitleaks
run: |
wget https://github.com/gitleaks/gitleaks/releases/download/v8.18.0/gitleaks_8.18.0_linux_x64.tar.gz
tar -xzvf gitleaks_8.18.0_linux_x64.tar.gz
sudo mv gitleaks /usr/local/bin/
gitleaks detect --source=. --verbose --redact --exit-code=1
public-env-check:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Check Unsafe Public Keys
run: |
UNSAFE=(grep -rn "NEXT_PUBLIC_.*\(SECRET\|KEY\|PASSWORD\|TOKEN\|DSN\)" . || true)
if [ -n "UNSAFE" ]; then
echo "Terdeteksi variabel sensitif yang terekspos ke klien:"
echo "$UNSAFE"
exit 1
fi
`
Jika alur kerja ini dikonfigurasi, deployment akan diblokir secara otomatis begitu non-developer memasukkan kunci API ke dalam kode sumber atau variabel NEXT_PUBLIC_ lalu melakukan Push.
Saat mendaftarkan variabel di dasbor Vercel, pastikan untuk memisahkan cakupan Development, Preview, dan Production secara jelas. Khususnya, pastikan untuk mengaktifkan kotak centang Sensitive Environment Variable. Ini akan dienkripsi sehingga tidak akan tercetak di log build dan tidak dapat disalin sebagai teks polos dari dasbor.
Jika server OpenAI atau Anthropic mengalami down atau responsnya terlambat, seluruh handler serverless akan masuk ke status menunggu dan menyebabkan kegagalan berantai (cascading failure). Pada saat seperti ini, Anda perlu menerapkan circuit breaker menggunakan pustaka opossum di Node.js.
`typescript
import CircuitBreaker from 'opossum';
async function callLLM(prompt: string) {
// Logika pemanggilan API LLM
}
const options = {
timeout: 5000, // Dianggap gagal jika melebihi 5 detik
errorThresholdPercentage: 50, // Buka pemutus arus jika tingkat kegagalan melebihi 50%
resetTimeout: 30000 // Coba lagi setelah 30 detik
};
const breaker = new CircuitBreaker(callLLM, options);
breaker.fallback(() => ({ error: "Respons AI mengalami penundaan. Silakan coba lagi sebentar lagi." }));
`
Jika respons API terlambat, Anda dapat mengirimkan pesan panduan yang telah disiapkan hanya dalam 0,1 detik untuk mencegah seluruh layanan tumbang.
Hubungkan juga Sentry dan webhook Slack agar pembuat aplikasi yang non-developer dapat segera mengetahui situasi gangguan.
`typescript
// app/api/webhooks/sentry-to-slack/route.ts
import { NextResponse } from 'next/server';
export async function POST(request: Request) {
try {
const event = await request.json();
const webhookUrl = process.env.SLACK_INCOMING_WEBHOOK_URL;
if (!webhookUrl) return NextResponse.json({ error: 'Webhook tidak ada' }, { status: 500 });
const title = event.data?.issue?.title || 'Kesalahan sistem tidak diketahui';
const issueUrl = event.data?.issue?.permalink || '#';
await fetch(webhookUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
blocks: [
{
type: 'header',
text: { type: 'plain_text', text: '🚨 Terjadi Kesalahan Produksi' }
},
{
type: 'section',
text: { type: 'mrkdwn', text: `*Rincian Kesalahan:*
${title}` }
},
{
type: 'actions',
elements: [
{
type: 'button',
text: { type: 'plain_text', text: 'Lihat Laporan Sentry' },
url: issueUrl,
style: 'danger'
}
]
}
]
})
});
return NextResponse.json({ success: true });
} catch (err) {
return NextResponse.json({ error: 'Webhook gagal' }, { status: 500 });
}
}
`
Jika kesalahan membesar dan terjadi gangguan tingkat P1 di mana halaman utama tidak muncul, Anda tidak perlu menunggu pengembang. Vercel menyimpan versi deployment sebelumnya apa adanya, sehingga Anda dapat mengembalikannya ke status sebelumnya hanya dengan beberapa klik.
Hanya dalam waktu 30 detik, pengarahan domain akan beralih ke versi sebelumnya. Jika Anda telah menyiapkan validasi Zod, pemindaian Gitleaks, hingga prosedur rollback Vercel, Anda dapat membiarkan non-developer membuat aplikasi sepuasnya sambil tetap bisa tidur nyenyak di malam hari.