🚨 Memahami eval di JavaScript, Bahayanya, dan Cara Mengatasinya di Vite + React + TS + Hono

1. Apa itu eval?

eval adalah fungsi bawaan JavaScript yang bisa mengeksekusi string sebagai kode JavaScript.
Contoh:

const code = "2 + 2";
console.log(eval(code)); // 4

Sekilas terlihat praktis, tapi sangat berisiko. eval akan membaca string apa adanya lalu menjalankannya. Jika string itu berasal dari input user atau sumber luar, bisa memicu serangan injeksi kode (XSS).

---

2. Kenapa eval Berbahaya?

Ada beberapa alasan kenapa eval dianggap insecure:

1. XSS (Cross-Site Scripting):
   Penyerang bisa menyisipkan script berbahaya yang langsung dieksekusi.
   Misalnya, eval("alert(document.cookie)") → mencuri cookie user.

2. Membuka pintu arbitrary code execution:
   Jika ada input tak tervalidasi, attacker bisa jalankan perintah tak diinginkan.

3. Mengganggu keamanan modern (CSP):
   Browser modern + CSP (Content Security Policy) default sering memblok eval, sehingga error muncul:

   Content Security Policy of your site blocks the use of 'eval' in JavaScript

4. Lambat & sulit dioptimasi:
   Engine JavaScript (seperti V8) tidak bisa mengoptimasi kode eval, karena isinya bisa berubah-ubah.

---

3. Kenapa Error eval Muncul di Vite + React + TypeScript + Hono?

Ketika membangun aplikasi dengan Vite + React TS, ada beberapa penyebab umum:

• Vite dev server: saat mode development, Vite menggunakan eval untuk debugging source maps (misalnya eval-source-map).

• Library pihak ketiga: beberapa package lama masih pakai eval atau new Function().

• CSP ketat di server Hono: kamu mungkin mengatur header CSP tanpa unsafe-eval.

---

4. Cara Mengatasi Error CSP karena eval

🔹 (1) Hilangkan pemakaian eval

• Jangan gunakan eval atau new Function() secara manual.

• Ganti eval("2+2") → 2+2 langsung.

• Ganti setTimeout("doSomething()", 100) → setTimeout(doSomething, 100).

---

🔹 (2) Pastikan Vite tidak pakai eval di production

• Secara default, vite build menghasilkan bundle tanpa eval.

• Masalah biasanya hanya di dev mode.

• Jika error muncul di production, pastikan mode build benar:

    vite build --mode production
  

• Periksa vite.config.ts, hindari source map berbasis eval:

    export default defineConfig({
      build: {
        sourcemap: true, // aman, tidak pakai eval
      }
    })
  

---

🔹 (3) Atur CSP Header di Hono

Jika kamu ingin izin sementara untuk development (agar error hilang), tambahkan 'unsafe-eval' di CSP hanya di dev mode.

Contoh middleware Hono:

import { Hono } from 'hono'

const app = new Hono()

app.use('*', async (c, next) => {
  const isDev = process.env.NODE_ENV !== 'production'
  const csp = isDev
    ? "default-src 'self'; script-src 'self' 'unsafe-eval';"
    : "default-src 'self'; script-src 'self';"

  c.header('Content-Security-Policy', csp)
  await next()
})

app.get('/', (c) => c.html('<h1>Hello Vite + React + Hono!</h1>'))

export default app

⚠️ Catatan: 'unsafe-eval' tidak boleh dipakai di production.

---

🔹 (4) Gunakan Nonce / Hash di CSP (solusi aman)

Kalau aplikasi butuh inline script tanpa eval, gunakan nonce:

app.use('*', async (c, next) => {
  const nonce = crypto.randomUUID()
  c.header('Content-Security-Policy', `script-src 'self' 'nonce-${nonce}';`)
  c.set('csp-nonce', nonce)
  await next()
})

Lalu saat render HTML:

<script nonce="THE_NONCE">console.log("aman!")</script>

---

🔹 (5) Gunakan Report-Only Mode untuk Debug

Untuk mengecek pelanggaran tanpa memblokir:

app.use('*', (c, next) => {
  c.header(
    'Content-Security-Policy-Report-Only',
    "default-src 'self'; script-src 'self'; report-uri /csp-report"
  )
  return next()
})

app.post('/csp-report', async (c) => {
  const report = await c.req.json()
  console.log('CSP Report:', report)
  return c.text('ok')
})

---

5. Rekomendasi Praktis untuk Project Vite + React + TS + Hono

1. Development:

   • Tambahkan sementara 'unsafe-eval' di CSP untuk mencegah error saat hot-reload.

   • Atau gunakan vite --mode production jika mau test tanpa eval.

2. Production:

   • Jangan gunakan 'unsafe-eval'.

   • Deploy hasil vite build.

   • Gunakan CSP yang ketat dengan script-src 'self' + nonce/hash.

3. Library check:

   • Selalu audit library dengan grep "eval(" di node_modules.

   • Cari alternatif library yang tidak pakai eval.

---

6. Kesimpulan

• eval berbahaya karena membuka celah XSS dan memperlambat performa.

• Error Content Security Policy blocks 'eval' muncul karena CSP memblokir eval.

• Di Vite React TS + Hono, masalah biasanya muncul di dev mode (bukan production).

• Solusi:
  ✅ Jangan pakai eval manual.
  ✅ Pastikan vite build untuk production.
  ✅ Gunakan CSP aman di Hono (nonce/hash), 'unsafe-eval' hanya untuk development jika terpaksa.