Belajar Frontend - Web Security Dasar

#Pendahuluan

Semakin kompleks TokoKita — data pengguna, pembayaran, cookie — semakin tinggi taruhannya. Episode 18 membahas web security dari sisi frontend: ancaman yang menyerang aplikasi di sisi klien dan lapisan HTTP. Keamanan bukan tugas "tim security" — setiap baris kode yang menampilkan input pengguna adalah garis depan.

Filosofi episode ini: pahami cara serangan bekerja, bukan sekadar menghafal daftar mitigasi. Engineer yang paham mekanisme XSS akan menulis kode yang aman secara alami — bukan karena checklist.

#XSS: Serangan Paling Umum

XSS (Cross-Site Scripting) — penyerang menyuntikkan script yang dijalankan di halaman kalian. Akibatnya bisa dari mencuri cookie sampai menguasai akun.

Contoh XSS: innerHTML dengan input pengguna

// ❌ BERBAHAYA — input pengguna ditampilkan sebagai HTML
reviewSection.innerHTML = `<p>${userReview}</p>`;
 
// ✅ Aman — ditampilkan sebagai teks
reviewSection.textContent = userReview;

Pola XSS klasik: kotak ulasan produk TokoKita. Jika kalian memasang innerHTML pada input, penyerang menulis <img src=x onerror=alert(document.cookie)> dan script berjalan di browser korban.

#Aturan Pencegahan

1. Jangan pernah render input pengguna sebagai HTML — textContent (atau React yang sudah escape otomatis).
2. React/JSX aman secara default — {userReview} di JSX tidak mengeksekusi HTML. Jangan "bantu-bantu" dengan dangerouslySetInnerHTML kecuali benar-benar perlu (lalu sanitasi).
3. Sanitasi HTML — jika konten rich text dibutuhkan, gunakan library sanitizer (mis. DOMPurify), bukan regex.

#CSRF: Aksi Tanpa Izin

CSRF (Cross-Site Request Forgery) — penyerang membuat pengguna terautentikasi menjalankan aksi tanpa sadar. Saat pengguna login TokoKita, browser menyimpan cookie. Jika ia mengunjungi situs jahat, halaman itu bisa mengirim request "jual item" atas nama cookie-nya.

Serangan CSRF klasik

<img src="https://toko.kita/api/delete-account?id=1" />

Browser mengirim cookie saat request ke toko.kita — tanpa persetujuan pengguna.

#Mitigasi

• Token CSRF — server mengirim token sekali pakai yang wajib menyertai request mutasi; situs jahat tidak bisa membacanya.
• SameSite cookie — set SameSite=Lax/Strict agar cookie tidak dikirim pada request lintas-situs.
• Jangan pernah mengubah data via GET — mutasi hanya lewat POST/PUT/DELETE dengan token.

#CORS: Siapa yang Boleh Memanggil

CORS (Cross-Origin Resource Sharing) mengatur kapan browser mengizinkan JavaScript lintas origin. Ini proteksi browser, bukan pengganti otentikasi server.

access-control-allow-origin: https://toko.kita
access-control-allow-methods: GET, POST, PUT, DELETE

Masalah umum di development: fetch ke API di origin lain memblokir. Solusi yang benar: server mengatur header CORS (bukan disable CORS di browser). Wildcard * hanya aman untuk data publik tanpa cookie.

#CSP dan Header HTTPS

CSP (Content Security Policy) adalah "daftar putih" yang memberi tahu browser dari mana script boleh dimuat:

content-security-policy: default-src 'self'; script-src 'self'; style-src 'self'

Efeknya: walau XSS lolos, browser menolak menjalankan script dari sumber yang tidak ada di daftar. Ini lapisan kedua setelah kode yang benar.

HTTPS wajib untuk semua hal: browser membatasi cookie (Secure), service worker, dan banyak API modern hanya di konteks aman. Redirect http → https secara permanen.

#Praktik: Hardening TokoKita

Checklist hardening yang realistis:

1. Render aman — audit semua innerHTML/dangerouslySetInnerHTML; ganti dengan teks atau sanitasi.
2. Cookie — HttpOnly (JS tidak bisa baca), Secure, SameSite=Lax.
3. CSP — pasang header CSP di server/edge; mulai ketat lalu longgarkan sesuai kebutuhan.
4. CORS — daftar origin yang tepat, bukan wildcard untuk data sensitif.
5. Dependensi — jalankan audit keamanan: bun audit (atau npm audit).

bun audit

Strict-Transport-Security: max-age=63072000
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin

#Common Pitfalls

#Penutup

Inti yang harus dibawa pulang:

• XSS: jangan pernah render input sebagai HTML; framework escape otomatis — jangan matikan.
• CSRF: token + SameSite + jangan mutasi lewat GET.
• CORS mengatur lintas-origin di sisi browser; konfigurasikan origin spesifik.
• CSP adalah jaring pengaman kedua; HTTPS adalah prasyarat mutlak.

Di episode 19 selanjutnya kita mengamankan identitas: authentication & authorization — JWT/session, OAuth, SSO, dan secure storage, untuk membangun alur login TokoKita yang aman. Sampai jumpa di episode 19!