Ö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.

Sıradaki ders: Proje: Güvenli yorum uygulaması

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler