Advanced · Level 18: Backend Basics for Frontend EngineersAdvanced60 menitBahasa Indonesia

CSRF

Memahami CSRF sebagai risiko unwanted authenticated request pada flow cookie-based, lalu mengenali boundary frontend dan server yang benar.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan mengapa cookie dapat ikut pada request tanpa UI app utama
Membedakan CSRF dari CORS dan XSS pada level konsep
Menjelaskan SameSite serta server-validated CSRF defense sebagai defense in depth
Menghindari pemindahan secret atau security enforcement ke Client Component

CSRFCookiesSameSiteAuthenticationSecurity Boundaries

Isi lesson

6 blok

1.
CSRF memanfaatkan request yang tampak sudah terautentikasiBelum selesaiWajib
2.
Catat boundary request state-changingBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Jangan implementasi defense dari potongan snippet tanpa contractBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

CSRF memanfaatkan request yang tampak sudah terautentikasi

Wajib

Pada cookie-based auth, browser dapat mengirim cookie session ke domain yang sesuai ketika request memenuhi aturan cookie. CSRF adalah risiko ketika site lain memicu request state-changing ke aplikasi target dan browser membawa credential user tanpa aplikasi target benar-benar meminta action itu. Ini bukan berarti setiap cookie flow rentan atau setiap POST harus ditolak. Server perlu memilih defense sesuai architecture, termasuk SameSite policy dan server-side request validation seperti CSRF token atau origin checks bila relevan.

Frontend perlu memahami symptom dan boundary. Jangan menaruh session secret atau token validasi rahasia di source code. Jangan menganggap CORS menutup semua CSRF risk; CORS terutama membatasi pembacaan response oleh script, sedangkan CSRF berkaitan dengan unwanted request yang membawa credential. Untuk action sensitif, UI juga dapat membantu dengan confirmation serta re-authentication flow, tetapi server tetap memvalidasi request.

Bagian ini memengaruhi progres lesson.

Catat boundary request state-changing

Wajib

const noteMutationBoundary = {
  method: "POST",
  authMechanism: "cookie session",
  requestIntent: "create course note",
  serverDefense: "validate SameSite policy and CSRF protection",
  browserRole: "send approved app request and show result",
};

Object ini bukan implementation security. Ia membantu melihat pemisahan tanggung jawab: app frontend mengirim action user melalui contract yang sah dan menampilkan result; server memeriksa identity, authorization, dan defense request sesuai architecture. Token anti-CSRF bila dipakai dibuat serta divalidasi server-side atau provider mechanism, bukan string yang dibuat secara acak di Client Component.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Describe course note CSRF boundary

Nyatakan boundary mutation cookie-based tanpa membuat token palsu atau memindahkan validation server ke browser.

Tujuan awal: Fokus di tab TS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

4 cek otomatis4 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Mengapa CORS tidak boleh dianggap sebagai satu-satunya defense CSRF?

Progres lesson naik setelah jawaban benar.

Peringatan

Wajib

Jangan implementasi defense dari potongan snippet tanpa contract

CSRF defense bergantung pada apakah app memakai cookie session, token bearer, domain terpisah, framework protection, atau provider auth. Jangan menyalin token ke localStorage atau menonaktifkan SameSite hanya agar request lokal cepat bekerja. Catat deployment origin, request method, cookie attributes, dan provider guidance; eskalasi ke backend atau security owner bila contract tidak jelas.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

CSRF adalah risiko unwanted authenticated request, terutama pada credential cookie flow.
CORS dan CSRF adalah konsep berbeda walau sama-sama menyentuh browser boundary.
SameSite dan server-validated defense bekerja sebagai defense in depth.
Frontend tidak menyimpan secret atau menggantikan request validation server.
Berikutnya, kita membaca attribute cookie yang membantu membatasi access, transport, scope, dan lifetime.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: CSRF memanfaatkan request yang tampak sudah terautentikasi.

Memuat progres Review module