Mengapa Security Penting dalam Aplikasi Web

Saat membangun aplikasi web modern, keamanan sering kali baru dipikirkan setelah aplikasi hampir selesai. Padahal sejak awal pengembangan, aspek security seharusnya sudah menjadi bagian dari arsitektur aplikasi.

Jika aplikasi tidak memiliki perlindungan yang baik, beberapa risiko yang bisa terjadi antara lain:

• kebocoran data pengguna

• akun user diambil alih oleh pihak lain

• manipulasi request ke API

• serangan otomatis seperti brute force

Next.js sendiri sebenarnya sudah menyediakan beberapa fitur yang membantu meningkatkan keamanan aplikasi, tetapi tetap diperlukan praktik yang benar dari sisi developer.

Mengamankan API Routes

Pada part sebelumnya kita sudah membahas API Routes. Endpoint API ini sering menjadi target utama serangan karena menjadi jalur utama komunikasi antara client dan server.

Beberapa hal yang sebaiknya dilakukan untuk mengamankan API:

Pertama, lakukan validasi input pada setiap request yang masuk. Jangan pernah langsung mempercayai data yang dikirim dari client.

Contoh sederhana validasi request body:

export async function POST(request: Request) {
  const body = await request.json()

  if (!body.email) {
    return Response.json({ error: "Email wajib diisi" }, { status: 400 })
  }

  return Response.json({ success: true })
}

Kedua, gunakan authentication untuk endpoint yang membutuhkan akses khusus, misalnya endpoint dashboard atau endpoint admin.

Ketiga, batasi akses menggunakan rate limiting agar endpoint tidak mudah diserang menggunakan request berulang.

Mencegah Serangan XSS

XSS atau Cross Site Scripting adalah salah satu serangan paling umum pada aplikasi web. Serangan ini terjadi ketika attacker berhasil menyisipkan script berbahaya ke dalam halaman web.

Contohnya ketika aplikasi menampilkan input dari user tanpa proses sanitasi.

Untungnya React dan Next.js sudah secara default melakukan escaping HTML sehingga script berbahaya tidak langsung dijalankan.

Contoh yang aman:

<p>{userComment}</p>

React akan memastikan bahwa isi userComment tidak langsung dieksekusi sebagai script.

Namun developer tetap harus berhati-hati ketika menggunakan fitur seperti:

dangerouslySetInnerHTML

Fitur tersebut bisa membuka celah XSS jika digunakan tanpa validasi data yang baik.

Perlindungan terhadap CSRF

CSRF (Cross Site Request Forgery) adalah serangan yang memanfaatkan session user yang masih aktif untuk mengirim request tanpa sepengetahuan pengguna.

Contoh kasus sederhana:

User sedang login di sebuah aplikasi, lalu tanpa sadar membuka halaman lain yang menjalankan request tersembunyi ke aplikasi tersebut.

Untuk mencegah hal ini, biasanya digunakan CSRF token yang harus dikirim bersama setiap request penting seperti login atau update data.

Beberapa library authentication seperti NextAuth sudah menyediakan perlindungan CSRF secara otomatis sehingga developer tidak perlu membuatnya dari awal.

Menyimpan Data Sensitif dengan Aman

Aplikasi web sering menyimpan data penting seperti:

• password user

• API key

• token autentikasi

• konfigurasi database

Data seperti ini sebaiknya tidak pernah disimpan langsung di dalam source code.

Next.js menggunakan file environment untuk menyimpan konfigurasi sensitif.

Contoh file environment:

.env.local

DATABASE_URL=postgres://user:password@localhost:5432/app
JWT_SECRET=supersecretkey

File environment ini biasanya tidak dimasukkan ke dalam repository publik agar tidak terekspos.

Menggunakan HTTPS

Salah satu langkah keamanan paling mendasar adalah memastikan aplikasi berjalan menggunakan HTTPS.

HTTPS mengenkripsi data yang dikirim antara browser dan server sehingga tidak mudah disadap oleh pihak lain.

Jika aplikasi hanya menggunakan HTTP, data sensitif seperti:

• email

• password

• token login

bisa saja dibaca oleh pihak yang berada di jaringan yang sama.

Karena itu hampir semua platform hosting modern seperti Vercel, Cloudflare, atau Netlify sudah menyediakan HTTPS secara otomatis.

Melindungi Halaman dengan Middleware

Next.js menyediakan fitur middleware yang dapat digunakan untuk memeriksa request sebelum halaman ditampilkan.

Middleware bisa digunakan untuk berbagai kebutuhan keamanan seperti:

• memeriksa apakah user sudah login

• membatasi akses ke halaman tertentu

• memvalidasi token authentication

Contoh middleware sederhana:

import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export function middleware(request: NextRequest) {
  const token = request.cookies.get("token")

  if (!token) {
    return NextResponse.redirect(new URL("/login", request.url))
  }

  return NextResponse.next()
}

Dengan middleware, halaman seperti dashboard atau admin panel bisa dilindungi dari akses user yang belum login.

Kesimpulan

Security bukan hanya tambahan fitur, tetapi bagian penting dari proses pengembangan aplikasi web.

Next.js sudah menyediakan berbagai fitur yang membantu meningkatkan keamanan aplikasi, mulai dari API Routes yang berjalan di server, middleware untuk proteksi halaman, hingga integrasi yang mudah dengan berbagai sistem authentication.

Namun tetap saja, keamanan aplikasi sangat bergantung pada bagaimana developer menulis dan mengelola kode.

Dengan menerapkan praktik security yang baik sejak awal, kita bisa mengurangi risiko kebocoran data dan membuat aplikasi lebih aman untuk digunakan.

Pada Part 9 nanti kita akan membahas topik yang juga sangat penting dalam pengembangan aplikasi modern, yaitu Performance di Next.js dan bagaimana membuat aplikasi tetap cepat meskipun memiliki banyak fitur. 🚀