Kebijakan origin yang sama adalah fitur keamanan browser yang membatasi cara dokumen dan skrip di satu origin dapat berinteraksi dengan resource di origin lainnya.
Browser dapat memuat dan menampilkan resource dari beberapa situs sekaligus. Anda mungkin membuka beberapa tab secara bersamaan, atau sebuah situs dapat menyematkan beberapa iframe dari situs yang berbeda. Jika tidak ada batasan pada interaksi antara resource ini dan skrip disusupi oleh penyerang, skrip dapat mengekspos semua yang ada di browser pengguna.
Kebijakan origin yang sama mencegah hal ini terjadi dengan memblokir akses baca ke resource yang dimuat dari origin yang berbeda. "Tetap tunggu", Anda berkata, "Saya memuat gambar dan skrip dari sumber lain sepanjang waktu." Browser memungkinkan beberapa tag untuk menyematkan resource dari asal yang berbeda. Kebijakan ini sebagian besar merupakan artefak historis dan dapat membuat situs Anda rentan terhadap kerentanan seperti clickjacking menggunakan iframe. Anda dapat membatasi pembacaan lintas origin tag ini menggunakan Kebijakan Keamanan Konten.
Apa yang dianggap sebagai origin yang sama?
Origin ditentukan oleh skema (juga dikenal sebagai protokol, misalnya HTTP atau HTTPS), port (jika ditentukan), dan host. Jika ketiganya sama untuk dua URL, URL tersebut dianggap sebagai origin yang sama. Misalnya,
http://www.example.com/foo adalah origin yang sama dengan
http://www.example.com/bar,
tetapi bukan https://www.example.com/bar
karena skemanya berbeda.
Apa yang diizinkan dan apa yang diblokir?
Umumnya, menyematkan resource lintas origin diizinkan, sedangkan pembacaan resource lintas origin akan diblokir.
| iframe |
Penyematan lintas-asal biasanya diizinkan (bergantung pada perintah X-Frame-Options), tetapi pembacaan lintas asal (seperti menggunakan JavaScript untuk mengakses dokumen dalam iframe) tidak diizinkan.
|
| CSS |
CSS lintas origin dapat disematkan menggunakan elemen <link> atau @import dalam file CSS. Header Content-Type yang benar mungkin diperlukan.
|
| formulir |
URL lintas origin dapat digunakan sebagai nilai atribut action dari elemen formulir. Aplikasi web dapat menulis data formulir ke tujuan lintas origin.
|
| gambar | Penyematan gambar lintas origin diizinkan. Namun, membaca data gambar lintas origin (seperti mengambil data biner dari gambar lintas origin menggunakan JavaScript) akan diblokir. |
| multimedia |
Video dan audio lintas origin dapat disematkan menggunakan elemen <video> dan <audio>.
|
| skrip | Skrip lintas-asal dapat disematkan. Namun, akses ke API tertentu (seperti permintaan pengambilan lintas asal) mungkin diblokir. |
TODO: DevSite - Pikirkan dan Periksa penilaian
Cara mencegah Clickjacking
Serangan yang disebut "clickjacking" menyematkan situs di iframe dan menempatkan tombol transparan yang tertaut ke tujuan yang berbeda. Pengguna tertipu
dengan berpikir bahwa mereka mengakses aplikasi Anda saat mengirim data kepada
penyerang.
Untuk memblokir situs lain agar tidak menyematkan situs Anda di iframe, tambahkan kebijakan keamanan konten dengan perintah frame-ancestors ke header HTTP.
Atau, Anda dapat menambahkan X-Frame-Options ke header HTTP, lihat MDN untuk daftar opsi.
Penutup
Semoga Anda merasa sedikit lega karena {i>browser<i} bekerja keras untuk menjadi penjaga gerbang keamanan di web. Meskipun browser berupaya aman dengan memblokir akses ke resource, terkadang Anda ingin mengakses resource lintas origin di aplikasi. Dalam panduan berikutnya, pelajari Cross-Origin Resource Sharing (CORS) dan cara memberi tahu browser bahwa pemuatan resource lintas origin diizinkan dari sumber tepercaya.