Fondasi: Komputermu, Web, dan Alat Kerjamu · 6/7
Client dan server: siapa menjalankan apa, dan kenapa itu penting
Model berpikir paling penting dalam kerja fullstack. Salah paham di sini bisa bikin rahasia bocor.
Baca 20 menit
Setelah pelajaran ini kamu bisa
- Menentukan untuk setiap potongan kode, apakah ia jalan di client atau di server
- Menjelaskan kenapa rahasia di kode client berarti rahasia yang bocor
- Menjelaskan kenapa validasi di client bukan kontrol keamanan
- Menjelaskan apa harga dari batas jaringan itu
Kalau di modul ini kamu hanya menguasai satu hal, kuasai yang ini. Hampir semua kesalahan keamanan serius yang dibuat developer junior berakar pada kebingungan kodenya berada di sisi mana dari garis ini.
| Client | Server | |
|---|---|---|
| Berjalan di | Perangkat pengguna | Mesin yang kamu kendalikan |
| Siapa bisa membaca kodenya | Siapa pun. Kodenya dikirim ke mereka. | Hanya kamu |
| Siapa bisa mengubahnya | Pengguna | Hanya kamu |
| Bisa mengakses database langsung | Tidak | Ya |
| Bisa menyimpan secret key | Tidak, jangan pernah | Ya |
| Bisa dipercaya | Tidak | Ya, kalau kamu menulisnya dengan hati-hati |
Rahasia yang bukan rahasia
Kode client *dikirimkan* ke browser. Minifikasi tidak mengubah apa pun — siapa pun bisa membuka DevTools dan membacanya, atau sekadar melihat lalu lintas jaringannya. Jadi API key di dalam kode client itu sama dengan dipublikasikan, permanen, ke semua orang yang mengunjungi situsmu.
// ❌ Siapa pun yang membuka halaman ini sekarang punya key-mu.
"use client";
const STRIPE_SECRET = "sk_live_51H...";
// ✅ Key tetap di server. Client hanya melihat hasilnya.
// (kode server — tidak pernah dikirim ke browser)
const key = process.env.STRIPE_SECRET_KEY;Kenapa validasi client bukan keamanan
Validasi di client itu kebaikan untuk pengguna — ia memberi tahu ada salah ketik tanpa menunggu perjalanan ke server. Ia bukan kontrol, karena pengguna bisa mematikan JavaScript-mu, mengeditnya, atau melewati halamanmu sama sekali dan mengirim request pakai curl.
Aturannya: validasi di client untuk kenyamanan, validasi di server untuk kebenaran. Keduanya, selalu. Dan pemeriksaan di server-lah yang wajib benar.
Server tidak boleh percaya pada bentuk data yang datang. Jalankan ini untuk melihat betapa mudahnya payload yang tampak 'valid' ternyata bohong.
Hasil
Tekan Jalankan untuk melihat hasilnya.
Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.
Batas itu ada harganya
- Waktu. Satu perjalanan bolak-balik butuh puluhan sampai ratusan milidetik. Sepuluh request berurutan berarti halaman yang lambat.
- Kegagalan. Jaringan bisa putus kapan saja. Kode server yang menganggap itu tidak akan terjadi adalah kode yang rapuh.
- Serialization. Hanya data yang menyeberang. Kamu tidak bisa mengirim function atau koneksi database.
Tugas praktik
Buka situs mana pun yang punya form login. Di DevTools, temukan file JavaScript yang menangani form itu. Sekarang buka tab Sources dan pastikan kamu bisa membaca logikanya. Lalu, di console, jalankan document.querySelector('form').noValidate = true dan coba submit form kosong. Lihat validasi client-nya begitu saja tidak ada lagi.
Hasil yang diharapkan
Form-nya terkirim meski ada aturan yang tadinya seolah dipaksakan halaman itu.
Cek pemahaman
Pilih jawaban dulu