XSS-korunmalı render
textContent ve escape fonksiyonu ile kullanıcı girişini güvenli gösterirsin.
Neden textContent?
innerHTML metni HTML olarak yorumlar; bu yüzden <script> etiketi veya olay özniteliği içeren metin XSS saldırısına yol açar.
textContent ise metni düz metin olarak yerleştirir; etiketler karakter olarak görünür, script çalışmaz.
Yine de ek güvenlik için bir escapeHtml işlevi yazacağız: &, <, > karakterlerini HTML varlıklarına çevirir.
escapeHtml işlevi
escapeHtml işlevi üç tehlikeli karakteri HTML varlıklarına çevirir: & işaretini, küçük ve büyük işaret karakterlerini. Böylece kullanıcı metnindeki etiketler ekranda metin olarak görünür, script olarak çalışmaz.
İşlev bir ok fonksiyonu olarak yazılır ve replace zinciri döndürür. Her replace çağrısı bir önceki sonucu alır ve sonraki değişikliği uygular.
Bu katman textContent ile birlikte derin savunma sağlar: bir katman bypass edilse bile diğer korur.
Uygulama Güvenli render yaz
Bir escapeHtml ok fonksiyonu yaz: &, <, > karakterlerini HTML varlıklarına çevirsin (replace zinciri ile). Sonra renderComment(text) işlevini yaz: document.createElement("p") ile paragraf oluştur, .textContent = text ile metni güvenli koy ve commentsEl.appendChild(p) ile ekle.
Örnek çözümü göster
const escapeHtml = (str) => str
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">");
function renderComment(text) {
const p = document.createElement("p");
p.textContent = text;
commentsEl.appendChild(p);
}Kendini test et
-
Hangisi kullanıcı metni için güvenli?
el.____ = userInput;- element.innerHTML = text
- element.insertAdjacentHTML = text
- document.write(text)
- element.textContent = text
Cevabı göster
element.textContent = text — Doğru! textContent HTML yorumlamaz, XSS güvenli.
-
escapeHtml replace
const escapeHtml = (str) => str .replace(/</g, "____") .replace(/>/g, ">");Cevabı göster
const escapeHtml = (str) => str .replace(/</g, "<") .replace(/>/g, ">"); -
Karakter-varlık eşleştir
- &
- &
- <
- <
- >
- >
- "
- "