Cara menggunakan CORS dengan Nginx

Apa itu CORS

CORS, juga dikenal sebagai berbagi sumber daya lintas asal adalah teknik yang digunakan di browser web modern yang mengontrol akses ke sumber daya yang dihosting di server web. CORS menggunakan header tambahan seperti Origin, access-control-origin, dan banyak lagi untuk menentukan apakah resource yang diminta memiliki izin untuk dikirim ke browser. Tujuan utama CORS adalah untuk mencegah aplikasi web yang berjalan di browser web mengakses sumber daya yang dihosting di asal yang berbeda ketika tidak ada izin, apa artinya aplikasi web tidak dapat mengunduh sumber daya, seperti gambar, skrip, seperti css konten apa pun, dll. ketika mereka tidak di-host di Asal yang sama (biasanya semua harus dalam domain yang sama) sebagai aplikasi web kecuali server dikonfigurasi untuk mengizinkan perilaku ini. Dengan memiliki implementasi ini di browser web, pengguna dapat melindungi data mereka dari pihak yang tidak berwenang. Seorang peretas dapat secara diam-diam memodifikasi halaman web saat berada di tengah koneksi untuk mengganggu bisnis pengguna atau mendapatkan akses ke data berharga. Namun, ada keuntungan dari CORS juga, seperti memungkinkan pengembang untuk memuat sumber daya dari sumber yang berbeda karena efektivitas biaya, atau hanya kenyamanan. Dalam hal ini mereka harus memodifikasi server web mereka untuk mengizinkan permintaan seperti itu. Artikel ini menunjukkan cara menyelesaikannya di server web Nginx dengan mudah.

Apa yang Memicu Permintaan CORS

Tidak semua permintaan memicu permintaan CORS karena biasanya sumber daya dihosting di asal yang sama dengan aplikasi web. Jika berbeda, maka CORS terpicu. CORS memiliki dua jenis permintaan, permintaan sederhana dan permintaan pra-penerbangan CORS.

Permintaan Sederhana berfungsi sebagai permintaan biasa, browser web mengirimkan permintaan ke server untuk mengunduh sumber daya tertentu ketika pengguna memulainya, kemudian server web memeriksa asal permintaan, membandingkannya dengan aturan di server web, jika itu cocok, sumber daya disediakan. Jenis permintaan ini menggunakan header OIRIGN, dan ACCESS-CONTROL-ALLOW-ORIGIN untuk menentukan apakah sumber daya harus dipasok atau tidak. Permintaan sederhana hanya dipicu jika metode permintaan seperti GET, HEAD, POST digunakan, dan header seperti Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width digunakan. Meski begitu, tidak semua tipe konten memicu permintaan sederhana. Di sini hanya tipe pengkodean formulir yang memicu permintaan sederhana.

Jenis permintaan pra-penerbangan agak berbeda karena tidak ada akses langsung ke sumber daya di babak pertama. Ketika kondisi yang disebutkan di atas diubah entah bagaimana, baik dengan menggunakan header permintaan yang berbeda atau tipe konten yang berbeda, permintaan pra-penerbangan dipicu. Dalam permintaan Pra-penerbangan, browser web pertama-tama memastikan dapat mengakses sumber daya dengan berkomunikasi dengan browser web, kemudian ketika browser web menjawab dengan respons oke (HTTP 200), kemudian mengirimkan permintaan lain untuk mengunduh sumber daya. Ini menggunakan metode permintaan OPSI HTTP untuk memulai permintaan pertama, kemudian menggunakan GET, POST seperti jenis permintaan untuk mengunduh sumber daya.

Cara Mengonfigurasi Nginx untuk Mendukung Permintaan CORS

Bagian ini menunjukkan cara mengonfigurasi server web nginx untuk mengizinkan berbagi sumber daya lintas asal. Ini hanya dapat dilakukan jika pengembang memiliki akses ke server web, karena melibatkan modifikasi file konfigurasi Nginx.

Gunakan cuplikan kode sederhana berikut untuk mengizinkan permintaan CORS. Ini harus disalin ke file default layanan nginx di Ubuntu atau platform lainnya.

lokasi \
if ($request_method = 'OPTIONS')
add_header 'Access-Control-Allow-Origin' 'https://localhost;
add_header 'Access-Control-Allow-Methods"POST, OPTIONS';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type"text/plain; charset=utf-8';
kembali 204;

if ($request_method = 'POST')
add_header 'Access-Control-Allow-Origin"https://localhost;
add_header 'Access-Control-Allow-Methods' 'POST';

Cuplikan kode dasar berjalan seperti di atas. Ini berisi arahan seperti request_method, add_header untuk mengidentifikasi jenis permintaan, dan mengatur header respons untuk dibaca browser masing-masing. Header Access-control-allow-origin mendefinisikan asal sumber yang memiliki akses, misalnya jika aplikasi web yang dihosting di github ingin mengakses gambar yang dihosting di myOwnServer.com, maka URL github harus digunakan sebagai nilai direktif Access-control-allow-Origin di myOwnServer.com, lalu setiap kali aplikasi web yang dihosting di github mengirimkan permintaan ke myOwnServer.com untuk mengunduh file gambar, semua yang diminta ini diberikan izin. Header Access-control-allow-method mendefinisikan jenis permintaan apa yang didukung oleh aplikasi web yang mengirim permintaan, kemudian header lainnya untuk usia maksimalnya untuk menyimpan permintaan, dan tipe konten yang didukung.

Seperti dijelaskan di atas, setelah permintaan OPTION selesai, browser mengirimkan permintaan lain untuk mengunduh sumber daya jika permintaan pertama berhasil, header-nya ditetapkan dalam metode request_pertama jika tanda kurung.

Selain arahan di atas, ada beberapa arahan penting lainnya di Nginx yang dapat digunakan dalam permintaan CORS. Salah satu arahan yang paling penting adalah access-control-allow-header, yang dilakukannya adalah mengatur header respons dengan nama header yang diizinkan untuk diverifikasi oleh browser. Aplikasi web dapat memiliki headernya sendiri untuk berbagai tujuan, dan jika header tersebut ada dalam permintaan berikutnya setelah permintaan OPTIONS awal, maka semua header ini harus diizinkan oleh server web sebelum sumber daya yang diminta dibagikan.

Sangat penting bahwa cuplikan kode ini berada di tempat yang tepat di file default Nginx, karena Nginx mengeksekusi blok lokasi yang berbeda tergantung pada URL yang cocok, jika blok lokasi tersebut tidak berisi cuplikan kode ini, maka itu tidak dieksekusi sama sekali, dan oleh karena itu penting untuk menggunakan ini di semua blok lokasi untuk sisi yang aman. Beberapa blok lokasi penting adalah Gambar, PHP (~ \.php$), CSS, dll… blok.

Setelah cuplikan kode tersebut di atas disimpan, simpan file Nginx, dan muat ulang layanan Nginx agar perubahan diterapkan.

Kesimpulan

CORS, dikenal sebagai berbagi sumber daya lintas asal, dan merupakan teknik untuk mengontrol akses sumber daya. Sumber daya ini dapat berupa file apa saja dari gambar ke file javascript. Tujuan utama CORS adalah untuk memperketat keamanan aplikasi web untuk mencegah serangan man in the middle. Namun, CORS dapat memiliki manfaat juga. Dalam hal ini, CORS harus dihidupkan karena tidak diizinkan secara default. Jenis permintaan CORS dasar adalah jenis permintaan sederhana, hanya menggunakan ORIGIN, dan arahan ACCESS-CONTROL-ALLOW-ORIGIN, dan dengan bantuan itu Nginx dapat memberikan izin kepada browser web untuk mengakses sumber daya yang diminta tergantung pada asalnya. Bagaimanapun CORS cukup berguna dan harus digunakan dengan hati-hati.