Membangun Antarmuka (Frontend) Web Aman dengan Next.js & React (Part 3)

Dalam dunia Cyber Security, celah keamanan tidak hanya berpusat pada backend atau kebocoran database. Serangan yang menargetkan antarmuka pengguna (Frontend), seperti injeksi Cross-Site Scripting (XSS) melalui form input atau manipulasi elemen visual, justru sering menjadi pintu masuk utama peretas untuk membajak sesi pengguna.

Bagaimana jika kita ingin merancang antarmuka (Frontend) interaktif untuk platform edukasi, seperti Learning Management System (LMS), yang tidak hanya responsif namun juga kebal terhadap manipulasi skrip jahat sejak hari pertama ditulis?

Meninggalkan form HTML tradisional dan beralih ke arsitektur Client Components dari Next.js yang dipadukan dengan React adalah salah satu langkah mitigasi terbaik. Kombinasi Frontend ini menawarkan lapisan proteksi bawaan (built-in security) yang sangat kuat. Mari kita bedah cara merajut antarmukanya.

Mengapa Frontend Next.js dan React Lebih Aman?

• Anti XSS Bawaan: React secara otomatis melakukan escaping pada semua variabel atau data yang ditampilkan ke layar. Jika ada peretas yang menyusupkan skrip jahat ke dalam input kelas, skrip tersebut hanya akan tampil sebagai teks mati, bukan dieksekusi sebagai kode oleh browser.
• Transmisi Asynchronous (Tanpa Reload): Berbeda dengan form web tradisional yang mengekspos rute pada atribut action, React mengirim payload data secara senyap di latar belakang (melalui Fetch API). Ini menyembunyikan mekanisme pengiriman data dari mata-mata peretas.
• Isolasi Client dan Server: Dengan mendeklarasikan "use client", kita dengan tegas memisahkan komponen mana yang berinteraksi dengan browser, sehingga mencegah kebocoran data sensitif dari server ke area publik.

---

Langkah Praktis: Membangun Antarmuka Form yang Aman

1. Membuat Halaman Manajemen Kelas

Buka VS Code Anda. Di dalam folder app, buatlah direktori baru bernama kelas. Kemudian, di dalam folder kelas tersebut, buat file baru bernama page.tsx. (Jalurnya menjadi: app/kelas/page.tsx).

2. Menulis Kode React (Frontend)

Copy dan paste kode di bawah ini ke dalam file page.tsx. Kode ini sudah dilengkapi dengan sistem fetching data dari database dan penanganan form pengisian (Submit) yang sangat aman.

'use client';

import { useState, useEffect } from 'react';

export default function ManajemenKelas() {
  // State untuk menyimpan daftar kelas dari database
  const [daftarKelas, setDaftarKelas] = useState<any[]>([]);
  
  // State untuk menangani input form
  const [name, setName] = useState('');
  const [sortOrder, setSortOrder] = useState(0);
  const [pesan, setPesan] = useState('');

  // Menjalankan fungsi ambil data saat halaman pertama kali dirender
  useEffect(() => {
    fetchDataKelas();
  }, []);

  // FUNGSI GET: Mengambil data dari API backend kita
  const fetchDataKelas = async () => {
    try {
      const res = await fetch('/api/kelas');
      const result = await res.json();
      if (result.status === 'success') {
        setDaftarKelas(result.data);
      }
    } catch (error) {
      console.error("Gagal mengambil log data kelas", error);
    }
  };

  // FUNGSI POST: Mengirim data payload ke API secara aman
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault(); // Mencegah browser refresh saat tombol diklik
    setPesan('Menyimpan data ke server...');

    try {
      const res = await fetch('/api/kelas', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ 
          name: name, 
          sort_order: Number(sortOrder) 
        }),
      });

      const result = await res.json();

      if (res.ok) {
        setPesan('✅ ' + result.message);
        // Kosongkan form kembali
        setName('');
        setSortOrder(0);
        // Refresh daftar kelas secara otomatis (Real-time update)
        fetchDataKelas(); 
      } else {
        setPesan('❌ Operasi Gagal: ' + result.message);
      }
    } catch (error) {
      setPesan('❌ Terjadi anomali jaringan.');
    }
  };

  return (
    <div style={{ padding: '30px', maxWidth: '600px', margin: '0 auto', fontFamily: 'sans-serif' }}>
      <h1>Terminal Manajemen Kelas</h1>

      {/* FORM INPUT KELAS BARU */}
      <div style={{ background: '#f9f9f9', padding: '20px', borderRadius: '8px', marginBottom: '30px', border: '1px solid #e2e8f0' }}>
        <h3 style={{ marginTop: 0 }}>Tambah Entri Kelas</h3>
        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
          <input 
            type="text" 
            placeholder="Nama Kelas (Contoh: Kelas 10A)" 
            value={name}
            onChange={(e) => setName(e.target.value)}
            style={{ padding: '10px', borderRadius: '4px', border: '1px solid #cbd5e0' }}
            required
          />
          <input 
            type="number" 
            placeholder="Urutan (Sort Order)" 
            value={sortOrder}
            onChange={(e) => setSortOrder(Number(e.target.value))}
            style={{ padding: '10px', borderRadius: '4px', border: '1px solid #cbd5e0' }}
          />
          <button type="submit" style={{ padding: '12px', background: '#2b6cb0', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontWeight: 'bold' }}>
            Kirim Data
          </button>
        </form>
        {/* Tempat Menampilkan Status Respon */}
        {pesan && <p style={{ marginTop: '15px', fontWeight: 'bold', color: '#2d3748' }}>{pesan}</p>}
      </div>

      {/* DAFTAR KELAS DARI DATABASE */}
      <h3>Log Kelas Tersimpan</h3>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {daftarKelas.map((kelas) => (
          <li key={kelas.id} style={{ padding: '12px', borderBottom: '1px solid #edf2f7', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span><strong>{kelas.name}</strong></span>
            <span style={{ color: '#718096', fontSize: '0.9em' }}>Urutan: {kelas.sort_order}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

3. Uji Coba Transmisi Data

Sekarang, nyalakan kembali server lokal Next.js Anda melalui terminal VS Code dengan perintah npm run dev. Buka peramban (browser) dan navigasikan ke alamat: http://localhost:3000/kelas

Cobalah simulasikan input data kelas baru di dalam form, lalu klik "Kirim Data". Jika semua konfigurasi benar, Anda akan melihat notifikasi sukses dan daftar log di bagian bawah akan langsung tersinkronisasi secara otomatis tanpa refresh halaman!

Kesimpulan

Keamanan web (Web Security) tidak hanya tentang membangun tembok tebal di area database (Backend). Keamanan yang sesungguhnya memastikan bahwa antarmuka pengguna (Frontend) beroperasi di lingkungan yang terisolasi dan mentransmisikan data secara tertutup. Dengan menggunakan Next.js dan React, kita telah menciptakan form yang interaktif sekaligus mengamankan platform dari injeksi pihak ketiga.

Share this post