Kaynaklar arası kaynakları güvenli bir şekilde paylaşın
Tarayıcının aynı kaynak politikası, farklı bir kaynaktan kaynak okumayı engeller. Bu mekanizma, kötü amaçlı sitelerin diğer sitelerin verilerini okumasını engeller ancak meşru kullanımları da engeller.
Modern web uygulamaları genellikle kaynakları farklı bir kaynaktan almak ister. Örneğin, farklı bir alandan JSON verileri almak veya başka bir sitedeki görüntüleri bir <canvas>
öğesine yüklemek ister. Bunlar herkesin okuması gereken herkese açık kaynaklar olabilir ancak aynı kaynak politikası bunların kullanımını engeller. Geliştiriciler geçmişte JSONP gibi geçici çözümler kullanmıştır.
Ortamlar Arası Kaynak Paylaşımı (CORS), bu sorunu standart bir şekilde çözer. CORS'yi etkinleştirmek, sunucunun tarayıcıya ek bir kaynak kullanabileceğini söylemesini sağlar.
Kaynak isteği web'de nasıl çalışır?
![istek ve yanıt](https://web.dev/static/articles/cross-origin-resource-sharing/image/request-response.png?authuser=6&hl=tr)
Tarayıcı ve sunucu, Köprü Metni Aktarım Protokolü'nü (HTTP) kullanarak ağ üzerinden veri alışverişi yapabilir. HTTP, kaynak almak için gereken bilgiler de dahil olmak üzere istek sahibi ile yanıt veren arasındaki iletişim kurallarını tanımlar.
HTTP üst bilgisi, istemci ile sunucu arasındaki mesaj alışverişini gerçekleştirir ve erişimi belirlemek için kullanılır. Hem tarayıcının isteği hem de sunucunun yanıt mesajı, bir header ve bir body şeklinde ikiye ayrılır.
Başlık
Mesajın türü veya kodlaması gibi mesajla ilgili bilgilerdir. Bir başlık, anahtar/değer çiftleri olarak ifade edilen çeşitli bilgiler içerebilir. İstek başlığı ve yanıt başlığı farklı bilgiler içerir.
Örnek istek başlığı
Accept: text/html
Cookie: Version=1
Bu üstbilgi, "Yanıt olarak HTML almak istiyorum. İşte bir çerezim."
Örnek yanıt başlığı
Content-Encoding: gzip
Cache-Control: no-store
Bu başlık, "Bu yanıttaki veriler gzip ile kodlanmıştır. Bunu önbelleğe alma."
Metin
İletinin kendisi. Bu, düz metin, ikili resim, JSON, HTML veya daha birçok biçim olabilir.
CORS nasıl çalışır?
Aynı kaynak politikası, tarayıcıya kaynaklar arası istekleri engellemesini bildirir. Farklı bir kaynaktan herkese açık bir kaynağa ihtiyacınız olduğunda, kaynak sağlayan sunucu tarayıcıya, isteği gönderen kaynağın kaynağına erişebileceğini bildirir. Tarayıcı bunu hatırlar ve o kaynak için kaynaklar arası kaynak paylaşımına izin verir.
1. Adım: istemci (tarayıcı) isteği
Tarayıcı, çapraz kaynak isteğinde bulunduğunda, geçerli kaynağı (şema, ana makine ve bağlantı noktası) içeren bir Origin
üstbilgisi ekler.
2. Adım: Sunucu yanıtı
Bir sunucu bu üst bilgiyi görüp erişime izin vermek istediğinde yanıta, istekte bulunan kaynağı (veya herhangi bir kaynağa izin vermek için *
) belirten bir Access-Control-Allow-Origin
üst bilgisi ekler.
3. Adım: Tarayıcı yanıt alır
Tarayıcı bu yanıtı uygun bir Access-Control-Allow-Origin
üst bilgisiyle gördüğünde, yanıt verilerini istemci sitesiyle paylaşır.
Kimlik bilgilerini CORS ile paylaş
Gizlilik nedeniyle, CORS normalde anonim isteklerde kullanılır ve bu isteklerde istekte bulunan kişinin kimliği belirlenmez. Göndereni tanımlayabilen CORS kullanırken çerezler göndermek istiyorsanız istek ve yanıta ek başlıklar eklemeniz gerekir.
İstek
Getirme seçeneklerine aşağıdaki örnekte olduğu gibi credentials: 'include'
ekleyin.
Buna, isteğe sahip aşağıdaki çerez dahildir:
fetch('https://example.com', {
mode: 'cors',
credentials: 'include'
})
Yanıt
Access-Control-Allow-Origin
, belirli bir kaynağa ayarlanmalıdır (*
kullanılarak joker karakter kullanılamaz) ve Access-Control-Allow-Credentials
, true
olarak ayarlanmalıdır.
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true
Karmaşık HTTP çağrıları için ön kontrol istekleri
Bir web uygulaması karmaşık bir HTTP isteğinde bulunduğunda tarayıcı, istek zincirinin başına ön kontrol isteği ekler.
CORS spesifikasyonu aşağıdaki şekilde karmaşık bir isteği tanımlar:
- GET, POST veya HEAD dışındaki yöntemleri kullanan bir istek.
Accept
,Accept-Language
veyaContent-Language
dışında üstbilgiler içeren istek.application/x-www-form-urlencoded
,multipart/form-data
veyatext/plain
dışında birContent-Type
başlığı olan istek.
Tarayıcılar gerekli ön kontrol isteklerini otomatik olarak oluşturur ve asıl istek mesajından önce gönderir. Ön kontrol isteği, aşağıdaki örnektekine benzer bir OPTIONS
isteğidir:
OPTIONS /data HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: DELETE
Sunucu tarafında, isteği alan uygulama, ön kontrol isteğine uygulamanın şu kaynaktan kabul ettiği yöntemler hakkında bilgi vererek yanıt verir:
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, DELETE, HEAD, OPTIONS
Sunucu yanıtı, ön kontrol sonuçlarını önbelleğe alma süresini saniye cinsinden belirtmek için bir Access-Control-Max-Age
üst bilgisi de içerebilir. Bu, istemcinin yayın öncesi isteğini tekrarlamak zorunda kalmadan birden çok karmaşık istek göndermesine olanak tanır.