Özet - Güvenlik
textContent, escape fonksiyonu ve CSP başlıklarıyla güvenli bir yorum render fonksiyonu yazarsın.
Özet - Güvenlik
Bu grupta XSS saldırılarını ve savunmalarını öğrendin. Üç ana konu: güvenli DOM güncelleme (textContent), dinamik erişimde eval'den kaçınma ve giriş verisini escape etme.
Ek olarak Content-Security-Policy ile tarayıcıya hangi kaynakların güvenli olduğunu söyleyebilir, nonce ile seçici izin verebilirsin. Bu katmanlar birlikte derin savunma sağlar.
Uygulama Yorumu güvenli render et
renderComment fonksiyonu yaz, parametre comment. const el = document.createElement('div') ile öğe oluştur. el.textContent = comment ile yorumu ata. return el ile öğeyi döndür.
Örnek çözümü göster
Önce fonksiyonu tanımla, sonra div öğesi oluştur, textContent'e comment ata, son olarak el'i döndür.
Örnek çözüm:
function renderComment(comment) {
const el = document.createElement('div');
el.textContent = comment;
return el;
}Uygulama Yorumu escape et ve güvenli yaz
showComment fonksiyonu yaz, parametre text. const safe = escapeHtml(text) ile metni escape et. const el = document.createElement('div') ile öğe oluştur. el.textContent = safe ata. document.body.appendChild(el) ile sayfaya ekle.
Örnek çözümü göster
Önce escape et, sonra div oluştur, sonra textContent'e ata, son olarak body'e ekle.
Örnek çözüm:
function showComment(text) {
const safe = escapeHtml(text);
const el = document.createElement('div');
el.textContent = safe;
document.body.appendChild(el);
}Kendini test et
-
Güvenlik kavramlarını eşleştir
- textContent
- güvenli metin
- innerHTML
- riskli HTML
- eval
- kod çalıştırır
- nonce
- tek kullanımlık
-
Hangisi XSS'e karşı en etkili savunmadır?
- Kullanıcı girdisini escape edip textContent ile yazmak
- Girdiyi doğrudan innerHTML'e yazmak
- Girdiyi eval ile çalıştırmak
- Girdiyi localStorage'a kaydetmek
Cevabı göster
Kullanıcı girdisini escape edip textContent ile yazmak — Doğru! Escape ve textContent birlikte XSS'i kökten önler.