Dalam codelab ini, lihat cara kerja origin yang sama saat mengambil resource.
Penyiapan: Mengambil halaman dari origin yang sama
Demo 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 origin 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 asal yang berbeda. Artinya, penyerang tidak dapat membaca resource lintas origin meskipun telah mengambil alih 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 asal yang berbeda, tetapi Anda akan melihat kode status 200. Mengapa? Aplikasi web modern sering meminta resource lintas origin untuk memuat 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 bahwa pemuatan resource lintas asal diizinkan. Lihat Membagikan resource lintas origin dengan aman untuk mengetahui informasi selengkapnya tentang CORS.