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

Secure Cookies

Membaca HttpOnly, Secure, SameSite, Path, dan Max-Age sebagai attributes cookie yang dibentuk server untuk membatasi browser behavior.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan fungsi HttpOnly, Secure, SameSite, Path, dan Max-Age
Membedakan cookie configuration server dari JavaScript client setting
Membaca secure cookie header tanpa menyalin session value
Menentukan symptom frontend yang perlu dikonfirmasi ke server atau provider

CookiesHttpOnlySecureSameSiteSessions

Isi lesson

6 blok

1.
Cookie attributes membatasi behavior browserBelum selesaiWajib
2.
Header session cookie yang perlu dibaca, bukan dibuat browserBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Path bukan authorization dan cookie value bukan debug logBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Cookie attributes membatasi behavior browser

Wajib

HttpOnly mencegah JavaScript membaca cookie, sehingga session cookie tidak tersedia melalui document.cookie. Secure membuat browser mengirim cookie melalui HTTPS, dengan perlakuan khusus localhost pada browser. SameSite mengontrol kapan cookie dapat ikut pada cross-site request. Path dan Domain mengatur scope pengiriman; Max-Age atau Expires mengatur lifetime. Attributes ini dibentuk server melalui Set-Cookie dan perlu dipilih sesuai domain, deployment, provider, serta flow product.

Tidak ada satu configuration yang boleh ditempel ke semua project. SameSite=None membutuhkan Secure dan sering muncul pada kebutuhan cross-site tertentu; Lax atau Strict dapat berdampak pada navigation, callback, dan embedded flow. Jangan menghapus HttpOnly agar client bisa membaca session, atau menonaktifkan Secure untuk memperbaiki deployment. Pahami symptom, lalu cek contract provider dan environment.

Bagian ini memengaruhi progres lesson.

Header session cookie yang perlu dibaca, bukan dibuat browser

Wajib

bash

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

Nama dengan prefix __Host- dapat memberi pembatasan tambahan pada browser yang mendukungnya; server tetap perlu memeriksa nama serta session tersebut. HttpOnly tidak membuat cookie kebal terhadap semua risk, dan Path bukan access control. Anggap header sebagai contract browser-server yang perlu direview bersama provider docs, bukan string yang harus dibuat Client Component.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Read secure session cookie attributes

Susun representasi header session cookie untuk membaca attributes yang dibentuk server, bukan membuat cookie runtime di 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.

6 cek otomatis4 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Attribute mana yang mencegah JavaScript browser membaca session cookie?

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Wajib

Path bukan authorization dan cookie value bukan debug log

Path membatasi URL mana yang mengirim cookie, tetapi bukan perlindungan untuk mencegah script yang sama membaca cookie tanpa HttpOnly. Jangan paste session value ke issue, console, chat, screenshot, atau model answer. Catat hanya attribute, domain, path, expiry, request symptom, dan environment. Bila cookie tidak terkirim di production, periksa HTTPS, SameSite, origin, provider callback, serta response Set-Cookie bersama server owner.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

HttpOnly, Secure, SameSite, scope, dan expiry mengatur behavior cookie pada browser.
Server atau provider menetapkan session cookie melalui Set-Cookie.
Cookie attributes perlu dibaca bersama deployment dan auth contract.
Jangan melemahkan attributes atau membocorkan session value demi debugging cepat.
Berikutnya, checkpoint menyatukan diagnosis auth, cookie, CORS, CSRF, dan frontend-server boundary.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Cookie attributes membatasi behavior browser.

Memuat progres Review module