Membangun Full-Stack Web yang Aman dengan Next.js & Prisma

Dalam dunia Cyber Security, celah keamanan paling sering ditemukan pada aplikasi berbasis web. Serangan seperti SQL Injection (SQLi) dan Cross-Site Scripting (XSS) masih menjadi ancaman utama yang membayangi para developer.

Bagaimana jika kita ingin membangun sebuah platform edukasi, seperti Learning Management System (LMS), yang tidak hanya cepat namun juga kebal terhadap serangan-serangan dasar tersebut sejak hari pertama ditulis?

Meninggalkan arsitektur tradisional dan beralih ke Next.js (App Router) yang dipadukan dengan Prisma ORM adalah salah satu langkah mitigasi terbaik. Kombinasi Full-Stack ini menawarkan lapisan keamanan bawaan (built-in security) yang sangat kuat. Mari kita bedah cara membangun fondasi web yang aman dari nol.

Mengapa Next.js dan Prisma Lebih Aman?

• Anti SQL Injection: Prisma ORM menggunakan Prepared Statements secara default. Setiap input user akan disanitasi otomatis, sehingga query jahat tidak akan dieksekusi oleh database.
• Anti XSS (Cross-Site Scripting): Next.js menggunakan React di bawah kapnya, yang secara otomatis melakukan escaping pada string yang dirender. Jika ada script jahat yang masuk, itu hanya akan ditampilkan sebagai teks biasa, bukan dieksekusi sebagai kode.
• Menyembunyikan Kredensial: Dengan Server Components dan Route Handlers, koneksi database dan API Key Anda murni berjalan di sisi server. Hacker tidak bisa melihat rahasia ini melalui Inspect Element di browser.

---

Persiapan Alat (Tools) Development di Windows

Sebelum mulai meracik kode yang aman, pastikan laptop Anda sudah dipersenjatai dengan perangkat lunak berikut:

• Node.js (LTS): Unduh versi LTS dari situs resminya. Ini adalah fondasi utama untuk menjalankan ekosistem JavaScript modern di komputer Anda.
• Laragon (Database Lokal): Lingkungan server lokal yang terisolasi dan sangat ringan. Kita akan menggunakan ini untuk menjalankan MySQL secara aman di Windows tanpa membebani RAM.
• Visual Studio Code (VS Code): Teks editor standar industri. Sangat disarankan untuk menginstal ekstensi Prisma di VS Code agar penulisan skema database lebih mudah.
• Terminal (Git Bash / PowerShell): Command line interface untuk mengeksekusi perintah instalasi dan menjalankan server lokal.

---

Langkah Praktis: Membangun Fondasi Web yang Aman

1. Inisialisasi Proyek Next.js

Buka terminal Anda, lalu jalankan perintah ini untuk membuat proyek dengan standar keamanan modern:

npx create-next-app@latest web-edukasi-aman

Pilih Yes untuk TypeScript dan App Router. TypeScript menambahkan lapisan keamanan ekstra dengan memastikan tipe data yang masuk selalu valid (mencegah Type Confusion vulnerability).

cd web-edukasi-aman

2. Memasang Prisma ORM (Pelindung Database)

Alih-alih menulis sintaks SQL mentah yang rawan injeksi, kita gunakan Prisma:

npm install prisma --save-dev
npx prisma init

Buka file .env. Pastikan file ini TIDAK PERNAH di-upload ke GitHub atau repositori publik Anda (pastikan .env ada di dalam file .gitignore).

DATABASE_URL="mysql://root:@localhost:3306/db_edukasi"

3. Merancang Skema Database yang Ketat

Buka file prisma/schema.prisma. Kita buat contoh tabel untuk menyimpan data modul pembelajaran.

model Modul {
  id          Int      @id @default(autoincrement())
  judul       String   @db.VarChar(255) // Membatasi panjang karakter
  konten      String   @db.Text
  createdAt   DateTime @default(now())
}

Sinkronisasikan ke database:

npx prisma db push

4. Membuat Backend API Terisolasi

Kita buat endpoint API di dalam folder app/api/modul/route.ts. Karena berjalan di server Next.js, endpoint ini menyembunyikan logika interaksi database dari jangkauan publik.

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

const prisma = new PrismaClient();

export async function GET() {
  try {
    // Prisma otomatis menangani sanitasi data
    const dataModul = await prisma.modul.findMany();
    return NextResponse.json({ status: 'success', data: dataModul });
  } catch (error) {
    return NextResponse.json({ status: 'error', message: 'Internal Server Error' }, { status: 500 });
  }
}

5. Menampilkan Data dengan Server Components

Buka file app/page.tsx. Kita akan me-render data langsung di server. Keuntungannya? Selain SEO meningkat drastis, kita menutup celah modifikasi data melalui manipulasi Client-Side.

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function HomePage() {
  const dataModul = await prisma.modul.findMany();

  return (
    <main style="padding: 20px; max-width: 800px; margin: 0 auto;">
      <h1>Platform Edukasi Aman</h1>
      <div style="margin-top: 20px;">
        {dataModul.map((modul) => (
          <div key={modul.id} style="border: 1px solid #ccc; padding: 15px; margin-bottom: 10px;">
            <h3>{modul.judul}</h3>
            {/* React otomatis melakukan escape pada teks ini, mencegah XSS */}
            <p>{modul.konten}</p>
          </div>
        ))}
      </div>
    </main>
  );
}

Kesimpulan

Keamanan web (Web Security) tidak hanya tentang memasang firewall atau antivirus. Keamanan yang sesungguhnya dimulai dari arsitektur kode yang kita pilih. Dengan beralih ke Next.js dan Prisma, kita mendelegasikan tugas berat sanitasi input dan proteksi data ke sistem yang sudah teruji, sehingga kita bisa fokus mengembangkan fitur tanpa rasa was-was.

Pelajari Teknik Eksploitasi untuk Mitigasi:

• Memahami Cara Kerja Serangan SQL Injection
• Bahaya Cross-Site Scripting (XSS) pada Web

Share this post