Belajar HonoJS - CORS, Security Headers & Rate Limiting

#Pendahuluan

Setelah di episode 10 kita memahami static files dan JSX rendering, pada episode ini kita akan membahas keamanan — CORS, security headers, dan rate limiting adalah tiga pilar keamanan dasar untuk setiap API production.

#CORS Configuration

#Setup CORS

CORS dengan custom origin

import { cors } from 'hono/cors'
 
app.use('*', cors({
  origin: ['https://example.com', 'https://app.example.com'],
  allowMethods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowHeaders: ['Content-Type', 'Authorization'],
  credentials: true,
}))

#CORS Development vs Production

CORS berbeda untuk environment

const corsConfig = process.env.NODE_ENV === 'production'
  ? { origin: ['https://example.com'] }
  : { origin: '*' }
 
app.use('*', cors(corsConfig))

Preflight handling dilakukan otomatis oleh Hono — tidak perlu route OPTIONS terpisah.

#Security Headers

#secureHeaders() — Built-in

Security headers otomatis

import { secureHeaders } from 'hono/secure-headers'
 
app.use('*', secureHeaders())

Menambahkan header keamanan:

X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
Strict-Transport-Security (HSTS)

#Custom CSP

Content Security Policy custom

app.use('*', secureHeaders({
  contentSecurityPolicy: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "'unsafe-inline'"],
    styleSrc: ["'self'", "'unsafe-inline'"],
  }
}))

#Rate Limiting

#@hono/rate-limiter

Install rate limiter

bun add @hono/rate-limiter

Rate limiting per IP

import { rateLimiter } from 'hono/rate-limiter'
 
app.use('*', rateLimiter({
  windowMs: 60000, // 1 menit
  limit: 100,      // max 100 requests
  keyGenerator: (c) => c.req.header('CF-Connecting-IP') ?? 'unknown',
}))

#Rate Limiting Per-Route

Rate limiting ketat untuk login

app.post('/auth/login', loginHandler, {
  rateLimit: { windowMs: 300000, limit: 5 } // 5 attempts per 5 menit
})

#Trusted Proxy

Jika Hono berjalan di belakang reverse proxy (nginx, Cloudflare), konfigurasi trusted proxy:

Trusted proxy configuration

app.use('*', (c, next) => {
  const forwarded = c.req.header('X-Forwarded-For')
  if (forwarded) {
    c.set('clientIp', forwarded.split(',')[0].trim())
  }
  return next()
})

Warning

Rate limiting harus dikonfigurasi dengan hati-hati. Untuk Cloudflare Workers, gunakan CF-Connecting-IP sebagai key generator karena Workers berjalan di banyak edge locations.

#Penutup

Pada episode 11 ini, kalian telah memahami tiga pilar keamanan dasar: CORS, security headers, dan rate limiting di Hono.

Inti yang harus dibawa pulang:

CORS: cors() middleware dengan custom origin.
Security headers: secureHeaders() untuk header otomatis.
Rate limiting: @hono/rate-limiter per IP atau per-route.
Trusted proxy: konfigurasi untuk reverse proxy.

Di episode 12 selanjutnya kita akan memahami JWT dan OAuth authentication — setup JWT verification, custom validation, OAuth social login, dan session management. Sampai jumpa di episode 12!