Source map di produksi membocorkan kode sumbermu
Source map (file .js.map) memungkinkan browser memetakan kode terminifikasi kembali ke kode sumber aslimu. Kalau disajikan publik di produksi, siapa pun bisa merekonstruksi basis kode aslimu yang belum diminifikasi, lengkap dengan komentarnya.
Apa itu
Build tool menghasilkan source map untuk membantu debugging. Saat bundle terminifikasi mereferensikan file .map yang juga ikut di-deploy, browser — dan siapa pun — bisa mengunduh kode sumber aslinya.
Ini mengekspos logika internal, penamaan, komentar TODO, dan kadang nilai hard-coded yang mengungkap cara kerja backend dan auth-mu.
Kenapa penting
Kode sumber yang bisa dibaca membuat penyerang jauh lebih mudah menemukan cacat logika, endpoint tersembunyi, dan validasi yang hanya berjalan di klien.
Ia juga bisa membocorkan secret atau URL internal yang tadinya diasumsikan 'tersembunyi' di dalam bundle.
Cara memperbaiki
Matikan browser source map untuk build produksi.
// next.config.js
module.exports = { productionBrowserSourceMaps: false };Kalau kamu butuh source map untuk error monitoring, unggah ke error tracker-mu (mis. Sentry) dan strip dari build publik alih-alih menyajikannya.
Setelah deploy, minta salah satu URL .map dari bundle-mu. Seharusnya mengembalikan 404, bukan JSON source map.
FAQ
Apakah source map selalu buruk?
Tidak — source map sangat berharga untuk debugging. Masalahnya adalah menyajikannya secara publik di produksi. Simpan di pipeline monitoring-mu saja.
Apakah minifikasi melindungi kodeku?
Hanya di permukaan. Dengan source map publik, minifikasi sepenuhnya dibalik kembali menjadi kode sumber yang bisa dibaca.
Apakah aplikasimu terpengaruh?
AppSafe memeriksa ini dan puluhan masalah lain dalam satu pemindaian gratis.
Pindai aplikasiku gratisPanduan terkait
API key terekspos di JavaScript sisi klien
Apa pun di bundle-mu bersifat publik. Perlakukan seperti itu.
File .env yang terekspos: cara penyerang menemukan rahasiamu
Satu .env yang bisa dijangkau bisa menyerahkan seluruh stack-mu.
Content-Security-Policy (CSP): apa itu dan cara menambahkannya
Header yang mencegah script sisipan berjalan.