Apa itu CORS? Pengertian CORS dan Implemntasinya

Pengertian CORS (Cross-origin resource sharing) dan Implementasi, Untuk kepentingan mengamankan permintaan resource dalam protokol HTTP maupun HTTPS.

Apa itu CORS?

Cross-Origin Resource Sharing (CORS) adalah mekanisme browser yang memungkinkan akses terkontrol ke sumber daya yang terletak di luar domain. Kebutuhannya adalah memperluas dan menambah fleksibilitas pada kebijakan sumber yang sama.

yang biasanya jika CORS aktif memiliki response HTTP di bagian header seperti :

Access-Control-Allow-Origin: *

Namun, ini juga memberikan potensi serangan berbasis domain, jika kebijakan CORS situs web tidak dikonfigurasi dan diterapkan dengan baik. CORS bukan perlindungan terhadap serangan lintas-asal seperti pemalsuan permintaan lintas situs (CSRF).

Kebijakan sumber yang sama adalah spesifikasi lintas asal sumber yang membatasi situs web untuk berinteraksi dengan sumber daya di luar domain asal sumber. Kebijakan asal yang sama didefinisikan bertahun-tahun yang lalu sebagai tanggapan terhadap interaksi lintas domain yang berpotensi berbahaya, seperti satu situs web mencuri data pribadi dari yang lain.

Biasanya memungkinkan domain untuk mengeluarkan permintaan ke domain lain, tetapi tidak untuk mengakses tanggapan.

Kebijakan asal yang sama sangat membatasi dan akibatnya berbagai pendekatan telah dirancang untuk menghindari kendala. Dalam industri banyak situs web berinteraksi dengan subdomain atau situs pihak ketiga dengan cara yang memerlukan akses lintas-asal secara penuh. dari kebijakan sumber asal yang sama dimungkinkan menggunakan berbagi sumber daya lintas-asal (CORS).

Protokol berbagi sumber daya lintas-asal menggunakan header HTTP sebagai menentukan asal web tepercaya dan properti terkait seperti apakah akses terotentikasi diizinkan. Biasa digabungkan dalam pertukaran header antara browser dan situs web lintas-asal yang diakses.

Implementasi Cross-Origin Resource Sharing

untuk melakukan implementasi nya kita membuat dengan bahasa pemrograman Javascript dan menggunakan micro framework ExpressJS

const express = require('express');
const request = require('request');

const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

app.get('/users', (req, res) => {
  request({ url: 'https://reqres.in/api/users' }, (error, response, body) => {
    if (error || response.statusCode !== 200) {
      return res.status(500).json({ type: 'error', message: err.message });
    }

    res.json(JSON.parse(body));
  });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () =>
  console.log(`Menjalankan Aplikasi ExpressJS di ${PORT}`)
);

penjelasan :

• res.header('Access-Control-Allow-Origin', '*'); : bagian ini untuk mengeset response header dan jika di ExpressJS akan melakukan override di bagian middleware, sehingga response yang akan diterima oleh client bagian header akan Access-Control-Allow-Origin: *

Perbedaan Same-Origin Policy dengan Cross-Origin Resource Sharing

Ada dua sebuah kebijakan yang membantu browser untuk melindungi dari pengguna yang berpotensi dari serangan cyber melalui sebuah kode yang dimuat secara dinamis. Maka ada sebuah Kebijakan Sumber yang sama secara standar operasional dan untuk berbagi sumber yang melintasi sumber asalnya. Secara umum, maka dilarang membaca data dari sumber lain sehingga memungkinkan browser hanya bisa meminta sumber daya atau resource dari asal yang sama. jika anda akan melanggar sebuat standar operasional atau SOP maka meminta sumber daya dari asal yang berbeda. Misalnya, kita meminta data dari https://google.com ke https://pemburukode.com biasanya melanggar SOP karena asalnya tidak yang sama.

Ini akan mengalahkan tujuan dan kekuatan web jika anda tidak dapat mengambil data dari sumber lain. Untungnya, Cross-Origin Resource Sharing (CORS) memungkinkan pengecualian untuk SOP dan mengizinkan permintaan lintas-sumber dibuat.Ada tiga permintaan utama yang digunakan dalam permintaan lintas sumber.

List Header Request pada CORS

Accept, Accept-Language, Content-Language, dan Content-Type adalah header permintaan CORS-safelisted atau yang artinya aman untuk digunakan secara umum. Ketika sebuah header HTTP berisi berisikan tersebut, permintaan atau Request HTTP tidak perlu mengirim permintaan preflight ke sebuah server web dalam konteks CORS. ketika Lebih banyak header maka dapat dimasukkan ke daftar yang cukup aman bagi menggunakan header Access-Control-Allow-Headers.Dari sebuah header harus mengikuti persyaratan tertentu untuk menjadi header CORS yang aman. Persyaratannya adalah:

• Header Accept-Language dan Content-Language: Hanya boleh memiliki nilai yang terdiri dari 0-9, a-z, A-Z, spasi atau * - . ; , =
• Header Accept dan Content-Type: tidak boleh berisikan type byte header CORS-unsafe
• Content-Type: hanya perlu memiliki tipe MIME dari nilai parsingnya baik application/x-www-form-urlencoded atau multipart/form-data dan text/plain

Daftar Response header sebuah CORS

adalah sebuah Header HTTP dalam respons CORS, yang menggambarkan bahwa sebuah respons dianggap sudah aman untuk diekspos ke skrip dari sisi klien. Hanya respons yang terdaftar aman yang tersedia untuk halaman web. berikut ini header response CORS-safelisted :

• Content-Length
• Cache-Control
• Content-Language
• Expires
• Content-Type
• Last-Modified
• Pragma

selain itu dapat kita perluas daftar header response CORS-safelisted dengan menentukan header di bagian HTTP header bagian Access-Control-Expose-Headers.