Proje sonu - Güvenli yorum

Yorum uygulamasını tamamlayıp XSS-korunmalı render ve CSP uygulamasını çalıştırırsın.

Son entegrasyon

Son derste tüm parçaları birleştirip uygulamayı tamamlayacağız. Form işleyici yorumu okuyup renderComment ile güvenli ekler; sonra input'u temizler.

Bir initApp işlevi ile uygulamayı başlatırız: input'a odaklanır ve hazır hale getirir.

Böylece uygulamamız üç katmanlı korumaya sahip olur: textContent, escapeHtml ve CSP.

Ne inşa ettik?

Beş dersin sonunda güvenli bir yorum uygulaması oluşturduk:

Form submit dinleyici ile yorum yakalama
textContent ile XSS-korunmalı render
escapeHtml ile ek kodlama katmanı
CSP meta etiketi ile script kısıtı
Input temizleme ve initApp ile başlatma

Uygulama artık canlıda kullanıma hazır.

Uygulama Uygulamayı tamamla

Submit işleyiciye commentInput.value = ""; satırını ekle (renderComment çağrısından sonra) ki her yorumdan sonra input temizlensin. Sonra initApp işlevini tanımla: içinde commentForm.querySelector("#commentText").focus() çağrısı olsun. En son initApp() çağrısı ile uygulamayı başlat.

Örnek çözümü göster

commentForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const commentInput = commentForm.querySelector("#commentText");
  const text = commentInput.value;
  renderComment(text);
  commentInput.value = "";
});

function initApp() {
  commentForm.querySelector("#commentText").focus();
}
initApp();

Kendini test et

Üç katmanlı koruma
```
textContent + escapeHtml + CSP
```
- Sadece CSP yeterli
- Sadece escapeHtml yeterli
- textContent + escapeHtml + CSP birlikte
- innerHTML + CSP yeterli
Cevabı göster

textContent + escapeHtml + CSP birlikte — Doğru! Derin savunma: textContent + escapeHtml + CSP.

initApp çağrısı

function initApp() {
  commentForm.querySelector("#commentText").focus();
}
____

Cevabı göster

function initApp() {
  commentForm.querySelector("#commentText").focus();
}
initApp();

Tehdit ve savunma eşleştir

XSS

textContent ile önlenir
Inline script

CSP ile engellenir
HTML enjeksiyon

escapeHtml ile kodlanır
Sayfa yenileme

preventDefault ile durdurulur

Sıradaki ders: Metaprogramlama nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler