Tujuan Pembelajaran

Memahami XSS dan cara mencegahnya
Mengerti CSRF protection
Bisa mengkonfigurasi Content Security Policy

Analogi

Diagram


      Client-Side Attacks:
├── XSS (Cross-Site Scripting)
│   ├── Stored XSS
│   ├── Reflected XSS
│   └── DOM-based XSS
├── CSRF (Cross-Site Request Forgery)
└── CSP (Content Security Policy)

XSS dan CSRF adalah ancaman yang menargetkan user melalui browser — mitigasi harus di server dan client

Penjelasan Konsep

XSS (Cross-Site Scripting) adalah serangan di mana attacker menyisipkan malicious script ke website.

Script tersebut berjalan di browser user, bisa mencuri cookies, session tokens, atau melakukan action atas nama user.

Jenis XSS

Stored XSS (script disimpan di database — berbahaya karena affect semua user yang melihat page), Reflected XSS (script di URL — biasanya via phishing link),

DOM-based XSS (script memanipulasi DOM client-side).

Mitigasi XSS

Sanitize input (DOMPurify untuk HTML), Escape output (jangan render user input sebagai HTML), Content Security Policy (CSP).

CSRF

Attacker memaksa user untuk melakukan action tidak diinginkan di website yang sudah diautentikasi.

Mitigasi: CSRF token, SameSite cookie attribute, validate Origin/Referer header.

Content Security Policy (CSP)

HTTP header yang mengontrol resource mana yang boleh diload oleh browser.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami XSS dan cara mencegahnya., mengerti CSRF protection., dan bisa mengkonfigurasi Content Security Policy. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca XSS, CSRF, dan Content Security Policy, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

XSS dan CSRF adalah ancaman yang menargetkan user melalui browser — mitigasi harus di server dan client. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa typescript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. CSP adalah defense-in-depth — meski ada XSS vulnerability, CSP bisa mencegah script eksternal dieksekusi. SameSite=Strict cookie mencegah CSRF.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

typescript

// CSP Header dengan Hono
app.use('*', async (c, next) => {
  c.header('Content-Security-Policy',
    "default-src 'self'; " +
    "script-src 'self' 'unsafe-inline'; " +
    "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; " +
    "font-src 'self' https://fonts.gstatic.com; " +
    "img-src 'self' data: https://cdn.example.com; " +
    "connect-src 'self' https://api.example.com; " +
    "frame-ancestors 'none'; " +
    "base-uri 'self';"
  );
  c.header('X-Frame-Options', 'DENY');
  c.header('X-Content-Type-Options', 'nosniff');
  c.header('Referrer-Policy', 'strict-origin-when-cross-origin');
  await next();
});

// Sanitize HTML input dengan DOMPurify
import DOMPurify from 'isomorphic-dompurify';

const dirty = '<p>Hello</p><script>alert(1)</script>';
const clean = DOMPurify.sanitize(dirty);
// Result: '<p>Hello</p>' — script tag removed

// SameSite cookie untuk CSRF protection
Set-Cookie: session=abc123; HttpOnly; Secure; SameSite=Strict; Path=/

Penjelasan Kode

CSP adalah defense-in-depth — meski ada XSS vulnerability, CSP bisa mencegah script eksternal dieksekusi. SameSite=Strict cookie mencegah CSRF.

Prompt AI

Setup CSP di aplikasimu. Mulai dengan report-only mode untuk identify breaking changes sebelum enforce.

Pertanyaan Reflektif

Security headers (CSP, HSTS, X-Frame-Options) adalah gratis — tidak ada alasan untuk tidak mengimplementasikannya.