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
textContentile XSS-korunmalı renderescapeHtmlile ek kodlama katmanı- CSP meta etiketi ile script kısıtı
- Input temizleme ve
initAppile 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