innerHTML riskleri

innerHTML'in XSS açığı nasıl oluşturduğunu ve güvenli alternatifleri öğrenirsin.

innerHTML'in riski

innerHTML, atadığın dizeyi HTML olarak yorumlar. Eğer bu dize kullanıcıdan geliyorsa, içindeki etiketler ve scriptler çalışır. Bu, en sık görülen XSS kapısıdır.

Örneğin el.innerHTML = userInput yazdığında, userInput içindeki <script> etiketi tarayıcı tarafından kod olarak işlenir. Verinin güven olduğundan emin olmadıkça innerHTML'den uzak dur.

textContent güvenlidir

textContent, atadığın değeri HTML olarak değil, düz metin olarak yazar. Etiketler ve varlıklar yorumlanmaz; tarayıcı onları olduğu gibi görüntüler.

Yani el.textContent = userInput yazdığında, girdi ne olursa olsun etiket olarak işlenmez. Kullanıcıdan gelen metni bir öğeye yazacaksan ilk seçenek her zaman textContent olmalıdır.

Uygulama Rozet oluştur

createBadge fonksiyonu yaz, parametre label. document.createElement('span') ile badge öğesi oluştur. badge.textContent'e label değerini ata ve badge döndür.

Örnek çözümü göster

Önce fonksiyonu tanımla, sonra span öğesi oluştur, textContent'e label ata, son olarak badge'i döndür.
Örnek çözüm:
function createBadge(label) {
  const badge = document.createElement('span');
  badge.textContent = label;
  return badge;
}

Kendini test et

Hangisi güvenli DOM güncelleme yöntemidir?
- element.textContent = userInput
- element.innerHTML = userInput
- element.outerHTML = userInput
- document.write(userInput)
Cevabı göster

element.textContent = userInput — Doğru! textContent değeri düz metin olarak yazar ve XSS'i önler.

textContent ile güvenli atama

const el = document.getElementById('msg');
el.____ = 'Hoş geldin';

Cevabı göster

const el = document.getElementById('msg');
el.textContent = 'Hoş geldin';

DOM özelliklerini eşleştir

textContent

metin olarak yazar
innerHTML

HTML olarak yorumlar
outerHTML

etiketi değiştirir
innerText

görünür metni verir

Sıradaki ders: CSP temelleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler