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 kaynağından 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 gerekir. Bu, bir saldırganın kullanıcının tarayıcısının kontrolünü ele geçirse bile çapraz kaynak kaynaklarını 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ına uyum sağlamak için tarayıcıya çapraz kaynaklı bir kaynağın yüklenmesine izin verildiğini bildiren CORS (Çapraz 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.