Same Origin Policy (SOP) adalah mekanisme keamanan fundamental dalam arsitektur peramban web (browser) yang membatasi bagaimana sebuah dokumen atau skrip yang berasal dari satu origin dapat berinteraksi dengan sumber daya dari origin lain. Tujuan utamanya adalah untuk mengisolasi potensi dokumen berbahaya dan mencegah serangan siber lintas situs, seperti pencurian data sesi atau pembajakan informasi sensitif.
Sebuah origin didefinisikan secara ketat berdasarkan kombinasi tiga komponen utama URL: skema (protocol), domain (host), dan nomor port. Jika salah satu dari ketiga elemen ini berbeda antara dua alamat web, maka peramban akan menganggap keduanya berasal dari origin yang berbeda dan memberlakukan pembatasan akses secara otomatis.
Komponen Penentu Origin
Untuk memahami bagaimana peramban menentukan batasan SOP, perhatikan contoh perbandingan URL berikut terhadap basis URL utama: https://example.com:443/dir/page.html.
| URL Pembanding | Status Origin | Keterangan Perbedaan |
|---|---|---|
https://example.com:443/dir/other.html |
Sama (Same Origin) | Skema, host, dan port identik. Jalur (path) berbeda diizinkan. |
http://example.com:443/dir/page.html |
Berbeda (Cross-Origin) | Skema berbeda (menggunakan http alih-alih https). |
https://api.example.com:443/page.html |
Berbeda (Cross-Origin) | Domain/host berbeda (menggunakan sub domain api). |
https://example.com:8080/page.html |
Berbeda (Cross-Origin) | Nomor port berbeda (8080 alih-alih standar 443). |
Mekanisme Kerja dan Pengecualian
Secara default, Same Origin Policy membatasi operasi pembacaan (read), seperti pengambilan data melalui skrip JavaScript (misalnya menggunakan metode fetch atau XMLHttpRequest). Namun, beberapa elemen HTML diizinkan melakukan penyematan lintas sumber (cross-origin embedding) demi fungsionalitas web modern, meskipun dengan batasan akses konten di dalamnya:
- <script src="...">: Memungkinkan eksekusi skrip JavaScript dari domain eksternal (biasanya digunakan untuk CDN atau pustaka pihak ketiga).
- <link rel="stylesheet" href="...">: Memungkinkan pemuatan lembar gaya (CSS) dari domain lain.
- <img>, <video>, <audio>: Memungkinkan penyematan media visual dan audio lintas domain.
- <iframe>: Memungkinkan penyematan halaman web lain, meskipun interaksi DOM lintas bingkai dibatasi secara ketat kecuali dikonfigurasi secara khusus.
Solusi Akses Lintas Domain: CORS
Karena aplikasi web modern sering kali harus mengambil data dari server yang berbeda (misalnya memisahkan peladen frontend dan backend API), Same Origin Policy dapat menjadi hambatan jika tidak diatur dengan benar. Untuk mengatasi hal ini, diperkenalkan mekanisme standar yang disebut Cross-Origin Resource Sharing (CORS).
CORS menggunakan serangkaian header HTTP khusus—seperti Access-Control-Allow-Origin—yang dikirimkan oleh server untuk memberi tahu peramban apakah domain tertentu diizinkan untuk membaca sumber daya yang diminta. Tanpa konfigurasi CORS yang tepat pada server tujuan, permintaan data lintas origin akan diblokir oleh peramban demi menjaga keamanan pengguna.