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, "&amp;")
  .replace(/</g, "&lt;")
  .replace(/>/g, "&gt;");

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, "&gt;");

Cevabı göster

const escapeHtml = (str) => str
  .replace(/</g, "&lt;")
  .replace(/>/g, "&gt;");

Karakter-varlık eşleştir

&

&
<

<
>

>
"

"

Sıradaki ders: CSP ve nonce

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler