Merkezler Arası Kaynak Paylaşımı (CORS)

Kaynaklar arası kaynakları güvenli bir şekilde paylaşın

Mariko Kosaka
X

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
İstemci isteği ve sunucu yanıtı çizimi.

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.

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 veya Content-Language dışında üstbilgiler içeren istek.
  • application/x-www-form-urlencoded, multipart/form-data veya text/plain dışında bir Content-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.