CORS WEB-SECURITY HTTP API FRONTEND BACKEND NETWORKING SECURITY BEST-PRACTICES BROWSER

Memahami CORS: Mengatasi Masalah Cross-Origin di Aplikasi Web Anda

⏱️ 13 menit baca
👨‍💻

Memahami CORS: Mengatasi Masalah Cross-Origin di Aplikasi Web Anda

1. Pendahuluan

Jika Anda seorang web developer, kemungkinan besar Anda pernah bertemu dengan pesan error yang menakutkan ini di konsol browser:

Access to fetch at 'https://api.contoh.com/data' from origin 'https://app.contoh.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Error CORS (Cross-Origin Resource Sharing) adalah salah satu “dinding” paling umum yang dihadapi developer saat membangun aplikasi web modern. Rasanya seperti sebuah misteri, tiba-tiba memblokir permintaan API Anda tanpa alasan yang jelas. Tapi jangan khawatir, CORS bukanlah hantu, melainkan mekanisme keamanan penting yang dirancang untuk melindungi pengguna dari serangan berbahaya.

Artikel ini akan membongkar tuntas apa itu CORS, mengapa ia ada, bagaimana cara kerjanya, dan yang terpenting, bagaimana cara mengkonfigurasinya dengan benar di aplikasi Anda. Tujuannya adalah agar Anda tidak lagi pusing dengan error CORS, melainkan memahami dan memanfaatkannya untuk membangun aplikasi web yang aman dan fungsional. Mari kita selami!

2. Apa itu ‘Origin’?

Sebelum kita membahas CORS, kita perlu memahami konsep “origin”. Dalam konteks web, sebuah “origin” didefinisikan oleh kombinasi tiga hal:

  1. Protokol: http:// atau https://
  2. Host: Nama domain atau alamat IP (misalnya, www.contoh.com, localhost, 192.168.1.1)
  3. Port: Nomor port (misalnya, 80, 443, 3000, 8080)

Dua URL dikatakan memiliki origin yang sama (same-origin) jika ketiga komponen ini identik. Jika salah satu saja berbeda, maka mereka dianggap cross-origin.

💡 Contoh Origin:

URL 1URL 2Status OriginPenjelasan
https://www.contoh.com:443https://www.contoh.com:443Same-OriginSemua sama.
https://www.contoh.com:443http://www.contoh.com:443Cross-OriginProtokol berbeda (https vs http).
https://www.contoh.com:443https://api.contoh.com:443Cross-OriginHost berbeda (www.contoh.com vs api.contoh.com).
https://www.contoh.com:443https://www.contoh.com:8080Cross-OriginPort berbeda (443 vs 8080).
https://www.contoh.comhttps://www.contoh.com:443Same-OriginPort 443 adalah default untuk HTTPS, sehingga sering diabaikan. Sama.
http://localhost:3000http://localhost:8080Cross-OriginPort berbeda.

Memahami konsep origin ini adalah kunci untuk memahami mengapa CORS diperlukan.

3. Mengapa CORS Ada? (Same-Origin Policy)

CORS adalah pengecualian yang dikendalikan untuk sebuah aturan keamanan fundamental di browser modern yang disebut Same-Origin Policy (SOP).

📌 Apa itu Same-Origin Policy (SOP)? SOP adalah fitur keamanan penting yang membatasi bagaimana dokumen atau script yang dimuat dari satu origin dapat berinteraksi dengan sumber daya dari origin lain. Secara default, browser memblokir permintaan AJAX (XHR atau Fetch API) yang dibuat dari satu origin ke origin yang berbeda, demi keamanan.

Mengapa SOP Penting? Bayangkan Anda login ke bank online Anda (bank.com) di satu tab browser. Di tab lain, Anda membuka situs web berbahaya (malicious.com). Tanpa SOP, malicious.com bisa saja:

  1. Mengirimkan permintaan AJAX ke bank.com menggunakan kredensial (cookies) Anda yang masih aktif.
  2. Membaca respons dari bank.com (misalnya, saldo rekening Anda) dan mengirimkannya ke server jahat.

Ini adalah jenis serangan yang dikenal sebagai Cross-Site Request Forgery (CSRF) atau, jika respons bisa dibaca, Informasi Leakage. SOP mencegah skenario ini dengan memastikan bahwa script dari malicious.com tidak dapat membaca data yang dikirim oleh bank.com, bahkan jika permintaan berhasil dikirim dengan cookies Anda.

✅ Peran CORS: CORS hadir untuk memberikan cara yang aman bagi server untuk secara eksplisit mengizinkan origin lain untuk mengakses sumber dayanya. Ini seperti penjaga gerbang yang memastikan hanya “tamu” yang diundang yang bisa masuk dan membawa pulang data. Tanpa CORS, komunikasi antar domain di web modern akan sangat terbatas.

4. Bagaimana CORS Bekerja?

Mekanisme CORS melibatkan serangkaian header HTTP yang dipertukarkan antara browser (klien) dan server. Ada dua jenis permintaan utama dalam CORS:

a. Simple Requests

Permintaan sederhana adalah permintaan yang memenuhi kriteria tertentu:

Alur Kerja Simple Request:

  1. Browser mengirimkan permintaan langsung ke server, menyertakan header Origin yang menunjukkan dari mana permintaan itu berasal. 
    GET /data HTTP/1.1
Host: api.contoh.com
Origin: https://app.contoh.com
  2. Server memproses permintaan dan, jika ingin mengizinkan akses cross-origin, harus menyertakan header Access-Control-Allow-Origin dalam responsnya. 
    HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://app.contoh.com
Content-Type: application/json
{"message": "Data berhasil diambil"}
  3. Browser menerima respons. Jika nilai Access-Control-Allow-Origin cocok dengan Origin dari permintaan atau adalah * (wildcard), browser mengizinkan script klien untuk mengakses respons. Jika tidak cocok atau header tidak ada, browser akan memblokir respons dan menampilkan error CORS.

b. Preflight Requests

Permintaan Preflight adalah permintaan OPTIONS khusus yang dikirim browser secara otomatis sebelum permintaan “nyata” (non-simple request) dikirim. Ini terjadi ketika permintaan:

Alur Kerja Preflight Request:

  1. Browser mengirimkan permintaan OPTIONS ke server, menyertakan header Origin, Access-Control-Request-Method (metode yang akan digunakan), dan Access-Control-Request-Headers (header kustom yang akan digunakan). 
    OPTIONS /data HTTP/1.1
Host: api.contoh.com
Origin: https://app.contoh.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type, Authorization
  2. Server merespons permintaan OPTIONS dengan header yang menunjukkan apa yang diizinkan. Ini adalah “negosiasi” antara browser dan server. 
    HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://app.contoh.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400
  3. Jika respons preflight menunjukkan bahwa permintaan “nyata” diizinkan, browser kemudian akan mengirimkan permintaan “nyata” (misalnya, POST /data) seperti simple request. Jika tidak, browser akan memblokir permintaan dan menampilkan error CORS.

Header CORS Penting dalam Respons Server:

5. Konfigurasi CORS di Sisi Server

Mengatasi error CORS sebagian besar berarti mengkonfigurasi server Anda dengan benar untuk mengirimkan header CORS yang sesuai. Berikut adalah beberapa contoh implementasi:

a. Node.js dengan Express (Menggunakan Middleware cors)

Ini adalah cara termudah dan paling umum untuk mengelola CORS di Express.

// server.js
const express = require("express");
const cors = require("cors"); // ✅ Install: npm install cors

const app = express();
const port = 3000;

// Konfigurasi CORS dasar: Mengizinkan semua origin (HATI-HATI DI PRODUKSI!)
// app.use(cors());

// Konfigurasi CORS yang lebih aman: Mengizinkan origin spesifik
const corsOptions = {
  origin: "http://localhost:8080", // Ganti dengan domain frontend Anda
  methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
  credentials: true, // Izinkan mengirim cookies/header Authorization
  optionsSuccessStatus: 204, // Untuk preflight requests
};
app.use(cors(corsOptions));

// Contoh endpoint API
app.get("/api/data", (req, res) => {
  res.json({
    message: "Ini data dari server!",
    user: req.headers.authorization,
  });
});

app.post("/api/items", (req, res) => {
  res.status(201).json({ message: "Item berhasil ditambahkan!" });
});

app.listen(port, () => {
  console.log(`Server berjalan di http://localhost:${port}`);
});

b. PHP (Laravel)

Di Laravel, Anda bisa menggunakan middleware atau package seperti barryvdh/laravel-cors.

Menggunakan barryvdh/laravel-cors (direkomendasikan):

  1. Install package: composer require barryvdh/laravel-cors
  2. Publish config: php artisan vendor:publish --tag="cors"
  3. Edit config/cors.php: 
    // config/cors.php
return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:8080', 'https://app.contoh.com'], // Ganti dengan domain frontend Anda
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];
  4. Pastikan middleware \Barryvdh\Cors\HandleCors::class ada di $middlewareGroups di app/Http/Kernel.php (biasanya sudah ada di grup api).

c. Nginx (Sebagai Reverse Proxy)

Jika Anda menggunakan Nginx sebagai reverse proxy di depan aplikasi backend Anda, Anda bisa mengkonfigurasi CORS di Nginx.

# /etc/nginx/sites-available/default atau file konfigurasi server Anda

server {
    listen 80;
    server_name api.contoh.com; # Ganti dengan domain API Anda

    location / {
        # Pertama, handle OPTIONS method untuk preflight requests
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' 'https://app.contoh.com'; # Ganti dengan domain frontend Anda
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        # Kemudian, tambahkan header CORS untuk semua request lainnya
        add_header 'Access-Control-Allow-Origin' 'https://app.contoh.com'; # Ganti dengan domain frontend Anda
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
        add_header 'Access-Control-Allow-Credentials' 'true'; # Jika Anda mengirim cookies/otentikasi

        proxy_pass http://localhost:3000; # Ganti dengan alamat backend Anda
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

⚠️ Penting: Setelah mengubah konfigurasi server, jangan lupa untuk me-restart server atau service terkait (misalnya pm2 restart app, php artisan serve, sudo systemctl reload nginx).

6. Tips dan Best Practices CORS

Untuk menghindari masalah CORS di masa mendatang dan menjaga keamanan aplikasi Anda, ikuti tips berikut:

Kesimpulan

CORS mungkin terasa seperti penghalang di awal, tetapi sebenarnya adalah pilar keamanan yang krusial di dunia web modern. Dengan memahami konsep origin, Same-Origin Policy, dan cara kerja simple serta preflight requests, Anda sudah setengah jalan untuk menguasainya.

Kunci untuk mengatasi masalah CORS adalah konfigurasi server yang tepat. Pastikan server Anda merespons dengan header Access-Control-Allow-Origin, Access-Control-Allow-Methods, dan Access-Control-Allow-Headers yang sesuai dengan kebutuhan aplikasi frontend Anda. Selalu prioritaskan keamanan dengan membatasi origin yang diizinkan, terutama di lingkungan produksi.

Dengan pengetahuan ini, Anda kini bisa lebih percaya diri dalam membangun aplikasi web yang aman, terhubung, dan bebas dari error CORS yang menyebalkan!

🔗 Baca Juga