Membuat REST API Kebal Injeksi di Next.js & Prisma (Part 2)

Dalam dunia Cyber Security, lapisan basis data (database) bukanlah satu-satunya target eksploitasi. Jalur komunikasi data, atau yang sering kita sebut sebagai Application Programming Interface (API), sering kali menjadi titik buta (blind spot) yang mematikan. Laporan OWASP Top 10 secara konsisten menempatkan celah pada API—seperti Broken Object Level Authorization (BOLA) dan Injection—sebagai pintu masuk utama peretas.

Bagaimana jika kita ingin membangun jembatan pengantar data (REST API) untuk platform edukasi, seperti Learning Management System (LMS), yang kebal terhadap manipulasi payload kotor dari sisi klien?

Melanjutkan fondasi arsitektur yang telah kita rintis pada jurnal Part 1 sebelumnya, kali ini kita akan meracik REST API menggunakan arsitektur Route Handlers dari Next.js (App Router) yang dipadukan dengan Prisma ORM. Kita akan mempraktikkan cara membaca dan menambahkan data ke tabel grades (Kelas) dengan standar keamanan tinggi.

Mengapa REST API Next.js dan Prisma Lebih Aman?

• Sanitasi Eksekusi Otomatis: Saat menerima data untuk dimasukkan ke database, Prisma tidak menggunakan kueri SQL mentah. Semua data dilewatkan melalui Prepared Statements sehingga karakter berbahaya (seperti ' OR 1=1 --) akan dinetralkan secara otomatis.
• Isolasi Lingkungan Server: Kode API di Next.js murni berjalan di sisi server (Node.js). Algoritma validasi, koneksi database, dan kunci rahasia Anda tidak akan pernah bocor ke peramban (browser) pengguna.
• Manajemen Error yang Kedap: Arsitektur Try-Catch memungkinkan kita menangkap kegagalan sistem (seperti crash tipe data) dan hanya mengembalikan pesan generik ke publik, mencegah terjadinya Information Disclosure (kebocoran struktur database melalui log error).

Tips Pro: Menarik Database Lama Tanpa Ketik Manual

Jika Anda sudah memiliki database MySQL lama di XAMPP, Anda tidak perlu mengetik ulang strukturnya di Prisma dari nol! Gunakan perintah ajaib ini di terminal VS Code:

npx prisma db pull
npx prisma generate

Prisma akan melakukan Introspection dan menyedot seluruh tabel yang ada (seperti tabel grades, users, dll) langsung ke dalam file schema.prisma Anda secara otomatis. Sangat efisien!

Langkah Praktis: Membangun Route API yang Aman

Aturan emas dalam keamanan API adalah: "Jangan Pernah Percaya Input Pengguna". Mari kita buat sebuah endpoint untuk menambahkan data (Create) Kelas baru secara aman.

1. Membuat Route POST dan GET di Next.js

Buka proyek VS Code Anda, buat struktur folder app/api/kelas, dan buat file baru bernama route.ts. Kita akan menyusun fungsi pembacaan dan penambahan data di dalamnya. Tambahkan kode berikut ini:

import { NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

// Fungsi GET: Mengambil data kelas
export async function GET() {
  try {
    const dataKelas = await prisma.grades.findMany({
      orderBy: { sort_order: 'asc' }
    });
    return NextResponse.json({ status: 'success', data: dataKelas });
  } catch (error) {
    return NextResponse.json({ status: 'error', message: 'Internal Server Error' }, { status: 500 });
  }
}

// Fungsi POST: Menambahkan Data Baru dengan Aman
export async function POST(request: Request) {
  try {
    // 1. Menangkap data dari request body (Frontend)
    const body = await request.json();
    const { name, sort_order } = body;

    // 2. Validasi Lapis Pertama (Mencegah Payload Kosong/Berbahaya)
    if (!name) {
      return NextResponse.json(
        { status: 'error', message: 'Nama kelas wajib diisi!' },
        { status: 400 } // Bad Request
      );
    }

    // 3. Eksekusi ke Database via Prisma (Otomatis Sanitasi SQL Injection)
    const kelasBaru = await prisma.grades.create({
      data: {
        name: name,
        sort_order: sort_order || 0,
      },
    });

    // 4. Mencegah Error Serialisasi JSON pada tipe data BigInt
    const dataAman = {
      ...kelasBaru,
      id: kelasBaru.id.toString(), 
    };

    // 5. Mengembalikan respon sukses
    return NextResponse.json({
      status: 'success',
      message: 'Kelas berhasil ditambahkan dengan aman!',
      data: dataAman
    }, { status: 201 }); // Created

  } catch (error) {
    console.error("API Error:", error);
    return NextResponse.json(
      { status: 'error', message: 'Gagal menambahkan data. Terjadi kesalahan server.' },
      { status: 500 }
    );
  }
}

Membedah Lapisan Keamanan pada Kode di Atas

Jika Anda perhatikan, kode API tersebut tidak hanya sekadar berfungsi, tetapi dirancang dengan prinsip Defensive Programming:

• Validasi Input (Poin 2): Kita mengecek apakah variabel name benar-benar ada. Jika peretas mencoba mengirim payload kosong untuk membuat server crash, sistem akan menolaknya dengan status 400 Bad Request.
• Sanitasi Prisma (Poin 3): Dengan prisma.grades.create, semua input yang mengandung karakter berbahaya akan dinetralkan secara otomatis.
• Penanganan BigInt (Poin 4): Pada database skala besar (seperti LMS), ID sering kali menggunakan format BIGINT. Format standar JSON akan crash (menghasilkan Error 500) jika dipaksa membaca BigInt. Mengubahnya menjadi string menggunakan .toString() adalah teknik pengamanan operasional yang wajib diketahui.
• Manajemen Error Terisolasi: Jika terjadi kegagalan (misalnya nama kelas sudah ada), blok catch akan menyembunyikan detail log internal dari peretas dan hanya menampilkan pesan umum.

Cara Menguji API dengan Aman (Menggunakan Thunder Client)

Karena fungsi POST tidak bisa dijalankan hanya dengan mengetik URL di browser, kita membutuhkan alat khusus (API Client) seperti ekstensi Thunder Client di VS Code.

1. Buka Thunder Client di VS Code Anda.
2. Buat New Request, ubah metode dari GET menjadi POST.
3. Masukkan URL lokal Anda: http://localhost:3000/api/kelas.
4. Masuk ke tab Body, pilih JSON, lalu masukkan payload pengujian berikut:

{
  "name": "Kelas 14",
  "sort_order": 3
}

Klik Send. Jika berhasil, Anda akan mendapatkan respon sukses dengan status 201 Created berwarna hijau. Data tersebut secara otomatis sudah masuk ke dalam database MySQL Anda!

Kesimpulan

Membangun REST API yang aman adalah tulang punggung dari arsitektur aplikasi modern. Dengan Next.js App Router dan Prisma ORM, kita bisa memangkas ribuan baris kode validasi manual, mengelola tipe data kompleks (seperti BigInt) secara elegan, sekaligus memastikan sistem kebal terhadap manipulasi kueri tingkat dasar.

Pada jurnal Part 3 selanjutnya, kita akan merajut tampilan antarmuka (Frontend) menggunakan React untuk menampilkan data kelas ini secara interaktif dan aman. Tetap pantau Cyber Journal!

Share this post