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

Cookies

Memahami cookie sebagai data browser-managed yang dapat dibawa pada request sesuai scope dan attributes, lalu melakukan inspeksi DevTools secara jujur.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan cookie dan Set-Cookie dari sudut browser request
Membedakan cookie session dari storage UI umum
Membaca name, domain, path, expiry, Secure, HttpOnly, dan SameSite di DevTools
Mencatat symptom cookie tanpa membagikan value atau session identifier

CookiesSessionsBrowser DevToolsHTTP

Isi lesson

4 blok

1.
Cookie adalah state yang dikelola browser untuk requestBelum selesaiWajib
2.
Response server dapat menetapkan cookie sessionBelum selesaiWajib
3.
Writing practiceBelum selesaiWajib
4.
RingkasanBelum selesaiWajib

Cookie adalah state yang dikelola browser untuk request

Wajib

Cookie adalah data kecil yang server kirim ke browser melalui Set-Cookie. Browser dapat menyimpannya lalu mengirimkannya kembali ke server pada request yang scope-nya cocok. Pola ini sering dipakai untuk session: server menyimpan atau memverifikasi session, browser membawa identifier sesuai rules cookie, dan server tetap memeriksa apakah session itu valid. Cookie bukan tempat frontend menaruh password, secret, atau data profile lengkap.

Karena cookie dapat ikut pada request, ia berbeda dari localStorage untuk preference UI. Cookies juga memiliki scope domain, path, expiry, dan attributes security. Bila login terlihat berhasil tetapi request berikutnya signed out, jangan langsung menulis workaround di client. Periksa response login, request setelahnya, cookie attributes, origin, dan server logs sesuai akses team.

Bagian ini memengaruhi progres lesson.

Response server dapat menetapkan cookie session

Wajib

bash

HTTP/1.1 200 OK
Set-Cookie: __Host-session=opaque-session-id; Path=/; Secure; HttpOnly; SameSite=Lax; Max-Age=3600

Server mengirim Set-Cookie; browser yang menyimpan dan mengirim cookie sesuai scope. HttpOnly berarti JavaScript tidak dapat membaca value cookie. Secure membatasi pengiriman ke HTTPS, kecuali perlakuan localhost tertentu browser. SameSite mengontrol kapan cookie dikirim pada cross-site request. Contoh ini menjelaskan attribute, bukan recipe universal; provider dan deployment topology menentukan contract yang tepat.

Bagian ini memengaruhi progres lesson.

Writing practice

Wajib

Latihan menulis

Pada local app atau browser profile aman, buka DevTools Application/Storage dan Network. Periksa satu cookie tanpa menyalin value-nya. Tulis nama non-sensitif atau kategori cookie, domain/path, apakah HttpOnly/Secure/SameSite terlihat, request mana yang menetapkannya atau memakai session, symptom UI yang kamu cek, serta blocker bila tidak ada auth setup. Jangan menulis token, session ID, password, atau screenshot value cookie.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/400 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Tidak menyalin value credential atau session.
Menyebut scope atau attributes yang benar-benar terlihat.
Menghubungkan cookie dengan request atau symptom UI.
Mencatat blocker secara spesifik bila belum ada setup auth.

Blok ini wajib untuk menyelesaikan lesson.

Ringkasan

Wajib

Server menetapkan cookie melalui Set-Cookie; browser mengirimnya kembali sesuai rules.
Cookie session bukan tempat menyimpan password atau seluruh profile user.
DevTools dapat membantu memeriksa attributes dan request tanpa menyalin value sensitif.
Cookie issue perlu dibedakan dari auth, authorization, CORS, atau UI state issue.
Berikutnya, kita membandingkan mental model JWT dan session tanpa memilih salah satunya secara dogmatis.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Cookie adalah state yang dikelola browser untuk request.

Memuat progres Review module