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

Kökler arası kaynakları güvenli bir şekilde paylaşma

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ı önler, ama meşru kullanımları da önler.

Modern web uygulamaları genellikle farklı bir kaynaktan kaynak almak ister. Örneğin, farklı bir alandan JSON verileri almak veya başka bir sitedeki resimleri bir <canvas> öğesine yüklemek gibi. Bunlar, herkesin okuyabileceği 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 kullanıyordu.

Merkezler arası kaynak paylaşımı (CORS) bu sorunu standart bir şekilde düzeltir. CORS'u etkinleştirmek, sunucunun tarayıcıya ek bir kaynak kullanabileceğini söylemesine olanak tanır.

Web'de kaynak isteği nasıl çalışır?

istek ve yanıt
Görselleştirilmiş istemci isteği ve sunucu yanıtı.

Tarayıcı ve sunucu, Hypertext Aktarım Protokolü'nü (HTTP) kullanarak ağ üzerinden veri alışverişi yapabilir. HTTP, kaynak almak için hangi bilgilerin gerekli olduğu da dahil olmak üzere istek gönderen ile yanıt veren arasındaki iletişim kurallarını tanımlar.

HTTP başlığı, istemci ile sunucu arasındaki mesaj alışverişini görüşür ve erişimi belirlemek için kullanılır. Hem tarayıcının isteği hem de sunucunun yanıt mesajı, bir başlık ve gövde olarak ayrılır.

İleti türü veya ileti kodlaması gibi ileti hakkında bilgiler. 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 üst bilgisi

Accept: text/html
Cookie: Version=1

Bu başlık, "Yanıt olarak HTML almak istiyorum. İşte sahip olduğum bir kurabiye."

Ö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 almayın."

Metin

İletinin kendisi. Bu, düz metin, resim ikili dosyası, JSON, HTML veya birçok başka biçim olabilir.

CORS nasıl çalışır?

Aynı kaynak politikası, tarayıcıya kaynakta çapraz isteklerin engellenmesini söyler. Farklı bir kaynaktan gelen bir herkese açık kaynağa ihtiyaç duyduğunuzda, kaynağı sağlayan sunucu tarayıcıya isteği gönderen kaynağın kaynağına erişebileceğini belirtir. Tarayıcı bunu hatırlar ve söz konusu kaynak için kaynaklar arası kaynak paylaşımına izin verir.

1. adım: istemci (tarayıcı) isteği

Tarayıcı, kaynaktan farklı bir kaynağa istek gönderdiğinde mevcut kaynağı (şema, ana makine ve bağlantı noktası) içeren bir Origin başlığı ekler.

2. Adım: sunucu yanıtı

Bir sunucu bu üst bilgiyi gördüğünde ve 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 başlığıyla gördüğünde yanıt verilerini istemci siteyle paylaşır.

Kimlik bilgilerini CORS ile paylaşma

Gizlilik nedeniyle, CORS normalde talep edenin tanımlanmadığı anonim istekler için kullanılır. Göndereni tanımlayabilen CORS'u kullanırken çerez göndermek istiyorsanız istek ve yanıta ek üstbilgiler eklemeniz gerekir.

İstek

Aşağıdaki örnekte gösterildiği gibi getirme seçeneklerine credentials: 'include' ekleyin. Bu, isteği içeren çerezi aşağıdaki gibi içerir:

fetch('https://example.com', {
  mode: 'cors',
  credentials: 'include'
})

Yanıt

Access-Control-Allow-Origin, belirli bir kaynağa (* kullanılarak joker karakter kabul edilmez) ayarlanmalı 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 uç isteklerinde bulunma

Bir web uygulaması karmaşık bir HTTP isteği gönderdiğinde tarayıcı, istek zincirinin başına bir ön uçuş isteği ekler.

CORS spesifikasyonunda karmaşık istek şu şekilde tanımlanır:

  • GET, POST veya HEAD dışındaki yöntemleri kullanan istek.
  • Accept, Accept-Language veya Content-Language dışında başlıklar içeren bir istek.
  • application/x-www-form-urlencoded, multipart/form-data veya text/plain dışında bir Content-Type başlığı içeren istek.

Tarayıcılar, gerekli tüm uçuş öncesi isteklerini otomatik olarak oluşturur ve asıl istek mesajından önce gönderir. Yayın öncesi istek, aşağıdaki örnekteki gibi 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, yayın öncesi isteğe, uygulamanın bu kaynaktan kabul ettiği yöntemler hakkındaki bilgilerle 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ın önbelleğe alınacağı süreyi saniye cinsinden belirtmek için bir Access-Control-Max-Age başlığı da içerebilir. Bu sayede istemci, uçuş öncesi isteği tekrarlamak zorunda kalmadan birden fazla karmaşık istek gönderebilir.