Client uygulaması(angular, react, vue...) geliştiren herkesin geliştirme sürecinde api isteğinde bulunduğunda karşılaştığı bir durumdur. CORS (Cross Origin Resource Sharing) aslında güvenli istek yapmak olarak bilinmesine rağmen burada bu işi yapan Same Origin Policy olup CORS ile de bunun esnetilmesi mümkün kılınmaktadır.

CORS Requests

CORS uygulanabilecek farklı origine yapılan http istekleri;

• XmlHttpRequest ve Fetch api istekleri,

• @font-face ile css de font istekleri,

• Webgl textures

• Canvas üzerinde drawImage metot kullanımlarında.

Son kullanıcının tarayıcı tarafından güvenli bir ortam sağlanması amacıyla geliştirilmiş olup farklı bir origine istek atma noktasında bazı kısıtıların getirilmesi Same Origin Policy olarak adlandırılmaktadır. Burada bahsedilen Origin aşağıda yer alan üç ifadeye karşılık gelmektedir.

• Protocol

• Host

• Port

Bu üç değerden birinin farklı olması farklı bir origin anlamına gelmektedir.
Örnek olarak aşağıda ki tabloyu inceleyelim.

Same Origin Policy browser tarafında aslında hem güvenliği hem de kısmen performansı etkileyecek şekilde çalışmaktadır.Güvenlik noktasında isteği kesebiliyorken, performans noktasında karşımıza simple request ve preflight kavramları çıkmaktadır.

Simple Request

Preflight gerektirmeyen isteklere mdn tarafından verilen isimdir. Bir simple request aşağıda yer alan özelliklerin hepsini sağlaması gerekmektedir.

• Methods
  • Get
  • Post
  • Head
• Headers Fetch spec'inde yer alan yasaklı headerlar dışındaki headerlar
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type
• Content-Type
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

Preflight Request

Preflight Request tarayıcı tarafından sunucuya OPTIONS metodu ile gönderilen ön istek olarak değerlendirilebilir. Bu istek neticesinde gelen cevaba göre gerçek istek sunucuya gönderilir veya gönderilmez. Aşağıda ki özelliklerden herhangi birinin sağlanması durumunda preflight istek gerçekleştirilir.

• Get,Post,Head metodu dışındaki metotlar(Put, Delete,Options,Patch vs)

• application/x-www-form-urlencoded, multipart/form-data veya text/plain dışında gönderilen herhangi bir content-type(application/json)

Preflight Request&Response

OPTIONS /doc HTTP/1.1
Origin: http://sample.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: application/json, Content-Type

Access-Control-Allow-Origin: https://sample.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: applicaiton/json, Content-Type

Response içerisinde aşağıda ki header geliyor ise bu bir origin kısıtı olmadığı anlamına gelmektedir.
Access-Control-Allow-Origin : *

Özet olarak CORS ifadesi aslında yasaklı olan durumun izinler ile kullanılabilir hale getirilmesi diyebiliriz. Korunmak zorunda olan son kullanıcı için uygulanan Same Origin Policy vazgeçilmez olacağından burada devreye CORS girmekte ve ilgili requestin atılmasını sağlamaktadır. Burada bahsetmiş olduğumuz farklı originden gelen istekler tekrarlamak gerekirse tarayıcı üzerinden geldiği takdirde Same Origin Policy devreye girmektedir.

Kaynaklar

• https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/cors_principle.png

• https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.1