Integrasi AI Gemini ke Aplikasi Web Tanpa Membocorkan API Key

Waktu pertama kali membuat aplikasi dengan fitur AI, godaan terbesarnya adalah memanggil API Gemini langsung dari frontend. Kodenya pendek, dokumentasinya memang mencontohkan seperti itu, dan dalam lima menit fitur langsung jalan. Masalahnya, API key kamu ikut terbundle ke dalam file JavaScript yang bisa dibaca siapa saja yang membuka situsmu.

Itu bukan risiko teori. Ada banyak bot yang tugasnya memindai situs dan repositori publik untuk mencari pola API key. Sekali key kamu ketemu, orang lain bisa memakainya atas nama kuota dan tagihanmu. Kalau key-nya tanpa pembatasan, kerugiannya bisa lebih jauh dari sekadar kuota habis.

Solusi yang saya pakai sekarang adalah backend proxy yang sangat ringan. Frontend tidak lagi memanggil Gemini secara langsung, tapi mengirim permintaan ke endpoint milik sendiri, misalnya /api/gemini. Backend inilah yang menyimpan API key di file .env sisi server, menyusun prompt dan skema jawaban, lalu meneruskan permintaan ke Gemini dan mengembalikan hasilnya.

Backend-nya tidak perlu framework besar. Untuk kebutuhan satu endpoint, satu file server dengan runtime seperti Bun sudah lebih dari cukup, sekaligus bisa bertugas menyajikan file frontend-nya. API key tidak pernah keluar dari server, dan saya bisa menambahkan pembatasan tambahan di lapisan ini, misalnya membatasi ukuran permintaan atau format jawaban yang diterima.

Satu hal lagi yang sering dilupakan, batasi juga key-nya dari sisi Google Cloud Console. Aktifkan pembatasan agar key hanya bisa dipakai untuk API yang memang dibutuhkan. Jadi kalaupun key sampai bocor, ruang geraknya tetap sempit.

Prinsipnya berlaku buat semua API berbayar, bukan cuma Gemini. Anggap API key seperti kata sandi. Tempatnya di server, bukan di kode yang dikirim ke browser pengunjung.