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 asal 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 telah memblokir permintaan pengambilan karena Anda meminta resource dari origin yang berbeda. Artinya, penyerang tidak dapat membaca resource lintas origin meskipun telah mengambil alih kontrol browser pengguna.
2. Mengambil resource lintas-asal
Coba ubah URL pengambilan menjadi https://api.thecatapi.com/v1/images/search.
Apa yang Anda lihat di pratinjau langsung?
URL pengambilan berasal dari sumber yang berbeda, tetapi Anda akan melihat kode status 200. Mengapa? Aplikasi web modern sering meminta resource lintas-asal 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-asal dengan aman untuk mengetahui informasi selengkapnya tentang CORS.