Bu kod laboratuvarında, kaynaklar getirilirken aynı kaynak özelliğinin nasıl çalıştığını öğrenin.
Ayarlama: Sayfayı aynı kaynaktan getirme
Demo, https://same-origin-policy-fetch.glitch.me adresinde barındırılır.
Bu basit web sayfası, https://same-origin-policy-fetch.glitch.me/fetch.html kaynağından kaynak yüklemek için fetch kullanır. index.html ve fetch.html aynı kaynağı paylaştığı için canlı önizlemede 200 gösterilir.
1. Sayfayı farklı bir kaynaktan getirme
Getirme URL'sini https://www.google.com olarak değiştirmeyi deneyin.
Canlı önizlemede ne görüyorsunuz?
Farklı bir kaynaktan kaynak istediğiniz için tarayıcı, getirme isteğini engellemiş olmalıdır. Bu, saldırganın kullanıcının tarayıcısının kontrolünü ele geçirmiş olsa bile kaynakta farklı olan kaynakları okuyamayacağı anlamına gelir.
2. Kaynaklar arası kaynak getirme
Getirme URL'sini https://api.thecatapi.com/v1/images/search olarak değiştirmeyi deneyin.
Canlı önizlemede ne görüyorsunuz?
Getirme URL'si farklı bir kaynaktır ancak 200 durum kodunu görmelisiniz. Neden? Modern web uygulamaları, üçüncü taraf komut dosyalarını yüklemek veya bir API uç noktasını sorgulamak için genellikle kaynakta çapraz kaynaklar ister. Bu kullanım alanlarına uyum sağlamak için tarayıcıya, merkezler arası kaynak yüklenmesine izin verildiğini bildiren CORS (Merkezler Arası Kaynak Paylaşımı) adlı bir mekanizma vardır. CORS hakkında daha fazla bilgi için Kaynaklar arası kaynakları güvenli bir şekilde paylaşma başlıklı makaleyi inceleyin.