Belajar Caddy - Security Headers & CORS

#Pendahuluan

Banyak serangan web dicegah bukan di aplikasi, tapi di level protokol — lewat HTTP headers. Browser membaca header seperti Content-Security-Policy dan X-Frame-Options untuk mengambil keputusan keamanan sebelum merender halaman. Episode 20 membahas cara Caddy mengontrol header ini.

Kalian akan belajar directive header untuk menambah, mengubah, dan menghapus header, daftar security headers yang wajib dipasang, konfigurasi CORS lengkap untuk API lintas domain, dan cara menyembunyikan informasi server dari publik.

Headers adalah lapisan pertahanan yang murah namun sangat efektif — dan semuanya bisa dilakukan dari Caddyfile tanpa menyentuh aplikasi.

#Directive header

#Menambah dan Menghapus Header

header menambahkan header ke semua respons:

example.com {
    header {
        X-Frame-Options DENY
        X-Content-Type-Options nosniff
        Referrer-Policy strict-origin-when-cross-origin
        -Server
    }
    root * /var/www
    file_server
}

Aturan: nama header baru ditambah, nama dengan awalan - dihapus. -Server menghapus header Server yang dikirim Caddy, menyembunyikan teknologi di balik situs.

#Header Bersyarat

Header bisa dibatasi dengan matcher:

example.com {
    @api {
        path /api/*
    }
    header @api Access-Control-Allow-Origin *
    root * /var/www
    file_server
}

header @api Access-Control-Allow-Origin * menambahkan header CORS hanya untuk path API.## Security Headers Penting

#Perlindungan Clickjacking dan MIME Sniffing

Beberapa header wajib untuk situs modern:

example.com {
    header {
        X-Frame-Options DENY
        X-Content-Type-Options nosniff
        X-XSS-Protection 0
        Permissions-Policy geolocation=(), camera=(), microphone=()
    }
    root * /var/www
    file_server
}

• X-Frame-Options DENY: situs tidak bisa di-embed dalam iframe (anti clickjacking).
• X-Content-Type-Options nosniff: browser tidak menebak tipe file (anti MIME sniffing).
• Permissions-Policy: membatasi akses API browser seperti kamera dan GPS.

X-XSS-Protection 0 justru mematikan fitur lama browser yang bermasalah; perlindungan XSS modern datang dari CSP.

#Content-Security-Policy (CSP)

CSP adalah pertahanan terkuat melawan XSS. Header ini memberi tahu browser sumber konten mana yang diizinkan:

example.com {
    header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self'"
    root * /var/www
    file_server
}

default-src 'self' hanya mengizinkan konten dari domain sendiri. Script eksternal diblokir kecuali ditambahkan ke daftar.

#HSTS

Header HSTS memaksa browser selalu memakai HTTPS:

example.com {
    header Strict-Transport-Security "max-age=63072000; includeSubDomains"
    root * /var/www
    file_server
}

header Strict-Transport-Security ... dengan max-age dua tahun dan includeSubDomains menolak koneksi HTTP untuk seluruh domain. Kita sudah mengenalnya di episode 8.

#Konfigurasi CORS

#Konsep CORS dan Preflight

CORS mengizinkan browser memanggil API dari domain lain. Browser mengirim preflight request OPTIONS sebelum request asli, dan Caddy harus merespons dengan benar:

api.example.com {
    @preflight {
        method OPTIONS
    }
 
    handle @preflight {
        header Access-Control-Allow-Origin https://app.example.com
        header Access-Control-Allow-Methods "GET, POST, PUT, DELETE"
        header Access-Control-Allow-Headers "Content-Type, Authorization"
        header Access-Control-Max-Age "86400"
        respond 204
    }
 
    header Access-Control-Allow-Origin https://app.example.com
    reverse_proxy localhost:8080
}

Blok @preflight menangani request OPTIONS dan mengembalikan 204 tanpa menyentuh backend. Header Access-Control-Allow-Origin pada respons normal mengizinkan browser membaca respons.

#Allow-Credentials

Jika aplikasi memakai cookie lintas domain:

api.example.com {
    header Access-Control-Allow-Origin https://app.example.com
    header Access-Control-Allow-Credentials true
    reverse_proxy localhost:8080
}

Access-Control-Allow-Credentials true mengizinkan cookie dikirim bersama request lintas domain. Perhatikan: dengan kredensial, Allow-Origin tidak boleh berupa bintang — harus domain spesifik.

#Praktik Terbaik

#Test Header

Setelah menerapkan header, uji hasilnya:

curl -I https://example.com

curl -I menampilkan header respons yang diterima. Pastikan security headers muncul dan header Server tidak bocor. Alat seperti securityheaders.com bisa memberi penilaian otomatis.

#Ringkasan Header yang Disarankan

• X-Frame-Options: DENY
• X-Content-Type-Options: nosniff
• Content-Security-Policy yang disesuaikan
• Referrer-Policy: strict-origin-when-cross-origin
• Strict-Transport-Security (HTTPS)
• Permissions-Policy yang membatasi API browser
• Hapus Server dan header backend

#Penutup

Episode 20 melengkapi keamanan di level header: directive header untuk menambah, mengubah, dan menghapus header, security headers seperti CSP, HSTS, dan X-Frame-Options, konfigurasi CORS lengkap dengan preflight OPTIONS dan kredensial, serta praktik menyembunyikan informasi server.

Inti yang harus dibawa pulang:

• header menambah header; awalan - menghapus.
• -Server menyembunyikan teknologi backend dari publik.
• CSP adalah pertahanan utama melawan XSS.
• Preflight OPTIONS harus dijawab dengan 204.
• Allow-Credentials true mengharuskan origin spesifik.
• Uji semua header dengan curl -I.

Di episode 21 selanjutnya kita akan membahas compression & caching — directive encode dengan gzip, brotli, dan zstd, precompressed files, Cache-Control headers untuk aset statis, HTTP/2 dan HTTP/3, serta tuning performa seperti keep-alive dan timeouts.