React Uygulamalarında Güvenlik: XSS, CSRF ve Diğer Yaygın Tehditlere Karşı Uygulamanızı Kalkan Gibi Koruyun

Günümüz web dünyasında, kullanıcı verileri ve uygulama bütünlüğü her zamankinden daha değerli. React gibi güçlü frontend kütüphaneleriyle interaktif ve zengin kullanıcı deneyimleri sunarken, güvenlik konusunu göz ardı etmek, uygulamanızı ciddi risklerle karşı karşıya bırakabilir. Benim geliştirme tecrübelerimde, birçok projenin başlangıç aşamalarında performans ve özellik geliştirmeye odaklanıp, güvenlik katmanının genellikle sonraya bırakıldığını gözlemledim. Ancak biliyoruz ki, güvenlik sonradan eklenen bir özellik değil, geliştirme sürecinin her aşamasında düşünülmesi gereken temel bir unsurdur.

Bu yazıda, React tabanlı web uygulamalarınızı hedef alan en yaygın güvenlik tehditlerini, bu tehditlerin nasıl çalıştığını ve uygulamalarınızı bu saldırılara karşı nasıl kalkan gibi koruyacağınızı derinlemesine inceleyeceğiz. Amacımız, hem geliştirici olarak farkındalığınızı artırmak hem de somut pratikler sunarak daha güvenli React uygulamaları inşa etmenize yardımcı olmaktır.

Web Uygulamalarında Yaygın Güvenlik Açıkları ve React

Bir React uygulamasının frontend katmanı, doğrudan kullanıcılarla etkileşimde olduğu için çeşitli saldırı vektörlerine açıktır. Bu saldırıların çoğu, kullanıcı girdilerini yeterince doğrulamamak veya doğru güvenlik mekanizmalarını uygulamamak kaynaklıdır. İşte en yaygın olanlar:

1. Cross-Site Scripting (XSS): Kod Enjeksiyonu Tehdidi

Cross-Site Scripting (XSS), kötü niyetli betiklerin (genellikle JavaScript) bir web sayfasına enjekte edilerek, son kullanıcının tarayıcısında çalıştırılmasına olanak tanıyan bir güvenlik açığıdır. Bu betikler, oturum çerezlerini çalabilir, hassas kullanıcı bilgilerini ele geçirebilir veya sayfanın içeriğini değiştirebilir. XSS, web güvenlik açıkları arasında en yaygın ve tehlikelilerinden biridir.

XSS Türleri ve Nasıl Çalışır?

• Depolanmış (Stored) XSS: Kötü amaçlı betik, sunucu tarafında kalıcı olarak depolanır (örneğin, veritabanına kaydedilmiş bir yorum). Bu betik, ilgili sayfa her yüklendiğinde diğer kullanıcılara sunulur ve tarayıcılarında çalışır.
• Yansıyan (Reflected) XSS: Kötü amaçlı betik, HTTP isteğinin bir parçası olarak gönderilir ve sunucu tarafından doğrulanmadan doğrudan HTTP yanıtına yansıtılır. Örneğin, arama sonuçları sayfasındaki bir hata mesajı.
• DOM Tabanlı XSS: Betik, sunucuya ulaşmadan istemci tarafındaki JavaScript kodu tarafından DOM'a enjekte edilir. Genellikle, kullanıcı girdilerini doğrudan DOM'a yazan JavaScript kodlarında ortaya çıkar.

React'te XSS'e Karşı Korunma Yöntemleri

React, varsayılan olarak XSS saldırılarına karşı güçlü bir koruma sağlar. JSX, metin içeriklerini otomatik olarak kaçırarak (escape ederek) HTML etiketlerinin veya JavaScript kodlarının doğrudan çalışmasını engeller. Yani, kullanıcıdan gelen bir metni doğrudan render ettiğinizde, React bunu güvenli bir şekilde gösterir:

const userInput = '<script>alert("XSS Saldırısı!")</script>';
// React bunu güvenli bir şekilde gösterir, betik çalışmaz
<p>{userInput}</p>
// Çıktı: <p>&lt;script&gt;alert("XSS Saldırısı!")&lt;/script&gt;</p>

Ancak, dangerouslySetInnerHTML özelliğini kullandığınızda bu korumayı atlamış olursunuz. Adından da anlaşılacağı gibi, bu özellik HTML içeriğini doğrudan DOM'a enjekte etmek için kullanılır ve yalnızca güvendiğiniz kaynaklardan gelen HTML ile kullanılmalıdır.

// KESİNLİKLE YAPMAYIN! Bu bir XSS açığıdır:
const unsafeHtml = { __html: '<script>alert("XSS Saldırısı!")</script>' };
<div dangerouslySetInnerHTML={unsafeHtml} />

Eğer dışarıdan gelen HTML içeriğini render etmeniz gerekiyorsa, DOMPurify gibi kütüphaneleri kullanarak içeriği temizlemeli ve zararlı etiketleri/nitelikleri filtrelemelisiniz:

import DOMPurify from 'dompurify';

const rawHtml = '<img src="x" onerror="alert(\'XSS\')"><p>Güvenli metin</p>';
const cleanHtml = DOMPurify.sanitize(rawHtml);

<div dangerouslySetInnerHTML={{ __html: cleanHtml }} />

2. Cross-Site Request Forgery (CSRF): Güvenilmez İstekleri Önleme

Cross-Site Request Forgery (CSRF), saldırganın, kullanıcının kimliğini taklit ederek, kullanıcının oturum açtığı bir web uygulamasına istenmeyen bir eylem gerçekleştirmesine neden olmasıdır. Örneğin, saldırgan bir e-posta veya kötü amaçlı bir web sitesi aracılığıyla kullanıcıyı kandırarak, kullanıcının bilgisi olmadan banka havalesi gibi kritik bir işlemi tetiklemesini sağlayabilir.

CSRF Nasıl Çalışır?

Kullanıcı, banka sitesinde oturum açmıştır. Saldırgan, kullanıcıya kötü amaçlı bir web sitesi veya e-posta gönderir. Bu site, banka sitesine bir havale isteği gönderen gizli bir form veya resim etiketi içerebilir. Kullanıcının tarayıcısı, banka sitesine yapılan istekle birlikte oturum çerezlerini de otomatik olarak gönderdiği için, banka sitesi bu isteği geçerli bir kullanıcı isteği olarak algılar.

React ve API Entegrasyonunda CSRF Koruması

CSRF saldırılarına karşı korunma genellikle sunucu tarafında gerçekleşir, ancak frontend uygulamalarının da bu mekanizmaları doğru kullanması önemlidir. En yaygın korunma yöntemi **CSRF token'ları** kullanmaktır:

• CSRF Token: Sunucu, her kullanıcı oturumu için benzersiz bir CSRF token'ı oluşturur ve bunu istemciye gönderir (genellikle bir meta etiketi veya JavaScript değişkeni aracılığıyla). İstemci, sunucuya yaptığı her kritik istekte (POST, PUT, DELETE) bu token'ı bir HTTP başlığı (örneğin, X-CSRF-TOKEN) veya form verisi olarak geri gönderir. Sunucu, gelen isteğin token'ı ile kendi oluşturduğu token'ı karşılaştırır. Eşleşmezse isteği reddeder.

React uygulamanızda bu token'ı alıp her API isteğine eklemek için Axios gibi bir kütüphane kullanabilirsiniz:

// Örneğin, token'ı bir meta etiketinden alıyoruz
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken;

// Sonraki tüm istekler bu başlığı içerecektir
axios.post('/api/secure-action', { data: '...' });

Ayrıca, çerezler için SameSite niteliğini kullanmak da CSRF korumasında etkilidir. SameSite=Lax veya SameSite=Strict olarak ayarlanmış çerezler, çapraz site isteklerinde otomatik olarak gönderilmez. Bu, sunucu tarafından sağlanan oturum çerezlerinizin yalnızca aynı site üzerinden yapılan isteklerde gönderilmesini sağlayarak CSRF riskini azaltır. Sunucu tarafı oturum yönetimi ve çerez güvenliği hakkında daha fazla bilgi için React ve Node.js Uygulamalarında Güvenli Oturum Yönetimi yazıma göz atabilirsiniz.

3. Hassas Veri Yönetimi ve API Güvenliği

React uygulamaları genellikle backend API'leri ile iletişim kurar. Bu iletişim sırasında hassas verilerin (API anahtarları, kullanıcı bilgileri) nasıl ele alındığı kritik öneme sahiptir.

• API Anahtarları ve Ortam Değişkenleri: Frontend uygulamasında direkt olarak hassas API anahtarlarını veya sırları depolamaktan kaçının. Tarayıcıda çalışan herhangi bir kod kolayca tersine mühendislikle çözülebilir. Ortam değişkenleri (örneğin, process.env.REACT_APP_API_KEY) üretimde paketlenir ve kaynak kodunda görünebilir. Kritik sırlar her zaman backend tarafından yönetilmelidir.
• HTTPS Kullanımı: Her zaman HTTPS kullanarak istemci ve sunucu arasındaki tüm iletişimi şifreleyin. Bu, Man-in-the-Middle (MITM) saldırılarına karşı koruma sağlar.
• CORS (Cross-Origin Resource Sharing): Backend API'lerinizde doğru CORS politikalarını yapılandırarak, yalnızca izin verdiğiniz alan adlarından gelen isteklere yanıt verdiğinizden emin olun. Bu, kötü amaçlı sitelerin API'nizi kötüye kullanmasını engeller.
• JWT Depolama (Frontend): JWT token'larını tarayıcının yerel depolama alanında (LocalStorage, SessionStorage) depolamak XSS saldırılarına karşı savunmasız kalabilir. Secure HTTP-only çerezler bu konuda daha güvenli bir alternatiftir, ancak yine de CSRF'ye karşı korunma gerektirir. JWT token'larının güvenli kullanımı hakkında detaylı bilgiye, yine Güvenli Oturum Yönetimi yazımda değinmiştim.

Güvenli React Geliştirme İçin En İyi Pratikler

1. Content Security Policy (CSP) Kullanımı

Content Security Policy (CSP), XSS ve diğer kod enjeksiyonu saldırılarına karşı güçlü bir savunma hattı oluşturur. Web sunucunuz tarafından gönderilen bir HTTP yanıt başlığı veya HTML'deki bir meta etiketi aracılığıyla tanımlanır. CSP, bir web sayfasının hangi kaynaklardan (betikler, stil sayfaları, resimler vb.) içerik yükleyebileceğini belirlemenizi sağlar. Inline script'leri ve eval() gibi tehlikeli JavaScript işlevlerini engelleyerek XSS riskini büyük ölçüde azaltır.

<!-- index.html dosyanıza ekleyebilirsiniz -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">

Bu örnek, yalnızca aynı kaynaktan ve belirli bir CDN'den betiklerin yüklenmesine izin verirken, inline script'leri ve diğer dış kaynakları engeller.

2. Bağımlılık Yönetimi ve Güvenlik Açıkları

React projelerinizde kullandığınız üçüncü taraf kütüphaneler ve paketler de güvenlik açıkları içerebilir. Bu riskleri azaltmak için:

• Düzenli Güncellemeler: npm audit veya yarn audit komutlarını düzenli olarak çalıştırarak projenizdeki bağımlılıkların bilinen güvenlik açıklarını kontrol edin ve güncelleyin.
• Güvenilir Kaynaklar: Yalnızca güvenilir ve iyi bakılan kütüphaneleri kullanmaya özen gösterin.
• Küçük Bağımlılıklar: Gereksiz yere büyük veya çok sayıda bağımlılık eklemekten kaçının; bu, potansiyel saldırı yüzeyini artırır.

Bağımlılık yönetimi ve genel yazılım geliştirme güvenliği konusunda daha fazla bilgi için Node.js Uygulamalarında Güvenli Yazılım Geliştirme başlıklı yazıma göz atabilirsiniz.

3. Kullanıcı Girdilerini Doğrulama ve Temizleme

Tüm kullanıcı girdilerini (form alanları, URL parametreleri vb.) hem istemci hem de sunucu tarafında doğrulamak ve temizlemek kritik öneme sahiptir. Frontend'deki doğrulama sadece kullanıcı deneyimi için bir kolaylık sağlar; asıl güvenlik için sunucu tarafı doğrulama şarttır. Ancak frontend'de de olası kötü amaçlı girdileri önceden filtrelemek faydalı olabilir.

4. Oturum Güvenliği

Kullanıcı oturumları, uygulamanızın en hassas noktalarından biridir. Frontend tarafında dikkat edilmesi gerekenler:

• Kimlik Doğrulama: Kullanıcı kimlik doğrulama süreçlerinin (login) güvenli bir şekilde uygulandığından emin olun (HTTPS üzerinden, güçlü şifre politikaları, MFA desteği).
• Oturum Süresi: Oturumların makul bir süre sonra sona ermesini sağlayın ve uzun süreli oturumlar için refresh token mekanizmaları kullanın.

5. Güvenlik Testleri ve Denetimleri

Uygulamanızı geliştirirken veya dağıtıma hazırlarken düzenli güvenlik testleri yapın:

• Otomatik Güvenlik Taramaları: Web zafiyet tarayıcıları (OWASP ZAP, Burp Suite gibi) kullanarak uygulamanızdaki yaygın açıkları tespit edin.
• Manuel Testler: Penetrasyon testleri ve güvenlik denetimleri ile daha derinlemesine zafiyet analizi yapın.
• Kod İncelemeleri: Güvenlik konusunda deneyimli geliştiricilerle kod incelemeleri yaparak potansiyel riskleri belirleyin.

Sonuç

React uygulamaları, modern web geliştirmenin vazgeçilmez bir parçasıdır ve sunduğu esneklik ile performansı tartışılmaz. Ancak bu gücün beraberinde getirdiği sorumluluk, güvenlik pratiklerine eksiksiz uymayı gerektirir. XSS, CSRF gibi yaygın tehditlerden, hassas veri yönetimine kadar birçok alanda dikkatli olmak, uygulamanızı ve kullanıcılarınızı korumanın anahtarıdır.

Unutmayın, güvenlik sürekli bir yolculuktur ve yeni tehditler ortaya çıktıkça geliştirme pratiklerimizi de güncellememiz gerekir. Bu yazıda ele aldığımız prensipler ve stratejiler, React tabanlı web uygulamalarınızı daha sağlam ve güvenilir hale getirmeniz için önemli bir başlangıç noktası sunmaktadır. Eğer aklınıza takılan sorular olursa veya bu konularda daha derinlemesine bilgi almak isterseniz, bana ismailyagci371@gmail.com adresinden veya sosyal medya kanallarından ulaşabilirsiniz. Güvenli ve başarılı kodlamalar dilerim!

Orijinal yazı: https://ismailyagci.com/articles/react-uygulamalarinda-guvenlik-xss-csrf-ve-diger-yaygin-tehditlere-karsi-uygulamanizi-kalkan-gibi-koruyun