API, Autentikasi, dan Keamanan · 5/7

Authorization: siapa boleh melakukan apa

Authentication itu siapa kamu. Authorization itu apa yang boleh kamu sentuh — dan harus diperiksa di server, setiap kali.

Baca 28 menit

Setelah pelajaran ini kamu bisa

Membedakan authentication dari authorization
Memeriksa kepemilikan, bukan cuma identitas
Mengenali IDOR saat code review
Menjelaskan kenapa menyembunyikan tombol bukan pemeriksaan izin

Authentication itu *kamu siapa*. Authorization itu *kamu boleh menyentuh apa*. Keduanya pertanyaan berbeda, gagal dengan cara berbeda, dan mencampuradukkannya adalah bug serius paling umum di aplikasi web.

Authorization punya dua lapis, dan hanya memeriksa yang pertama itulah tempat masalahnya muncul.

Role — apakah seorang *lead* boleh melakukan ini sama sekali? Kasar, mudah, biasanya diingat.
Kepemilikan — apakah record *tertentu* ini miliknya? Halus, dan inilah yang sering terlupakan.

IDOR

IDOR — insecure direct object reference — adalah apa yang kamu dapat saat kamu memeriksa seseorang sudah masuk, lalu bertindak atas id apa pun yang mereka kirim. Ini tidak butuh alat: cukup ubah satu angka di URL.

Coba sendiri

Tiga handler, satu penyerang yang mengubah sebuah id. Hanya yang ketiga bertahan.

const bookings = [
  { id: 1, userId: 7, guest: "Ana", card: "**** 4242" },
  { id: 2, userId: 7, guest: "Ana", card: "**** 4242" },
  { id: 3, userId: 99, guest: "Someone else", card: "**** 1881" },
];

// ❌ authenticated only: signed in, so anything goes.
function getBookingA(session, bookingId) {
  if (!session) return "401 unauthenticated";
  return bookings.find((b) => b.id === bookingId) ?? "404";
}

// ❌ trusts a userId sent by the caller.
function getBookingB(session, bookingId, userId) {
  if (!session) return "401 unauthenticated";
  return bookings.find((b) => b.id === bookingId && b.userId === userId) ?? "404";
}

// ✅ identity from the session, ownership checked against it.
function getBookingC(session, bookingId) {
  if (!session) return "401 unauthenticated";
  const booking = bookings.find((b) => b.id === bookingId);
  if (!booking) return "404";
  // Return 404, not 403 - do not confirm that someone else's booking exists.
  if (booking.userId !== session.userId) return "404";
  return booking;
}

const attacker = { userId: 7 };     // legitimately signed in as user 7

console.log("attacker asks for their OWN booking 1:");
console.log("   A:", JSON.stringify(getBookingA(attacker, 1)));
console.log("   C:", JSON.stringify(getBookingC(attacker, 1)));

console.log("");
console.log("attacker changes the id to 3 (belongs to user 99):");
console.log("   A:", JSON.stringify(getBookingA(attacker, 3)));
console.log("      ^ another customer's card details, from changing one digit");
console.log("   B:", JSON.stringify(getBookingB(attacker, 3, 99)));
console.log("      ^ they just sent userId=99 as well. Trusting input is not a check.");
console.log("   C:", JSON.stringify(getBookingC(attacker, 3)));
console.log("      ^ the session decided who they are, so the id is powerless.");

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Di mana pemeriksaannya harus berada

Taruh pemeriksaannya di tempat datanya disentuh. Apa pun yang lebih awal dari itu adalah optimasi yang bisa dilewati.

Lapisan	Apakah ini kontrol keamanan?
Menyembunyikan tombolnya di UI	Tidak. Cuma kosmetik.
Pemeriksaan di proxy	Tidak. Ia melewati `/api`, dan action dijangkau POST langsung.
Pemeriksaan di component halaman	Ya, untuk rendering halaman itu
Pemeriksaan di dalam Server Action	Ya. Inilah yang sebenarnya.
Pemeriksaan di dalam Route Handler	Ya.
Constraint di database	Ya — garis pertahanan terakhir

Coba sendiri

Matriks izin, cara menjaga aturan role tetap terbaca begitu jumlahnya lebih dari dua.

// Roles to the actions they may perform. One place to read, one place to change.
const PERMISSIONS = {
  lead:    ["lesson:read", "lesson:write", "progress:read:any", "user:invite"],
  learner: ["lesson:read", "progress:read:own"],
  guest:   ["lesson:read"],
};

function can(role, action) {
  return (PERMISSIONS[role] ?? []).includes(action);
}

// Role permission plus ownership, which is the pair you always need.
function canReadProgress(session, targetUserId) {
  if (!session) return false;
  if (can(session.role, "progress:read:any")) return true;
  return can(session.role, "progress:read:own") && session.userId === targetUserId;
}

const lead = { userId: 1, role: "lead" };
const junior = { userId: 2, role: "learner" };

console.log("action permissions:");
for (const role of ["lead", "learner", "guest"]) {
  for (const action of ["lesson:write", "user:invite"]) {
    console.log("   " + role.padEnd(9) + action.padEnd(14) + can(role, action));
  }
}

console.log("");
console.log("reading progress:");
console.log("   lead   -> own (1):    ", canReadProgress(lead, 1));
console.log("   lead   -> junior (2): ", canReadProgress(lead, 2), " (leads may see the team)");
console.log("   junior -> own (2):    ", canReadProgress(junior, 2));
console.log("   junior -> lead (1):   ", canReadProgress(junior, 1), " (blocked by ownership)");
console.log("   nobody -> own (2):    ", canReadProgress(null, 2));

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Tugas praktik

Di proyek ini, daftarkan dua akun. Yang pertama jadi lead. Masuk sebagai yang kedua (learner) lalu buka /id/dashboard — kamu seharusnya melihat progresmu sendiri tapi tanpa tabel tim. Sekarang temukan pemeriksaan di app/[lang]/dashboard/page.tsx yang memutuskan ini, dan pastikan ia terjadi di server alih-alih dengan menyembunyikan markup.

Hasil yang diharapkan

`listUsers()` tidak pernah dipanggil untuk learner, jadi datanya tidak pernah sampai ke browser.

Cek pemahaman

Sebuah action menerima (userId, bookingId) dan memeriksa booking-nya milik userId itu. Apakah itu pemeriksaan kepemilikan yang sah?

Ya — ia membandingkan pemilik booking-nya dengan user-nyaTidak — identitas harus datang dari session, jangan pernah dari sebuah argumentTidak masalah selama UI-nya hanya menampilkan tombolnya ke pemiliknya

Pilih jawaban dulu