Dalam codelab ini, lihat cara kerja origin yang sama saat mengambil resource.
Penyiapan: Mengambil halaman dari origin yang sama
Demo dihosting di https://same-origin-policy-fetch.glitch.me.
Halaman web sederhana ini menggunakan fetch untuk memuat resource dari https://same-origin-policy-fetch.glitch.me/fetch.html. Karena index.html dan fetch.html memiliki origin yang sama, Anda akan melihat 200 ditampilkan di pratinjau langsung.
1. Mengambil halaman dari origin yang berbeda
Coba ubah URL pengambilan menjadi https://www.google.com.
Apa yang Anda lihat di pratinjau langsung?
Browser seharusnya memblokir permintaan pengambilan karena Anda meminta resource dari origin yang berbeda. Artinya, penyerang tidak dapat membaca resource lintas origin meskipun mereka telah mengontrol browser pengguna.
2. Mengambil resource lintas origin
Coba ubah URL pengambilan menjadi https://api.thecatapi.com/v1/images/search.
Apa yang Anda lihat di pratinjau langsung?
URL pengambilan berasal dari origin yang berbeda, tetapi Anda akan melihat kode status 200. Mengapa? Aplikasi web modern sering kali meminta resource lintas origin untuk memuat skrip pihak ketiga atau mengkueri endpoint API. Untuk mengakomodasi kasus penggunaan ini, ada mekanisme yang disebut CORS (Cross Origin Resource Sharing) untuk memberi tahu browser bahwa pemuatan resource lintas origin diizinkan. Lihat Membagikan resource lintas origin dengan aman untuk mengetahui informasi selengkapnya tentang CORS.