Skip to main content

CORS

CORS adalah singkatan dari Cross Origin Resource Sharing. Istilah ini mengacu pada pemakaian file atau data dari website lain. Mekanisme keamanan ini berhubungan dengan salah satu fitur browser yang disebut Same-Origin Policy yang fungsinya mencegah sebuah website seenaknya mengambil file atau data dari website lain tanpa "ijin" server targetnya. Ini dilakukan untuk mencegah serangan keamanan seperti Cross-Site Scripting (XSS).

https://p178.p0.n0.cdn.getcloudapp.com/items/yAuJjpdA/e652ffeb-afca-4ba0-9aaf-c7d4e37a3d77.png?v=ebf3ca8b02d788e8ac68c36539dfe1c9

Misalnya kita buka website ABC . Website ini menampilkan data product dari website XYZ jadi dia harus mengirim rekues GET /product untuk ambil data. Sebelum mengirim rekues itu browser mengirim preflight request untuk mengecek apakah XYZ bisa menerima rekues dari ABC. XYZ merespon dengan header yang disebut CORS header. Rekues untuk ambil data product hanya bisa dilanjutkan kalo respon dari XYZ minimal berisi header:

Access-Control-Allow-Methods: GET

Dan salah satu dari header ini:

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: ABC.com

Kalo header-nya bukan salah satu di atas, rekues GET nggak dilanjutkan & otomatis nggak ada data yang bisa ditampilkan. Di konsol kita bisa lihat pesan error seperti ini:

Jadi kalo kita bikin aplikasi di server yang harus bisa diakses aplikasi di domain lain, kita perlu atur header untuk kontrol aksesnya.

Response Header​

Bayangin kita mengirim surat (rekues) ke sebuah toko (server) untuk meminta informasi tentang produk mereka. Toko tersebut kemudian mengirim balik sebuah surat balasan (respon) yang nggak hanya berisi data yang kita minta, tapi juga informasi tambahan berbentuk header di amplopnya yang isinya termasuk:

  • Tanggal pengiriman balasan
  • Format data. Kalo isinya adalah dokumen pdf maka ada header Content-Type: application/pdf.
  • Instruksi bagaimana surat itu harus disimpan. Misalnya "simpan surat ini valid untuk satu minggu", ada Cache-control: max-age=604800.
  • Status rekues. Misalnya mereka nggak bisa menemukan produk yang kita minta, kode status untuk rekues ini bukan 200 OK tapi 404 Not Found.
  • Header CORS di atas

Contoh header:

HTTP/1.1 200 OK
Date: Mon, 23 May 2022 22:38:34 GMT
Server: Apache/2.4.1 (Unix)
Last-Modified: Sat, 20 May 2022 18:56:53 GMT
Content-Length: 438
Content-Type: text/html; charset=UTF-8