M

MLOG

Türkçe

CORS'un (Kökenler Arası Kaynak Paylaşımı) sırlarını çözün ve web uygulamalarınızda alanlar arası istekleri güvenle etkinleştirin. Bu rehber, farklı kökenler arası iletişimi güvence altına alır.

CORS'u Anlamak: Kökenler Arası Kaynak Paylaşımı İçin Kapsamlı Bir Rehber

Günümüzün birbirine bağlı web dünyasında, uygulamaların sık sık farklı kökenlerden kaynaklara erişmesi gerekir. İşte bu noktada Kökenler Arası Kaynak Paylaşımı (Cross-Origin Resource Sharing - CORS) devreye girer. CORS, web tarayıcılarının bir kökenden (alan adı, protokol ve port) farklı bir kökene yapılan istekleri nasıl ele alacağını yöneten çok önemli bir güvenlik mekanizmasıdır. Güvenli ve işlevsel web uygulamaları oluşturmak için her web geliştiricisinin CORS'u anlaması esastır.

Aynı Köken Politikası (Same-Origin Policy) Nedir?

CORS'a dalmadan önce, Aynı Köken Politikası'nı (Same-Origin Policy - SOP) anlamak önemlidir. SOP, web tarayıcılarında uygulanan temel bir güvenlik mekanizmasıdır. Amacı, bir web sitesindeki kötü niyetli betiklerin başka bir web sitesindeki hassas verilere erişmesini engellemektir. Bir köken, protokol (ör. HTTP veya HTTPS), alan adı (ör. example.com) ve port numarasının (ör. 80 veya 443) birleşimiyle tanımlanır. İki URL'nin aynı kökene sahip olduğu, aynı protokol, alan adı ve portu paylaştıkları takdirde kabul edilir.

Örnek:

SOP, CORS gibi özel önlemler alınmadığı sürece betiklerin farklı bir kökenden kaynaklara erişimini kısıtlar.

CORS Neden Gereklidir?

Aynı Köken Politikası güvenlik için hayati olsa da, kısıtlayıcı da olabilir. Birçok modern web uygulaması, API'ler veya içerik dağıtım ağları (CDN'ler) gibi farklı sunuculardan veri almaya dayanır. CORS, SOP'yi gevşetmek ve güvenliği korurken meşru kökenler arası isteklere izin vermek için kontrollü bir yol sağlar.

http://example.com adresinde barındırılan bir web uygulamasının http://api.example.net adresinde barındırılan bir API sunucusundan veri alması gereken bir senaryo düşünün. CORS olmadan, tarayıcı bu isteği SOP nedeniyle engellerdi. CORS, API sunucusunun hangi kökenlerin kaynaklarına erişim izni olduğunu açıkça belirtmesine olanak tanıyarak web uygulamasının doğru şekilde çalışmasını sağlar.

CORS Nasıl Çalışır: Temeller

CORS, istemci (tarayıcı) ve sunucu arasında değiş tokuş edilen bir dizi HTTP başlığı aracılığıyla çalışır. Sunucu, tarayıcıya istenen kaynağa erişim izni olup olmadığını bildirmek için bu başlıkları kullanır. İlgili anahtar HTTP başlığı Access-Control-Allow-Origin'dir.

Senaryo 1: Basit İstek

"Basit istek", belirli kriterleri karşılayan bir GET, HEAD veya POST isteğidir (örneğin, Content-Type başlığının application/x-www-form-urlencoded, multipart/form-data veya text/plain olması). Bu durumda, tarayıcı isteği doğrudan sunucuya gönderir ve sunucu Access-Control-Allow-Origin başlığı ile yanıt verir.

İstemci İsteği (http://example.com'dan):

GET /data HTTP/1.1
Host: api.example.net
Origin: http://example.com

Sunucu Yanıtı (http://api.example.net'ten):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Content-Type: application/json

{
  "data": "Sunucudan gelen bazı veriler"
}

Bu örnekte, sunucu Access-Control-Allow-Origin: http://example.com ile yanıt vererek http://example.com'dan gelen isteklere izin verildiğini belirtir. İstekteki köken, Access-Control-Allow-Origin başlığındaki değerle eşleşmezse (veya başlık mevcut değilse), tarayıcı yanıtı engeller ve istemci tarafı betiğinin verilere erişmesini önler.

Senaryo 2: Ön Kontrol İsteği (Karmaşık İstekler İçin)

PUT, DELETE gibi HTTP yöntemlerini kullanan veya özel başlıklara sahip daha karmaşık istekler için, tarayıcı HTTP OPTIONS yöntemini kullanarak bir "ön kontrol" (preflight) isteği gerçekleştirir. Bu ön kontrol isteği, asıl isteği göndermeden önce sunucudan izin ister. Sunucu, hangi yöntemlerin, başlıkların ve kökenlerin izinli olduğunu belirten başlıklarla yanıt verir.

İstemci Ön Kontrol İsteği (http://example.com'dan):

OPTIONS /data HTTP/1.1
Host: api.example.net
Origin: http://example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header

Sunucu Yanıtı (http://api.example.net'ten):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, PUT, DELETE
Access-Control-Allow-Headers: X-Custom-Header, Content-Type
Access-Control-Max-Age: 3600

Başlıkların Açıklaması:

Sunucunun ön kontrol yanıtı isteğe izin verildiğini gösteriyorsa, tarayıcı asıl istekle devam eder. Aksi takdirde, tarayıcı isteği engeller.

İstemci Asıl İsteği (http://example.com'dan):

PUT /data HTTP/1.1
Host: api.example.net
Origin: http://example.com
X-Custom-Header: some-value
Content-Type: application/json

{
  "data": "Güncellenecek bazı veriler"
}

Sunucu Yanıtı (http://api.example.net'ten):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Content-Type: application/json

{
  "status": "Veri başarıyla güncellendi"
}

Yaygın CORS Başlıkları

İşte anlamanız gereken temel CORS başlıklarının bir dökümü:

Farklı Sunucu Taraflı Dillerde CORS

CORS uygulamak genellikle sunucu tarafı uygulamanızı uygun CORS başlıklarını gönderecek şekilde yapılandırmayı içerir. İşte bunu çeşitli dillerde ve framework'lerde nasıl yapacağınıza dair örnekler:

Express ile Node.js

cors ara yazılım (middleware) paketini kullanabilirsiniz:

const express = require('express');
const cors = require('cors');

const app = express();

// Tüm kökenler için CORS'u etkinleştir (PRODÜKSİYONDA DİKKATLİ KULLANIN)
app.use(cors());

// Alternatif olarak, belirli kökenler için CORS'u yapılandırın
// app.use(cors({
//   origin: 'http://example.com'
// }));

app.get('/data', (req, res) => {
  res.json({ message: 'Burası tüm kökenler için CORS etkindir!' });
});

app.listen(3000, () => {
  console.log('Sunucu 3000 portunda çalışıyor');
});

Flask ile Python

Flask-CORS eklentisini kullanabilirsiniz:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

# Alternatif olarak, belirli kökenler için CORS'u yapılandırın
# CORS(app, resources={r"/api/*": {"origins": "http://example.com"}})

@app.route("/data")
def hello():
    return {"message": "Burası tüm kökenler için CORS etkindir!"}

if __name__ == '__main__':
    app.run(debug=True)

Spring Boot ile Java

Spring Boot uygulamanızda CORS'u ek açıklamalar (annotations) veya yapılandırma sınıfları kullanarak yapılandırabilirsiniz:

Ek Açıklamalar Kullanarak:

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "http://example.com") // http://example.com'dan gelen isteklere izin ver
public class DataController {

    @GetMapping("/data")
    public String getData() {
        return "Burası http://example.com için CORS etkindir!";
    }
}

Yapılandırma Kullanarak:

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/data")
                .allowedOrigins("http://example.com") // http://example.com'dan gelen isteklere izin ver
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}

PHP

 "Burası http://example.com için CORS etkindir!");
echo json_encode($data);
?>

CORS ve Güvenlik Hususları

CORS kökenler arası isteklere olanak sağlarken, onu güvenli bir şekilde uygulamak çok önemlidir. İşte bazı önemli hususlar:

CORS Sorunlarını Giderme

CORS sorunlarını ayıklamak sinir bozucu olabilir. İşte bazı yaygın sorunlar ve bunları nasıl çözeceğiniz:

Hata Ayıklama Araçları:

Gelişmiş CORS Senaryoları

Temel CORS kavramları nispeten basit olsa da, dikkate alınması gereken bazı daha gelişmiş senaryolar vardır:

CORS En İyi Uygulamaları

Güvenli ve verimli bir CORS uygulaması sağlamak için şu en iyi uygulamaları izleyin:

Sonuç

CORS, web uygulamalarında kontrollü kökenler arası isteklere olanak tanıyan kritik bir güvenlik mekanizmasıdır. CORS'un nasıl çalıştığını ve nasıl doğru şekilde yapılandırılacağını anlamak her web geliştiricisi için esastır. Bu kapsamlı kılavuzda belirtilen yönergeleri ve en iyi uygulamaları izleyerek, farklı kökenlerden kaynaklarla sorunsuz bir şekilde etkileşim kuran güvenli ve işlevsel web uygulamaları oluşturabilirsiniz.

Her zaman güvenliğe öncelik vermeyi ve aşırı izin veren CORS yapılandırmalarını kullanmaktan kaçınmayı unutmayın. CORS ayarlarınızın güvenlik etkilerini dikkatlice göz önünde bulundurarak, uygulamalarınızı ve verilerinizi yetkisiz erişime karşı koruyabilirsiniz.

Umarız bu rehber CORS'u anlamanıza yardımcı olmuştur. Mutlu kodlamalar!