Merhaba arkadaşlar, bugün başımı çok ağrıtan ve belki de sizin de canınızı sıkabilecek bir CORS konusundan bahsedeceğim. Özellikle API geliştirirken, hızlıca test etmek için Access-Control-Allow-Origin başlığını (wildcard) yapıp geçtiğimiz çok olmuştur. "Çalışsın da nasıl çalışırsa çalışsın" mantığıyla... Ancak iş, tarayıcıya kimlik bilgileri (cookie, authorization header) göndermeye geldiğinde ve güvenliği düşünmeye başladığımızda, bu kolaycı çözümün bizi nasıl bir çıkmaza soktuğunu anlatacağım.
Karşılaştığım Sorun: Cookie'ler Gönderilmiyor!
Bir Vue.js uygulamasından, Laravel backend'ime istek atıyordum. Kullanıcı girişi sonrası oturumu yönetmek için HttpOnly cookie'ler kullanıyordum. Frontend'ten yapılan isteklerde, withCredentials flag'ini true yapmama rağmen, tarayıcı o cookie'leri sürekli göndermiyor ve API'm 401 hatası veriyordu. Konsola baktığımda şu klasik hatayı gördüm:
İşte o an kafayı yemiştim! Çünkü CORS yapılandırmamda her şeyi "" yaparak "hallederim" demiştim.
Neden Wildcard () ve Credentials Birlikte Çalışmaz?
Bu, tarayıcıların katı bir güvenlik politikasıdır. Düşünsenize, Access-Control-Allow-Origin: diyerek "bu kaynağa dünyadaki her site erişebilir" demiş oluyorsunuz. Aynı zamanda Access-Control-Allow-Credentials: true diyerek de "bu her site, kullanıcının sizin domain'inizdeki kimlik bilgilerini (cookie, auth header) de gönderebilir" demiş olurdunuz. Bu, inanılmaz bir güvenlik açığı yaratırdı. Kötü niyetli herhangi bir site, kullanıcının sizin API'nize olan oturumunu ele geçirebilirdi.
Bu yüzden tarayıcılar, bu ikisini bir arada kabul etmez. Eğer kimlik bilgileri gönderilecekse, Access-Control-Allow-Origin başlığının değeri kesinlikle wildcard () olamaz ve kesinlikle isteği yapan origin ile birebir aynı olmalıdır.
Benim Kullandığım En Temiz Çözüm: Dinamik Origin Kontrolü
Hızlı test için wildcard kullanmak yerine, gelen isteğin "Origin" header'ını kontrol edip, güvenilir origin'ler listesinde varsa, cevapta o origin'i döndüren bir middleware veya fonksiyon yazmak en sağlam yoldur. İşte benim Laravel backend'imde kullandığım örnek bir middleware:
Bu middleware'i, app/Http/Kernel.php dosyasındaki global middleware stack'ine ekleyebilir veya route gruplarına atayabilirsiniz. Node.js (Express) için de mantık aynı:
Sonuç ve Performans
Bu yöntemle, hem güvenliği sağlamış oldum (sadece belirlediğim siteler istek yapabiliyor), hem de tarayıcının cookie ve authorization header'larını kabul etmesini sağladım. Geliştirme aşamasında bile artık wildcard kullanmıyorum, doğrudan localhost'u listeye ekliyorum. Bu, üretim ortamına geçişte unutabileceğiniz bir hatayı da baştan engelliyor.
Siz backend geliştirirken CORS için hangi yöntemi kullanıyorsunuz? Hiç wildcard tuzağına düşüp de benim gibi saatlerinizi harcadığınız oldu mu? Ya da farklı framework'lerde (Django, ASP.NET) bu işi nasıl hallediyorsunuz? Yorumlarda deneyimlerinizi paylaşın, tartışalım!
Karşılaştığım Sorun: Cookie'ler Gönderilmiyor!Bir Vue.js uygulamasından, Laravel backend'ime istek atıyordum. Kullanıcı girişi sonrası oturumu yönetmek için HttpOnly cookie'ler kullanıyordum. Frontend'ten yapılan isteklerde, withCredentials flag'ini true yapmama rağmen, tarayıcı o cookie'leri sürekli göndermiyor ve API'm 401 hatası veriyordu. Konsola baktığımda şu klasik hatayı gördüm:
JavaScript:
Access to fetch at 'https://api.orneksitem.com/kullanici' from origin 'https://frontend.orneksitem.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '' when the request's credentials mode is 'include'.Bu, tarayıcıların katı bir güvenlik politikasıdır. Düşünsenize, Access-Control-Allow-Origin: diyerek "bu kaynağa dünyadaki her site erişebilir" demiş oluyorsunuz. Aynı zamanda Access-Control-Allow-Credentials: true diyerek de "bu her site, kullanıcının sizin domain'inizdeki kimlik bilgilerini (cookie, auth header) de gönderebilir" demiş olurdunuz. Bu, inanılmaz bir güvenlik açığı yaratırdı. Kötü niyetli herhangi bir site, kullanıcının sizin API'nize olan oturumunu ele geçirebilirdi.
Bu yüzden tarayıcılar, bu ikisini bir arada kabul etmez. Eğer kimlik bilgileri gönderilecekse, Access-Control-Allow-Origin başlığının değeri kesinlikle wildcard () olamaz ve kesinlikle isteği yapan origin ile birebir aynı olmalıdır.
Benim Kullandığım En Temiz Çözüm: Dinamik Origin KontrolüHızlı test için wildcard kullanmak yerine, gelen isteğin "Origin" header'ını kontrol edip, güvenilir origin'ler listesinde varsa, cevapta o origin'i döndüren bir middleware veya fonksiyon yazmak en sağlam yoldur. İşte benim Laravel backend'imde kullandığım örnek bir middleware:
PHP:
<?php
namespace App\Http\Middleware;
use Closure;
class SecureCORS
{
// Güvenilir origin'lerin listesi
private $allowedOrigins = [
'https://frontend.orneksitem.com',
'https://admin.orneksitem.com',
'http://localhost:3000', // Geliştirme ortamı
];
public function handle($request, Closure $next)
{
// İsteğin Origin başlığını al
$origin = $request->header('Origin');
// Eğer origin bizim listemizde varsa, izin ver
if (in_array($origin, $this->allowedOrigins)) {
return $next($request)
->header('Access-Control-Allow-Origin', $origin)
->header('Access-Control-Allow-Credentials', 'true')
->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
->header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
}
// Değilse, wildcard bile dönme (veya başka bir işlem yap)
// Bu örnekte sadece güvenilir origin'lere izin veriyoruz.
return $next($request);
}
}Bu middleware'i, app/Http/Kernel.php dosyasındaki global middleware stack'ine ekleyebilir veya route gruplarına atayabilirsiniz. Node.js (Express) için de mantık aynı:
JavaScript:
const allowedOrigins = ['https://frontend.orneksitem.com', 'http://localhost:3000'];
app.use((req, res, next) => {
const origin = req.headers.origin;
if (allowedOrigins.includes(origin)) {
res.header('Access-Control-Allow-Origin', origin);
res.header('Access-Control-Allow-Credentials', true);
}
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
next();
});Bu yöntemle, hem güvenliği sağlamış oldum (sadece belirlediğim siteler istek yapabiliyor), hem de tarayıcının cookie ve authorization header'larını kabul etmesini sağladım. Geliştirme aşamasında bile artık wildcard kullanmıyorum, doğrudan localhost'u listeye ekliyorum. Bu, üretim ortamına geçişte unutabileceğiniz bir hatayı da baştan engelliyor.
Siz backend geliştirirken CORS için hangi yöntemi kullanıyorsunuz? Hiç wildcard tuzağına düşüp de benim gibi saatlerinizi harcadığınız oldu mu? Ya da farklı framework'lerde (Django, ASP.NET) bu işi nasıl hallediyorsunuz? Yorumlarda deneyimlerinizi paylaşın, tartışalım!