Kebijakan origin yang sama adalah fitur keamanan browser yang membatasi cara dokumen dan skrip di satu origin dapat berinteraksi dengan resource di origin lain.
Browser dapat memuat dan menampilkan resource dari beberapa situs sekaligus. Anda mungkin membuka beberapa tab secara bersamaan, atau situs dapat menyematkan beberapa iframe dari situs yang berbeda. Jika tidak ada batasan interaksi antara resource ini, dan skrip disusupi oleh penyerang, skrip tersebut 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. "Tapi tunggu," kata Anda, "Saya memuat gambar dan skrip dari origin lain setiap saat." Browser mengizinkan beberapa tag untuk menyematkan resource dari origin yang berbeda. Kebijakan ini sebagian besar merupakan artefak historis dan dapat membuat situs Anda rentan terhadap kerentanan seperti pembajakan klik 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, keduanya dianggap memiliki origin yang sama. Misalnya,
http://www.example.com/foo adalah origin yang sama dengan
http://www.example.com/bar,
tetapi tidak dengan https://www.example.com/bar
karena skemanya berbeda.
Apa yang diizinkan dan apa yang diblokir?
Umumnya, penyematan resource lintas origin diizinkan, sedangkan pembacaan resource lintas origin diblokir.
| iframe |
Penyematan lintas origin biasanya diizinkan (bergantung pada perintah X-Frame-Options), tetapi pembacaan lintas origin (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 elemen formulir. Aplikasi web dapat menulis data formulir ke tujuan lintas origin.
|
| gambar | Menyematkan gambar lintas origin diizinkan. Namun, pembacaan data gambar lintas origin (seperti mengambil data biner dari gambar lintas origin menggunakan JavaScript) diblokir. |
| multimedia |
Video dan audio lintas origin dapat disematkan menggunakan elemen <video> dan <audio>.
|
| skrip | Skrip lintas origin dapat disematkan; namun, akses ke API tertentu (seperti permintaan pengambilan lintas origin) mungkin diblokir. |
TODO: DevSite - Think and Check assessment
Cara mencegah clickjacking
Serangan yang disebut "clickjacking" menyematkan situs dalam iframe dan menempatkan
tombol transparan yang tertaut ke tujuan lain. Pengguna ditipu
sehingga mengira bahwa mereka mengakses aplikasi Anda saat mengirim data ke
penyerang.
Untuk memblokir situs lain agar tidak menyematkan situs Anda dalam 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 mengetahui daftar opsinya.
Rangkuman
Semoga Anda merasa sedikit lega karena browser bekerja keras untuk menjadi penjaga keamanan di web. Meskipun browser mencoba menjaga keamanan dengan memblokir akses ke resource, terkadang Anda ingin mengakses resource lintas origin di aplikasi Anda. Dalam panduan berikutnya, pelajari Cross-Origin Resource Sharing (CORS) dan cara memberi tahu browser bahwa pemuatan resource lintas origin diizinkan dari sumber tepercaya.