Mencegah Parameter Tampering pada Fitur Edit Next.js (Part 8)

Dalam dunia Cyber Security, mengamankan fitur penambahan data (POST) dan penghapusan data (DELETE) hanyalah dua pertiga dari medan pertempuran. Celah keamanan yang tak kalah mematikan sering kali bersembunyi pada fitur pembaruan data (Update). Serangan ini dikenal dengan nama Parameter Tampering atau ID Spoofing.

Bagaimana jika dalam platform Learning Management System (LMS) Anda, seorang peretas mengklik tombol "Edit" pada sebuah kelas, lalu mencegat transmisi datanya menggunakan tools proksi, dan secara diam-diam mengubah ID kelas di latar belakang untuk memodifikasi kelas VIP yang sebenarnya tidak boleh mereka akses?

Melanjutkan jurnal Part 7 (Taktik Soft Delete), kali ini kita akan merancang sistem Edit Data (metode PUT) yang kebal terhadap manipulasi. Dengan memanfaatkan ekosistem Next.js (App Router) dan Prisma ORM, kita akan mengunci parameter agar tidak bisa dipalsukan oleh entitas tak bertanggung jawab.

Mengapa Arsitektur Edit Next.js dan Prisma Lebih Aman?

• Isolasi Payload (Payload Filtering): Prisma ORM memungkinkan kita untuk menentukan secara spesifik kolom mana saja yang boleh diperbarui (Allow-list). Jika peretas mencoba menyusupkan pembaruan pada kolom sensitif seperti id atau deletedAt, sistem akan secara otomatis mengabaikannya.
• Validasi Tipe Data Ketat (Type Safety): Kombinasi TypeScript dan Prisma memastikan bahwa parameter ID yang diterima benar-benar berbentuk angka (BigInt/Number). Modifikasi ID menggunakan karakter string atau skrip SQL akan membuat server menolak eksekusi sejak awal.
• Verifikasi Otorisasi Berlapis (Double-Check Auth): Sama seperti operasi penghapusan, fitur edit mewajibkan pembacaan sesi token JWT dari sisi server sebelum menyentuh database, menutup peluang manipulasi melalui API pihak ketiga.

---

Langkah Praktis: Membangun Route API Edit yang Kebal Manipulasi

1. Merancang Endpoint PUT (Update)

Dalam arsitektur REST API standar, operasi pembaruan data menggunakan metode PUT atau PATCH. Buka file app/api/kelas/route.ts Anda, lalu tambahkan fungsi PUT di bagian bawah kode yang sudah ada.

Perhatikan bagaimana kita menyaring data yang masuk secara ketat:

import { getServerSession } from "next-auth/next";
import { NextResponse } from 'next/server';

export async function PUT(request: Request) {
  try {
    // 1. OTORISASI: Pastikan hanya Guru atau Admin yang bisa mengedit
    const session = await getServerSession();
    if (!session || (session.user as any).role === '3') {
      return NextResponse.json({ status: 'error', message: '403 Forbidden: Akses ditolak.' }, { status: 403 });
    }

    // 2. Menerima Payload dari Klien
    const body = await request.json();
    const { id, name, sort_order } = body;

    // 3. VALIDASI PARAMETER TAMPERING: Tolak jika ID kosong atau tidak valid
    if (!id || isNaN(Number(id))) {
      return NextResponse.json(
        { status: 'error', message: 'Parameter ID tidak valid atau telah dimanipulasi.' },
        { status: 400 }
      );
    }

    // 4. FILTERING KOLOM (Allow-list): Hanya izinkan pembaruan nama dan urutan
    const kelasDiperbarui = await prisma.grades.update({
      where: { 
        id: Number(id) // Konversi paksa ke angka untuk mencegah injeksi
      },
      data: {
        name: name,
        sort_order: Number(sort_order),
      },
    });

    // 5. Penanganan aman untuk BigInt sebelum dilempar ke JSON
    const dataAman = {
      ...kelasDiperbarui,
      id: kelasDiperbarui.id.toString(),
    };

    return NextResponse.json({
      status: 'success',
      message: 'Integritas data kelas berhasil diperbarui.',
      data: dataAman
    }, { status: 200 });

  } catch (error) {
    console.error("API Update Error:", error);
    // Jika peretas mengirim ID fiktif yang tidak ada di database, Prisma akan melempar error.
    // Kita samarkan pesannya agar tidak membocorkan struktur database.
    return NextResponse.json(
      { status: 'error', message: 'Gagal memperbarui data. Entitas tidak ditemukan atau terjadi anomali.' },
      { status: 500 }
    );
  }
}

2. Menguji Keamanan dengan Payload Palsu

Sekali lagi, jangan pernah menguji API hanya melalui Frontend. Gunakan Thunder Client di VS Code untuk mensimulasikan serangan Parameter Tampering.

1. Buat New Request dan pilih metode PUT ke http://localhost:3000/api/kelas.
2. Di tab Body (JSON), cobalah kirim ID berupa huruf (bukan angka):

{
  "id": "INJEKSI_ID_JAHAT",
  "name": "Kelas Hacked",
  "sort_order": 99
}

Klik Send. Jika arsitektur keamanan kita berjalan sempurna, server tidak akan mengalami crash, melainkan dengan tenang menolak permintaan tersebut dan mengembalikan status 400 Bad Request dengan pesan "Parameter ID tidak valid".

Kesimpulan

Praktik Secure Coding mengajarkan kita untuk membangun pertahanan dari asumsi terburuk. Dengan menerapkan tipe data statis, mengisolasi payload pada kolom yang diizinkan, dan melakukan konversi tipe data secara paksa, kita berhasil menetralkan salah satu vektor serangan manipulasi data (Parameter Tampering) yang paling sering menjatuhkan sistem web konvensional.

Kini mesin REST API (Backend) Anda telah memiliki siklus CRUD (Create, Read, Update, Delete) yang tertutup rapat bak brankas. Pada Cyber Journal Part 9 selanjutnya, kita akan membahas cara merekam setiap aktivitas (Audit Trail) agar pergerakan siapa pun di dalam sistem LMS Anda tidak ada yang luput dari pantauan.

Share this post