Aynı Kaynak Politikası ve Getirme istekleri

Mariko Kosaka

Bu codelab'de, kaynakları getirirken aynı kaynağın nasıl çalıştığını öğrenin.

Demo https://same-origin-policy-fetch.glitch.me adresinde barındırılmaktadır. Bu basit web sayfası, https://same-origin-policy-fetch.glitch.me/fetch.html kaynağından kaynak yüklemek için fetch yöntemini kullanır. index.html ve fetch.html aynı kaynağı paylaştığından canlı önizlemede 200 gösterilir.

1. Farklı kaynaktan sayfa getir

Getirme URL'sini https://www.google.com olarak değiştirmeyi deneyin. Canlı önizlemede ne görüyorsunuz?

Bir kaynak istediğiniz için tarayıcının getirme isteğini engellemiş olması gerekir bir sorun olduğu görülüyor. Bu, saldırganların kaynaklar arası verileri okuyamayacağı anlamına gelir. bir kullanıcının tarayıcısının kontrolünü ele geçirmiş olsalar bile kaynakları.

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 kaynak ancak durum kodu olarak 200'ü görmeniz gerekir. Neden? Modern web uygulamaları, yüklenmesi için genellikle çapraz kaynak üçüncü taraf komut dosyalarını kullanabilir veya API uç noktasını sorgulayabilirsiniz. Bu kullanım alanlarına uygun olması için Kaynaklar Arası Kaynak Paylaşımı adlı CORS (Kaynaklar Arası Kaynak Paylaşımı) adı verilen başlangıç noktasının yüklenmesine izin verildiğini tarayıcı olarak ayarlayın. CORS hakkında daha fazla bilgi için Kaynaklar arası kaynakları güvenli bir şekilde paylaşma başlıklı makaleyi inceleyin.