0Pricing
Frontend Academy · Ders

XSS Önleme: Çıktı Kodlama ve CSP

Yansıtılmış, depolanmış ve DOM tabanlı XSS saldırılarını anlamayı, kullanıcı denetimindeki çıktıları kaçışlamayı, güvenilmeyen verilerle innerHTML kullanmaktan kaçınmayı ve Content Security Policy üstbilgisi eklemeyi öğrenin.

XSS Önleme: Çıktı Kodlama ve CSP, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

XSS Nedir?

Cross-Site Scripting, bir saldırganın sayfanıza çalıştırılabilir JavaScript enjekte etmesiyle gerçekleşir. Tarayıcı, bu kodu kaynağınızın ayrıcalıklarıyla çalıştırır; çerezleri çalabilir, oturumları ele geçirebilir, sayfanın görünümünü değiştirebilir veya kötü amaçlı yazılıma yönlendirebilir.

XSS'in Üç Türü

Stored: kötü amaçlı betik veritabanına kaydedilir ve her ziyaretçiye sunulur. Reflected: girdi yanıtta geri yansıtılır (?q=<script>...). DOM-based: istemci tarafındaki JS, güvenilmeyen verileri DOM'a yazar.

Temel Neden: Güvenilmeyen Verilerle innerHTML

innerHTML (veya v-html, dangerouslySetInnerHTML) ile kullanıcı tarafından denetlenen dizeleri kullanmak, XSS'nin bir numaralı vektörüdür.

// BAD: user input rendered as HTML
el.innerHTML = userComment;  // attacker submits <img onerror=alert(1)>

// Vue equivalent:
<div v-html="userComment"></div>  // same bug

// React equivalent:
<div dangerouslySetInnerHTML={{ __html: userComment }} />  // same bug

Çıktı Kodlaması (Güvenli Varsayılan)

Güvenilmeyen dizeleri HTML olarak değil, metin olarak ele alın. React, Vue, Angular ve Svelte, {value} enterpolasyonunda bunu varsayılan olarak yapar.

// SAFE: text content, not HTML
el.textContent = userComment;  // <script> shows as literal text

// React (auto-escaped):
<div>{userComment}</div>

// Vue (auto-escaped):
<div>{{ userComment }}</div>

HTML Oluşturmanız Gerektiğinde Temizleme

Kullanıcı HTML'sini gerçekten oluşturmanız gerekiyorsa (zengin metin düzenleyicilerinde olduğu gibi) DOMPurify ile temizleyin; kendi düzenli ifade tabanlı temizleyicinizi asla yazmayın.

import DOMPurify from 'dompurify';

const clean = DOMPurify.sanitize(userHtml);
el.innerHTML = clean; // strips <script>, on* handlers, dangerous URLs

URL Doğrulama

href veya src içindeki kullanıcı denetimli URL'ler, javascript: şemaları aracılığıyla XSS tetikleyebilir.

// BAD:
<a href={userUrl}>Click</a>
// attacker submits: javascript:alert(1)

// GOOD: whitelist protocols:
function safeUrl(url) {
  if (!/^https?:\/\//.test(url) && !url.startsWith('/')) return '#';
  return url;
}

İçerik Güvenlik İlkesi (CSP)

CSP, hangi betik, stil, görüntü ve diğer kaynaklara izin verildiğini tarayıcıya bildiren bir HTTP yanıt üst bilgisidir. Saldırgan betik enjekte etse bile tarayıcı bunu çalıştırmayı reddeder.

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.trusted.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:

Nonce'larla Katı CSP

Denetlediğiniz satır içi betikler için istek başına bir nonce kullanın. Saldırganın enjekte ettiği betiklerde eşleşen nonce bulunmaz.

// Server generates a random nonce per request:
const nonce = crypto.randomBytes(16).toString('base64');
res.setHeader('Content-Security-Policy', `script-src 'nonce-${nonce}' 'strict-dynamic'`);

// Inject into the HTML:
<script nonce="abc123">/* trusted inline code */</script>

HttpOnly + Güvenli Çerezler

Oturum çerezlerini HttpOnly ile ayarlayarak JavaScript'in bunları okuyamamasını sağlayın; XSS gerçekleşse bile saldırgan oturum belirtecini ele geçiremez.

Set-Cookie: session=abc; HttpOnly; Secure; SameSite=Strict

Alt Kaynak Bütünlüğü (SRI)

CDN üzerinden üçüncü taraf betikleri yüklerken içeriğin bir hash ile eşleştiğini doğrulamak için SRI kullanın. Ele geçirilmiş bir CDN, hash denetimini bozmadan kötü amaçlı betik sunamaz.

<script
  src="https://cdn.example.com/lib.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  crossorigin="anonymous"
></script>

Güvenilir Türler (Deneysel)

Güvenilir Türler, tehlikeli hedeflerin (innerHTML) bir Güvenilir Tür nesnesi almasını zorunlu kılan tarayıcı özelliğidir (Chromium tabanlıdır) — böylece dizelerin doğrudan eklenmesini tamamen önler.

XSS'yi Sınama

Geri oluşturulan her metin girişine <img src=x onerror=alert(1)> eklemeyi deneyin. Bir uyarı görürseniz XSS hatanız var demektir. Otomatik taramalar için OWASP ZAP gibi araçları kullanın.

Hızlı Kontrol

React'in {userInput} ifadesi varsayılan olarak güvenliyken dangerouslySetInnerHTML neden güvenli değildir?

Özet: XSS'yi Önleme

Varsayılan olarak metin oluşturmayı tercih edin (React'in {x} ve Vue'nun {{ x }} ifadeleri güvenlidir). HTML oluştururken DOMPurify ile temizleyin. URL protokollerini beyaz listeye alın. CSP üstbilgisi (nonce'lar veya 'strict-dynamic' ile) eklenen betikleri engeller. HttpOnly çerezler JS tarafından çalınmalarını önler. CDN betikleri için SRI hash'leri kullanın. Girdileri klasik yüklerle sınayın.

Sıkça Sorulan Sorular

“XSS Önleme: Çıktı Kodlama ve CSP” dersi ücretsiz mi?

Evet — “XSS Önleme: Çıktı Kodlama ve CSP” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“XSS Önleme: Çıktı Kodlama ve CSP” dersinde ne öğreneceğim?

Yansıtılmış, depolanmış ve DOM tabanlı XSS saldırılarını anlamayı, kullanıcı denetimindeki çıktıları kaçışlamayı, güvenilmeyen verilerle innerHTML kullanmaktan kaçınmayı ve Content Security Policy üs… Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“XSS Önleme: Çıktı Kodlama ve CSP” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. XSS Önleme: Çıktı Kodlama ve CSP
  2. CSRF: SameSite Çerezleri ve Belirteçleri
  3. Content Security Policy: nonce ve hash
  4. Ön Uçtan OAuth Akışları
← Frontend Academy Sayfasına Dön