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