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

Merkezler 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ı engeller ancak meşru kullanımları da engeller.

Modern web uygulamaları genellikle farklı bir kaynaktan kaynak almak ister. Örneğin, farklı bir alandan JSON verileri almak veya başka bir sitedeki resimleri <canvas> öğesine yüklemek. 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 gereken bilgiler de dahil olmak üzere istek gönderen ile yanıt veren arasındaki iletişim kurallarını tanımlar.

HTTP üst bilgisi, istemci ile sunucu arasındaki mesaj alışverişi için pazarlık yapar 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ığa ve gövdeye ayrılır.

İleti türü veya ileti kodlaması gibi ileti hakkında bilgiler. Başlıklar, 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 bir çerezim var."

Örnek yanıt üstbilgisi

Content-Encoding: gzip
Cache-Control: no-store

Bu başlık, "Bu yanıttaki veriler gzip ile kodlanmıştır. Don't cache this."

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 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 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 üstbilgiyi gördüğünde ve erişime izin vermek istediğinde, istek kaynağını belirten bir Access-Control-Allow-Origin üstbilgisi (veya herhangi bir kaynağa izin vermek için *) yanıta 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, genellikle istek sahibinin 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. Buna, istek içeren çerez de dahildir:

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

Yanıt

Access-Control-Allow-Origin, belirli bir kaynağa (* kullanılarak joker karakter kullanılmamalıdır) 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ışında yöntemler kullanan bir 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, uçuş öncesi isteğine bu kaynaktan kabul ettiği yöntemlerle ilgili 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ı, uçuş öncesi sonuçları önbelleğe almak için süreyi saniye cinsinden belirtmek üzere bir Access-Control-Max-Age üstbilgisi de içerebilir. Bu sayede istemci, uçuş öncesi isteği tekrarlamak zorunda kalmadan birden fazla karmaşık istek gönderebilir.