Apa itu CORS (Cross Origin Resource Sharing) ?

CORS (Cross Origin Resource Sharing) adalah mekanisme untuk mengizinkan akses resource web dari aplikasi web lain.

Contohnya ?

Misalkan kita mempunyai website http://www.site1.com yang didalamnya terdapat halaman web page1.html Sehingga kita bisa akses melalui browser http://www.site1.com/page1.html .

Suatu saat ada website lain http://www.sitelain.com ingin mengambil data halaman page1.html tersebut untuk ditampilkan otomatis di websitenya, sehingga kalau orang mengakses http://www.sitelain.com/pageduplikat.html , maka didalamnya sebenarnya memasukkan isi dari http://www.site1.com/page1.html tadi.

Hmm, apa semua website membolehkan seperti itu ?

Sebenarnya default untuk akses antara website yang berbeda url adalah tidak memperbolehkan domain/website yang berbeda mengakses sumber daya di website yang lain. Istilahnya adalah pembatasan dengan cara Same Origin Policy.

Mestinya akses http://www.site1.com/page1.html dari http://www.sitelain.com tidak diperbolehkan, karena melanggar Same Origin Policy. Hal ini karena website yang melakukan request berbeda dengan website yang mempunyai resources, sehingga mestinya request itu ditolak.

Akan tetapi dengan konfigurasi CORS, maka skenario diatas dapat dilakukan. Tentunya dengan pertimbangan dan skenario yang terbatas, karena membuka semua akses terhadap website lain ke website kita , sama artinya membuka celah keamanan di website kita.

Skenario CORS tersebut dapat dilakukan dengan melakukan konfigurasi CORS di HTTP response header dari http://www.site1.com/page1.html yaitu web yang mau diambil halaman html nya. Konfigurasinya misalnya dengan mengizinkan requestnya dari semua website.

CORS sendiri mencoba mengatur sejauh mana sebuah resources di website kita bisa dipergunakan oleh website lain. Karena sebelum adanya pengaturan CORS banyak terjadi pelanggaran keamanan di sebuah website.

Apa saja jenis pelanggaran keamanan yang memanfaatkan website lain ?

Banyak prinsip keamanan web yang dilanggar ketika sebuah website bisa mengakses sumber daya website lain secara bebas. Misalnya :

  1. Memanfaatkan isi dari website terkenal

Misalnya ketika orang ingin menampilkan halaman dari website website terkenal di halaman website mereka. Tanpa bersusah payah, yang punya website akan meng-include-kan link/url website terkenal di dalam code aplikasi website mereka, dan otomatis halaman tersebut muncul.

Halaman tersebut bisa di tampilkan dalam bentuk iframe atau di page terpisah sendiri. Hal ini seperti melakukan plagiarism terselubung, dengan tujuan memanfaatkan ketenaran dari website tersebut.

  1. Mendapatkan informasi rahasia dan penting dari pengguna website lain.

Atau bisa saja website lain ingin mendapatkan informasi pribadi dari orang lain yang punya akun di website tertentu. Pengambil informasi ini akan membuat website yang di balik layar akan memanggil API/ link ke website tertentu tersebut. Pengguna diminta memasukkan data pribadi, dan kemudian website akan berlaku sebagai perantara antara pengguna dan web aslinya.

Dan secara tidak sadar, informasi pengguna tadi tersimpan di datanya website perantara tadi.

  1. Menipu orang lain dengan meniru tampilan website lain.

Atau yang lebih parah adalah dengan tujuan menipu orang lain. Seseorang mencoba membuat sebuah website yang mirip dengan website sebuah bank. Kemudian didalamnya terdapat form untuk transfer uang yang dibuat sedemikian mirip dengan form di website aslinya.

Ketika pengguna mengklik tombol “Transfer”, maka website ini akan memanggil API/ link transfer asli di website bank nya, tetapi tentunya dengan mengubah account penerima ke account banknya si penipu, sehingga penipu bisa mendapatkan uang secara ilegal.

3 hal diatas merupakan ancaman keamanan bagi pengguna website.

Oleh karenanya browser menerapkan mekanisme Same Origin Policy.


Apa itu Same Origin Policy ?

Origin itu adalah kombinasi antara scheme , host (domain), dan port dari url. misalnya http://www.huzefril.com:8080

http: scheme > www.huzefril.com –> host, 8080 –> port

– diambil dari Origin

Jadi 2 url dianggap sama kalau scheme, host (domain), dan port nya semua nya sama.

Same Origin Policy artinya mekanisme keamanan web yang membatasi akses terhadap sumber daya web hanya dari origin yang sama. Dengan kata lain yang boleh mengakses sumber daya web (seperti image, halaman html, css, javascript, dll) hanyalah kalau diminta dari website yang sama.

Lalu bagaimana caranya untuk diizinkan untuk diakses dari website lain ?

Yaa.., pakai konfigurasi CORS.

Bagaimana konfigurasinya ?

Ide dasarnya adalah dengan menginformasikan ke browser , url-url apa saja/darimana saja yang boleh mengakses sumberdaya di website tersebut.

Tetapi tentunya informasi url/origin apa saja yang boleh mengakses sumberdaya website harus didapatkan browser sebelum mengakses websitenya itu sendiri.

Dengan kata lain, browser harus tahu dulu Metadata dari sebuah website sebelum browser memutuskan untuk mengambil sumber daya di website tersebut.

Beruntungnya di protokol HTTP ada method yang melakukan hal itu yaitu methode OPTIONS.

Karena yang menentukan alur boleh tidaknya diakses nantinya adalah browser, maka yang melakukan inisiasi pengecekan metadata ini adalah browser. Istilahnya ini adalah preflight request

Ketika website A, didalam code nya mengambil halaman website lainnya misalnya website B, maka secara tidak langsung website A memerintahkan browser untuk melakukan request ke website B.

Akan tetapi browser tidak akan langsung mengakses halaman website B, akan tetapi akan mengirimkan preflight request ke website B untuk mendapatkan daftar url / domain yang diperbolehkan untuk mengakses sumberdaya / halaman di website B.

Kalau ternyata website B mengizinkan website A mengakses sumber dayanya, maka akan dikirimkan HTTP Header Access-Control-Allow-Origin berisikan domain website A.

Dengan menerima informasi tersebut, kemudian browser akan memutuskan apakah akan melanjutkan untuk mengambil data dari website B atau tidak.