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));
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:
XSS (Cross-Site Scripting):
Penyerang bisa menyisipkan script berbahaya yang langsung dieksekusi.
Misalnya, eval("alert(document.cookie)") → mencuri cookie user.
Membuka pintu arbitrary code execution:
Jika ada input tak tervalidasi, attacker bisa jalankan perintah tak diinginkan.
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
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,
}
})
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
Development:
Production:
Library check:
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.
