Bu codelab'de, kaynakları getirirken aynı kaynağın nasıl çalıştığını göreceksiniz.
Kurulum: 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 adresinden kaynak yüklemek için fetch kullanır. index.html ve fetch.html aynı kaynağı paylaştığından canlı önizlemede 200 gösterilir.
1. Farklı kaynaktan sayfa 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ının getirme isteğini engellemesi gerekirdi. Bu, bir saldırganın kullanıcının tarayıcısının kontrolünü ele geçirse bile çapraz kaynaklı kaynakları okuyamayacağı anlamına gelir.
2. Çapraz kaynaklı bir kaynağı 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örmeniz gerekir. Neden? Modern web uygulamaları, üçüncü taraf komut dosyalarını yüklemek veya bir API uç noktasını sorgulamak için genellikle çapraz kaynak istekleri gönderir. Bu kullanım alanlarını desteklemek için tarayıcıya çapraz kaynaklı bir kaynağın 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 Çapraz kaynaklı kaynakları güvenli bir şekilde paylaşma başlıklı makaleyi inceleyin.