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
Top comments (0)