CORS

CORS adalah mekanisme browser yang menentukan apakah JavaScript di origin A boleh membaca respons dari origin B. Origin terdiri dari skema, host, dan port. https://app.contoh.com dan https://api.contoh.com dianggap dua origin berbeda meskipun domainnya sama.

Kapan browser bertanya

Request sederhana seperti GET tanpa header khusus bisa langsung dikirim. Request PUT, DELETE, PATCH, atau yang memakai Content-Type: application/json biasanya memicu preflight OPTIONS. Browser bertanya lebih dulu apakah metode dan header diizinkan, lalu mengirim request sebenarnya kalau server menjawab dengan benar.

Header yang terlibat antara lain Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers, dan Access-Control-Allow-Credentials. Access-Control-Max-Age menentukan berapa lama hasil preflight disimpan browser. Tambahkan Vary: Origin supaya cache tidak menyajikan respons untuk origin yang salah.

`Access

• Control
• Allow
• Origin: *tidak boleh digabung denganAccess
• Control
• Allow
• Credentials: true`. Browser akan menolaknya. Kalau memakai cookie, server harus mengembalikan origin spesifik.

Contoh di Nginx

location /api/ {
    add_header Access-Control-Allow-Origin "https://app.contoh.com" always;
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
    add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
    add_header Access-Control-Allow-Credentials "true" always;
    add_header Vary "Origin" always;

    if ($request_method = OPTIONS) {
        return 204;
    }
}

Kalau origin banyak, jangan menyalin semuanya ke konfigurasi statis tanpa strategi. Validasi header Origin terhadap allowlist di aplikasi, lalu kembalikan nilai yang cocok.

CORS bukan autentikasi

CORS hanya membatasi browser. Penyerang bisa memanggil API dari server sendiri tanpa peduli header ini. Karena itu, tetap gunakan token, session, dan otorisasi di server.

Wildcard juga berbahaya kalau respons berisi data pengguna atau cookie. Lupa Vary: Origin bisa membuat CDN menyajikan respons milik origin lain. Preflight yang diproteksi auth juga sering gagal karena endpoint OPTIONS ikut meminta token.

Untuk aplikasi yang memakai iframe atau widget pihak ketiga, kombinasikan CORS dengan CSP. Kalau API dibuka untuk frontend terpisah, dokumentasikan origin yang diizinkan.

Kalau frontend memanggil backend terpisah, aturan ini sering muncul saat menghubungkan ke API.

FAQ