Input sanitization

Kullanıcı girişini temizleyip çıktıyı encode ederek XSS önlemeyi öğrenirsin.

HTML escape nedir?

Kullanıcıdan gelen metni HTML olarak sayfaya yazdıracağın zaman escape işlemi yapman gerekir. Bu işlem <, >, & ve " gibi özel karakterleri HTML varlıklarına çevirir.

Böylece tarayıcı bu karakterleri etiket başlangıcı olarak değil, sıradan metin olarak görür. Doğru escape, XSS'nin en temel savunmasıdır.

textContent ile çıktı kodlama

En güvenli çıktı kodlama yöntemi textContent kullanmaktır. Bu özellik, atadığın değeri HTML olarak yorumlamaz; düz metin olarak yazar.

Yani el.textContent = userInput yazdığında, girdi ne olursa olsun etiket olarak işlenmez. Mümkün olduğunca innerHTML yerine textContent tercih et; escape fonksiyonu yazmana bile gerek kalmaz.

Uygulama escapeHtml fonksiyonunu yaz

escapeHtml fonksiyonu yaz, parametre str. Önce str.replace(/&/g, '&') ile & karakterini değiştir, sonra .replace(/</g, '<') ile < ve .replace(/>/g, '>') ile > değiştir. Sonucu döndür.

Örnek çözümü göster

Önce & sonra < sonra > değiştir ve sonucu döndür.
Örnek çözüm:
function escapeHtml(str) {
  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

Kendini test et

Hangisi bir HTML escape işleminin yaptığı iştir?
- Dizeyi eval ile çalıştırmak
- Özel karakterleri HTML varlıklarına çevirmek
- Dizeyi base64 ile kodlamak
- Dizeyi küçük harfe dönüştürmek
Cevabı göster

Özel karakterleri HTML varlıklarına çevirmek — Doğru! Escape, özel karakterleri HTML varlıklarına çevirir.

Karakteri HTML varlığına çevir

function escapeHtml(str) {
  return str.replace(/</g, '____');
}

Cevabı göster

function escapeHtml(str) {
  return str.replace(/</g, '&lt;');
}

Karakteri varlığıyla eşleştir

<

<
>

>
&

&
"

"

Sıradaki ders: Özet - Güvenlik

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler