React ve API Kurulumlarında CSRF Koruması

Siteler Arası İstek Sahteciliği (CSRF), kötü amaçlı bir web sitesinin kullanıcının tarayıcısını kandırarak API'nize kimliği doğrulanmış bir istek göndermesini sağladığı bir saldırıdır. Tarayıcı, çerezleri isteklere otomatik olarak eklediği için sunucu, uygulamanızdan gelen meşru bir istek ile saldırganın sitesinden gelen sahte bir isteği ayırt edemez.

Çerezler, CSRF güvenlik açığının temel nedenidir. Kullanıcı uygulamanızda oturum açtığında oturum çerezi tarayıcıda saklanır. Kullanıcı saldırganın sayfasını ziyaret ettiğinde saldırgan, API'nize bir form gönderimi veya getirme isteği başlatabilir; tarayıcı da oturum çerezini otomatik olarak ekleyerek kötü amaçlı isteğin kimliğini doğrular.

SameSite çerez özniteliği, tarayıcılara siteler arası isteklere çerezleri ne zaman ekleyeceklerini bildirir. Üç değeri vardır: Lax (modern tarayıcılarda varsayılandır; siteler arası POST'u engeller, GET'e izin verir), Strict (GET yönlendirmeleri de dâhil olmak üzere tüm siteler arası istekleri engeller) ve None (siteler arası isteklere izin verir; HTTPS Secure bayrağı gerektirir).

SameSite=Lax, değişiklik işlemlerinde kullanılan siteler arası POST, PUT, DELETE ve PATCH isteklerini engeller. API'niz okumalar için yalnızca GET'i, tüm değişiklik işlemleri için de POST'u kullanıyorsa SameSite=Lax, modern tarayıcılarda SPA'ler için CSRF'yi etkili biçimde önler. Bu, günümüzde çoğu uygulamanın dayandığı temel azaltma önlemidir.

Çift Çerez Gönderme deseni, sunucunun rastgele bir CSRF belirtecini HttpOnly olmayan bir çerezde ayarladığı bir CSRF azaltma yöntemidir. İstemci bu çerez değerini okur ve özel bir istek üst bilgisi olarak gönderir; örneğin X-CSRF-Token. Sunucu, üst bilgi değerinin çerez değeriyle eşleştiğini doğrular. Saldırgan farklı bir kaynaktan çerezi okuyamayacağı için doğru üst bilgiyi ayarlayamaz.

Senkronlaştırıcı Belirteç Deseni, sunucuda her kullanıcı oturumu için benzersiz bir CSRF belirteci oluşturur. HTML formları için belirteç gizli bir alana yerleştirilir. SPA API çağrıları için belirteç bir uç nokta veya meta etiketi aracılığıyla sağlanır ve özel bir üst bilgide gönderilir. Sunucu, durumu değiştiren her istekte belirteci doğrular.

JWT'sini bellekte veya localStorage içinde saklayan ve JWT'yi Authorization: Bearer üst bilgisinde gönderen bir React SPA, klasik CSRF'ye karşı savunmasız değildir. CSRF saldırıları çerez tabanlı kimlik doğrulamadan yararlanır; saldırganın sayfası, CORS kısıtlamaları nedeniyle kaynaklar arası isteklere özel üst bilgiler ekleyemez ve bu nedenle Authorization üst bilgisini taklit edemez.

Basit kaynaklar arası isteklerde (form POST'u, görsel yükleme) özel üst bilgilere izin verilmez. Yalnızca CORS ön kontrolünden geçen istekler özel üst bilgiler içerebilir; ön kontrolden geçen istekler de sunucunun açık iznini gerektirir. Tüm değişiklik işlemleri için özel bir üst bilgi (örneğin X-Requested-With: XMLHttpRequest) gerektiren bir API, basit CSRF saldırılarına karşı doğal olarak korunur.

CORS, farklı kaynaklı bir isteğin yanıtını hangi kaynakların okuyabileceğini denetler. CSRF ise durum değiştiren istekleri hangi kaynakların gönderebileceğiyle ilgilidir. Kaynakları kısıtlayacak şekilde CORS yapılandırmak CSRF'yi önlemez — tarayıcı isteği ve çerezi yine gönderir; CORS yalnızca yanıtın JavaScript tarafından görülüp görülemeyeceğini denetler. Bir CSRF saldırısının yanıtı okuması gerekmez.

Oturum çerezlerini şunlarla yapılandırınız: HttpOnly: true (JavaScript'in çerezi okumasını önler ve XSS tabanlı belirteç hırsızlığını engeller), Secure: true (yalnızca HTTPS üzerinden gönderilir), SameSite: Lax veya Strict (CSRF'yi önler) ve uygun bir Max-Age ya da sona erme süresi. Bu dört öznitelik birlikte oturum yönetimini önemli ölçüde güçlendirir.

Next.js Uygulama Yönlendiricisi, POST istekleri olan Sunucu Eylemlerini kullanır. Next.js, Origin üst bilgisini ana bilgisayarla karşılaştırarak CSRF koruması uygular — beklenmeyen kaynaklardan gelen istekler reddedilir. Bu yerleşik denetim, SameSite=Lax oturum çerezleriyle birlikte Sunucu Eylemlerine dayalı veri değişiklikleri için güçlü bir CSRF koruması sağlar.

Hangi SameSite çerez değeri, siteler arası POST isteklerini engellerken siteler arası GET yönlendirmelerine izin verir?

CSRF, çerez tabanlı kimlik doğrulamadan yararlanarak tarayıcıyı kimliği doğrulanmış siteler arası istekler göndermesi için kandırır. SameSite=Lax, modern tarayıcılar için temel savunmadır. Çift Gönderim Çerezi ve Eşzamanlayıcı Belirteç desenleri ek koruma sağlar. Yetkilendirme üst bilgilerinde JWT kullanan React SPA'ları doğası gereği CSRF'ye dirençlidir. Özel zorunlu üst bilgiler ve CORS ön denetimleri de CSRF'yi azaltır. Oturum çerezlerinde her zaman HttpOnly + Secure + SameSite özelliklerini birlikte kullanınız.