Satpam Kompleks: Belajar CORS dengan menjaga gerbang browser

Cara bermain Satpam Kompleks

1. Baca instruksi level. Tiap level menyebut bagian yang kamu ubah: request fetch di halaman, atau header respons server.
2. Tulis satu baris per opsi dengan format Nama: nilai. Untuk request, baris url, method, dan credentials adalah opsi fetch, baris lain jadi header.
3. Arena berubah setiap kamu mengetik: tabel origin menandai bagian yang beda, lalu tampil preflight, request utama, jawaban server, dan pesan console kalau satpam menahan respons.
4. Tekan Cek jawaban atau Ctrl + Enter. Jawaban dicek dari hasil simulasi: apakah JS bisa membaca respons, apakah preflight terjadi, dan status balasan server.
5. Kalau buntu, buka Petunjuk. Level yang sudah selesai tetap tercentang di browser yang sama.

Yang kamu pelajari

1. Level 1

   Origin

   Gabungan skema, host, dan port. https://toko.id dan https://toko.id:8443 adalah origin berbeda karena port bawaan https adalah 443.

2. Level 2

   Access-Control-Allow-Origin

   Header respons yang menyebut origin mana yang boleh membaca respons. Nilainya harus sama persis dengan origin halaman.

3. Level 3

   CORS ditegakkan browser

   Request cross-origin tetap sampai dan diproses server. Yang ditahan browser adalah izin JS halaman untuk membaca balasannya.

4. Level 4

   Satu nilai origin

   Access-Control-Allow-Origin hanya menerima satu origin atau *, bukan daftar. Server yang melayani banyak origin membaca header Origin lalu menjawab dengan origin itu.

5. Level 5

   Wildcard *

   Access-Control-Allow-Origin: * mengizinkan origin mana pun, cocok untuk API publik tanpa cookie.

6. Level 6

   Simple request vs preflight

   GET, HEAD, dan POST dengan header biasa langsung dikirim. Selain itu browser bertanya dulu lewat request OPTIONS yang disebut preflight.

7. Level 7

   Access-Control-Allow-Methods

   Jawaban preflight yang mengizinkan method seperti PUT dan DELETE.

8. Level 8

   Access-Control-Allow-Headers

   Jawaban preflight yang mengizinkan header khusus, termasuk Content-Type: application/json.

9. Level 9

   Authorization di luar *

   * di Access-Control-Allow-Headers mencakup semua header kecuali Authorization, jadi header itu harus disebut namanya.

10. Level 10

    credentials: include

    Opsi fetch yang membuat cookie ikut ke origin lain. Bawaannya same-origin, jadi cookie hanya ikut ke origin sendiri.

11. Level 11

    Access-Control-Allow-Credentials

    Request yang membawa cookie butuh Access-Control-Allow-Credentials: true dari server.

12. Level 12

    Wildcard dan cookie

    Bersama cookie, * di origin ditolak, dan * di method serta header dibaca sebagai teks biasa. Semua izin harus ditulis persis.

Satpam ada di browser, bukan di server

Saat halaman https://toko.id mengirim POST sederhana ke https://api.toko.id/pesanan, request itu sampai ke server dan pesanannya tercatat. Kalau server tidak mengirim Access-Control-Allow-Origin yang cocok, browser hanya menolak memberikan balasannya ke JS. Di console muncul error CORS, dan fetch melempar TypeError.

Karena itu CORS bukan pengaman server. curl atau backend lain tidak punya satpam ini dan bisa membaca respons apa pun. CORS melindungi pengguna: situs lain yang dibuka di browsermu tidak bisa diam-diam membaca data dari situs tempat kamu sedang masuk.

Preflight mengubah urutannya. Untuk PUT, DELETE, atau header seperti Content-Type: application/json, browser bertanya dulu lewat OPTIONS. Kalau jawabannya tidak mengizinkan, request utama tidak pernah dikirim.

Tanya jawab