SSR (Sunucu Taraflı Render) Kullanan Next.js Uygulamalarında XSS Tehlikesi

Next.js’in en güçlü özelliklerinden biri olan SSR (Sunucu Taraflı Render), SEO uyumluluğu ve ilk sayfa yükleme hızı açısından büyük avantajlar sağlar. Ancak bu avantaj, geliştiriciler için yeni güvenlik sorumluluklarını da beraberinde getirir. Özellikle XSS (Cross-Site Scripting) gibi saldırılar, SSR destekli Next.js uygulamalarında dikkatli olunmazsa ciddi açıklara neden olabilir. Bu yazımızda SSR ile çalışan Next.js projelerinde XSS risklerini detaylandırıyor ve alınması gereken önlemleri adım adım inceliyoruz.

📌 XSS Nedir?

XSS (Cross-Site Scripting), kötü niyetli bir kullanıcının web sayfasına zararlı JavaScript kodu enjekte etmesidir. Bu kodlar sayesinde:

• Kullanıcının oturum bilgileri çalınabilir,
• Sayfa içeriği değiştirilebilir,
• Arka planda zararlı yönlendirmeler yapılabilir,
• Kullanıcıların girdiği formlar izlenebilir.

React tabanlı uygulamalar genelde bu saldırılara karşı korumalıdır; fakat SSR kullanıldığında işin rengi değişebilir.

🔄 SSR ile XSS Nasıl Ortaya Çıkar?

Next.js’te getServerSideProps gibi SSR fonksiyonları sayesinde sayfalar sunucuda hazırlanır ve istemciye HTML olarak döner. Eğer bu süreçte, kullanıcılardan gelen içerikler yeterince filtrelenmeden HTML’e gömülürse XSS riski doğar.

🔥 Tehlikeli Örnek:

jsxKopyalaDüzenle// getServerSideProps içinde döndürülen kullanıcı verisi:
return {
  props: {
    comment: '<script>alert("XSS!");</script>',
  },
};

// Component içinde:
<div dangerouslySetInnerHTML={{ __html: comment }} />

Bu kod ile kullanıcıdan gelen bir yorum, doğrudan HTML olarak sayfaya basılırsa; zararlı JavaScript kodları da istemci tarafında çalıştırılabilir.

⚠️ SSR’de XSS Riski Hangi Durumlarda Yükselir?

• Kullanıcı verileri doğrudan HTML olarak render edildiğinde
• dangerouslySetInnerHTML sık ve kontrolsüz kullanıldığında
• URL query parametreleri içerik üretiminde kontrolsüz kullanıldığında
• Üçüncü parti veri kaynakları (örneğin CMS, API) filtrelenmeden frontend’e yansıtıldığında

✅ Nasıl Korunuruz?

1️⃣ dangerouslySetInnerHTML’den Uzak Durun

Bu özellik yalnızca zorunlu hallerde kullanılmalı. Eğer illa kullanılacaksa içerik, zararlı kodlardan sanitize (temizlenmiş) olmalı.

🔧 Önerilen kütüphane:
👉 DOMPurify

jsKopyalaDüzenleimport DOMPurify from 'dompurify';

<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(comment) }} />

2️⃣ Sunucu Tarafındaki Verileri Temizleyin

getServerSideProps içinde kullanıcıdan gelen inputlar, veri tabanından çekilen içerikler mutlaka filtrelenmeli.

jsKopyalaDüzenleconst cleanData = sanitizeHtml(dbResponse.comment); // sanitizeHtml örneği
return {
  props: { comment: cleanData },
};

3️⃣ React Bileşenleriyle Render Edin, HTML ile Değil

Eğer mümkünse HTML string kullanmak yerine JSX içinde veri render edin. Örneğin:

jsxKopyalaDüzenle<p>{comment}</p> // Güvenli çünkü React escape eder

4️⃣ Query Parametreleri Üzerinde Kontrol Sağlayın

Kötü niyetli kullanıcılar, URL query’lerine zararlı kodlar ekleyebilir. SSR fonksiyonlarında bu parametreler asla doğrudan sayfaya aktarılmamalı.

jsKopyalaDüzenle// getServerSideProps
const { query } = context;
const searchTerm = sanitizeInput(query.q);

5️⃣ Content-Security-Policy (CSP) Uygulayın

CSP, tarayıcının yalnızca izin verilen kaynaklardan kod çalıştırmasına olanak tanır. Inline script’lerin çalışmasını engelleyerek XSS riskini azaltır.

jsKopyalaDüzenle// next.config.js
headers: [
  {
    key: 'Content-Security-Policy',
    value: "default-src 'self'; script-src 'self';",
  },
],

🛡️ Ekstra Güvenlik Tavsiyeleri

• Form inputları için karakter filtreleme uygulayın.
• HTML encode işlemlerini backend tarafında yapın.
• SSR kullandığınız sayfalarda verileri mutlaka kontrol edin ve sınırlayın.
• Script tag’leri, iframe’ler, event handler’lar (onerror, onclick) içeriklerde yasaklanmalı.

🔍 SSR Güçlüdür Ama Sorumluluk İster

Sunucu taraflı render işlemi, performans ve SEO açısından vazgeçilmezdir. Ancak kullanıcıdan alınan verilerin istemciye doğrudan aktarılması büyük bir güvenlik riskidir. Bu nedenle:

• Temiz ve güvenli kod yazımı,
• Doğru araçlarla veri filtreleme,
• Next.js güvenlik konfigürasyonlarının aktif kullanımı,
  SSR projelerinizi saldırılara karşı dayanıklı hale getirir.

Unutmayın, güvenli bir SSR mimarisi, kullanıcılarınızın ve verilerinizin güvenliği için en önemli adımdır.