FluentStack

CSRF Basics

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 19: Security BasicsAdvanced60 menitBahasa Indonesia

CSRF Basics

Memahami mengapa mutation dengan cookie-based auth perlu defense server-side dan mengapa UI atau CORS bukan penggantinya.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menjelaskan CSRF sebagai risiko request authenticated yang tidak diinginkan
  • Mengenali mutation cookie-based yang perlu dibaca bersama CSRF contract
  • Membedakan browser UI, CORS, dan server-side CSRF defense
  • Menentukan evidence aman untuk melaporkan symptom mutation
CSRFCookiesMutationsServer BoundariesBrowser Security

Isi lesson

6 blok
  1. 1.
    Cookie dapat membuat request membawa identity tanpa UI yang kamu lihatBelum selesaiWajib
  2. 2.
    Peta responsibility pada profile mutationBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Report symptom, bukan mengarang defenseBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Cookie dapat membuat request membawa identity tanpa UI yang kamu lihat

Wajib

CSRF atau Cross-Site Request Forgery adalah risiko ketika browser dapat membawa credential user pada request yang tidak dimaksudkan oleh UI aplikasi. Ini terutama perlu dipikirkan pada action yang mengubah data dan memakai cookie-based authentication, misalnya memperbarui profile, membuat payment preference, atau menghapus resource. User mungkin sudah authenticated, tetapi server tetap perlu memeriksa apakah mutation memenuhi CSRF defense sesuai architecture.

Frontend tidak membuat CSRF defense sendiri dengan menyembunyikan button, menambah conditional rendering, atau berharap CORS memblokir semuanya. Frontend mengikuti request contract yang disediakan server/provider, menampilkan pending/success/error state, dan mengumpulkan evidence aman ketika mutation ditolak. Detail defense bergantung deployment dan auth provider; module ini tidak meminta kamu membuat token, mematikan cookie protection, atau mencoba request lintas situs.

Bagian ini memengaruhi progres lesson.

Peta responsibility pada profile mutation

Wajib
ts
const profileMutationBoundary = {
  auth: "cookie session",
  frontend: "send approved app action and show result",
  server: "validate authorization and CSRF defense",
  evidence: "endpoint, method, status, environment, and safe UI symptom",
};

Object ini memisahkan peran, bukan membangun security mechanism. Browser dapat mengirim action dari UI aplikasi sesuai contract. Server tetap memverifikasi authorization dan CSRF defense sebelum mutation diproses. Jika UI mendapat error, report endpoint, method, status atau error category, environment, dan symptom tanpa membagikan cookie value, token, atau credential.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Explain course CSRF mutation boundary

Petakan browser role dan server-side defense pada mutation profile cookie-based tanpa membuat token atau request runtime.

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

Mana tindakan yang tepat untuk mutation dengan cookie session?

Progres lesson naik setelah jawaban benar.

Catatan penting

Wajib

Report symptom, bukan mengarang defense

Jika mutation ditolak, jangan menambahkan workaround credential di client. Catat action user, endpoint, method, status atau error category, apakah session terlihat aktif, environment, dan UI recovery yang tampil. Lalu libatkan owner auth/backend untuk membaca CSRF contract. Hindari menulis token, cookie value, password, atau request replay di issue.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • CSRF berkaitan dengan request authenticated yang tidak diinginkan, terutama pada mutation cookie-based.
  • Server/provider menegakkan authorization dan CSRF defense; frontend mengikuti contract serta memberi UI recovery.
  • Menyembunyikan button atau memakai CORS tidak menggantikan server defense.
  • Evidence aman berisi context request dan symptom UI, bukan credential.
  • Berikutnya, kita membedakan CORS browser policy dari permission dan authorization.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Cookie dapat membuat request membawa identity tanpa UI yang kamu lihat.

Memuat progresReview module