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 pada interaksi antara resource ini, dan skrip disusupi oleh penyerang, skrip tersebut dapat mengekspos semua hal 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 sepanjang waktu". Browser mengizinkan beberapa tag untuk menyisipkan resource dari asal yang berbeda. Kebijakan ini sebagian besar merupakan artefak historis dan dapat mengekspos situs Anda ke kerentanan seperti clickjacking menggunakan iframe. Anda dapat membatasi pembacaan lintas origin tag ini menggunakan Kebijakan Keamanan Konten.
Apa yang dianggap berasal dari 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 memiliki origin yang sama. Misalnya,
http://www.example.com/foo memiliki asal 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?
Secara umum, penyematan resource lintas-asal diizinkan, sedangkan membaca resource lintas-asal 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-asal dapat digunakan sebagai nilai atribut action elemen formulir. Aplikasi web dapat menulis data formulir ke tujuan lintas-asal.
|
| gambar | Menyematkan gambar lintas origin diizinkan. Namun, membaca data gambar lintas-asal (seperti mengambil data biner dari gambar lintas-asal menggunakan JavaScript) akan diblokir. |
| multimedia |
Video dan audio lintas-asal 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 - Penilaian Think and Check
Cara mencegah Clickjacking
Serangan yang disebut "clickjacking" menyematkan situs di iframe dan menempatkan
tombol transparan yang ditautkan ke tujuan lain. Pengguna tertipu
sehingga mengira 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 direktif
frame-ancestors
ke header HTTP.
Atau, Anda dapat menambahkan X-Frame-Options ke header HTTP, lihat
MDN
untuk mengetahui daftar opsi.
Rangkuman
Semoga Anda merasa sedikit lega karena browser bekerja keras untuk menjadi penjaga keamanan di web. Meskipun browser mencoba untuk 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.