Dalam codelab ini, lihat cara kerja origin yang sama saat mengambil resource.
Penyiapan: Ambil halaman dari origin yang sama
Demo ini diselenggarakan 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 asal yang sama, Anda akan melihat 200 ditampilkan di pratinjau langsung.
1. Ambil halaman dari origin yang berbeda
Coba ubah URL pengambilan ke 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 data lintas asal resource meskipun mereka telah mengambil alih kendali 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 memiliki origin yang berbeda, tetapi Anda akan melihat kode status 200. Mengapa? Aplikasi web modern sering meminta resource lintas origin untuk dimuat skrip pihak ketiga atau membuat kueri endpoint API. Untuk mengakomodasi kasus penggunaan ini, ada mekanisme yang disebut CORS (Cross Origin Resource Sharing) untuk memberi tahu browser yang mengizinkan pemuatan resource lintas origin. Baca artikel Berbagi resource lintas asal dengan aman untuk mendapatkan informasi lebih lanjut tentang CORS.