Satpam Gerbang Masuk & Perisai Antarmuka Web
Memastikan pengguna yang belum masuk langsung diarahkan ke halaman login dan menjaga tampilan website dari sisipan kode berbahaya dari luar.
Memastikan pengguna yang belum masuk langsung diarahkan ke halaman login dan menjaga tampilan website dari sisipan kode berbahaya dari luar.
Tantangan & Kebutuhan Pengguna
Serangan Cross-Site Scripting (XSS) dan Clickjacking sering mengeksploitasi aplikasi web yang tidak memiliki kebijakan Content Security Policy (CSP) atau yang mengizinkan sumber eksternal sembarangan. Selain itu, di Next.js 16, konvensi `middleware.ts` telah digantikan oleh `proxy.ts`. Aplikasi membutuhkan garda depan yang ringan untuk memvalidasi token sesi sebelum merender halaman dashboard, sekaligus menyuntikkan header keamanan di setiap respons.
Keamanan lapisan antarmuka dimulai sebelum baris HTML pertama dikirimkan ke browser: batasi asal skrip, larang pembingkaian iframe, dan tolak sesi tidak valid di pintu gerbang.
Solusi & Cara Kerja
File `proxy.ts` di akar proyek berjalan pada setiap request navigasi halaman (mengecualikan aset statis dan `/api/*`). Fungsi `nextWithCsp` membangkitkan nilai `nonce` berbasis `crypto.randomUUID()` yang di-encode ke Base64 dan meneruskannya melalui header `x-nonce` serta header `Content-Security-Policy` (`frame-ancestors 'none'`, `object-src 'none'`, `base-uri 'self'`). Sebelum meneruskan request, proxy memeriksa keberadaan cookie sesi menggunakan `jwtVerify` dari library `jose`. Pengguna yang belum login diarahkan ke `/login`, sedangkan pengguna yang sudah login namun mengakses `/login` otomatis diarahkan ke `/dashboard`.
Berikut adalah implementasi pembangkitan nonce CSP dan pengawalan rute di `proxy.ts`:
Detail & Hal yang Diperhatikan
- Pengecualian Route API (`/api/*`): Matcher sengaja mengecualikan `/api/*` agar endpoint JSON mengembalikan status `401 Unauthorized` atau `403 Forbidden` secara murni melalui `requirePermission`, bukan me-redirect fetch client ke halaman HTML `/login`.
- Disiplin Zero Inline Styles di JSX: Seluruh komponen aplikasi mematuhi aturan larangan atribut `style={{ ... }}` dan mengimpor SweetAlert2 dari build ESM (`sweetalert2.esm.js`) agar tidak menyuntikkan tag `<style>` dinamis yang melanggar standar CSP.
- Mode Report-Only di Development: Saat `NODE_ENV === 'development'`, header dipasang sebagai `Content-Security-Policy-Report-Only` dan mengizinkan WebSocket (`ws: wss:`) agar fitur Hot Module Replacement (HMR) Turbopack berjalan mulus.
Verifikasi JWT di dalam `proxy.ts` hanya bertindak sebagai filter lapis pertama; pemeriksaan pencabutan sesi (`sid`) dan `sessionVersion` terhadap database tetap dieksekusi secara penuh oleh `getSession()` di lapisan Server Component dan Server Action.