JavaScript ile HTML encode ve decode fonksiyonları
Web sayfalarında HTML metnini güvenli biçimde encode/decode etmek için kullanılabilecek iki pratik JavaScript fonksiyonu.
Kullanıcıdan gelen bir metni sayfaya olduğu gibi yazdırırsanız, içindeki HTML etiketleri tarayıcı tarafından kod olarak çalıştırılır. Bu, bozuk görünümden başlayıp siteye zararlı betik enjekte edilmesine kadar giden bir sorundur. Kodlama (encode) işlemi bu etiketleri zararsız metne çevirir; çözme (decode) ise tersini yapar.
Aşağıdaki iki işlev bunu tarayıcının kendi ayrıştırıcısıyla yapar. Elle yazılmış değiştirme listeleri (& için şunu, < için bunu…) her zaman eksik kalır; DOMParser ise tarayıcının HTML kurallarının tamamını uygular, dolayısıyla gözden kaçan bir karakter kalmaz.
Kullanım yeri önemlidir: veriyi saklarken değil, gösterirken kodlayın. Ham veriyi olduğu gibi saklamak, ileride başka bir ortamda (mobil uygulama, API, e-posta) kullanabilmenizi sağlar.
function htmlDecode(encoded_html) {
var htmlDoc = new DOMParser().parseFromString(encoded_html, "text/html");
return htmlDoc.documentElement.textContent;
}
function htmlEncode(html_string) {
var htmlDoc = new DOMParser().parseFromString("", "text/html");
htmlDoc.documentElement.textContent = html_string;
return htmlDoc.documentElement.innerHTML;
}
Kısa rehber
Ne zaman kullanılır?
HTML encode/decode; kullanıcıdan gelen metni sayfada güvenli göstermek, editör çıktısını saklamak veya API'den gelen içeriği doğru sunmak için kullanılır. Özellikle yönetim panellerinde küçük görünen ama önemli bir konudur.
Dikkat edilecekler
- Kullanıcı girdisini doğrudan HTML içine basmayın.
- Encode ve sanitize kavramlarını karıştırmayın; biri karakterleri kaçırır, diğeri izin verilmeyen HTML'i temizler.
- Aynı veriyi iki kez encode edip ekranda < gibi çıktılar üretmediğinizden emin olun.
Sık yapılan hata
En sık hata, encode işlemini güvenlik filtresi sanmaktır. XSS riskini azaltmak için bağlama göre encode, temizleme ve doğrulama birlikte düşünülmelidir.
Bu örnek nerede işe yarar?
Bu tür küçük yardımcı kodlar web yazılımı, mobil uygulama arka uçları, yönetim panelleri ve API projelerinde zaman kazandırır. Önemli olan örneği olduğu gibi kopyalamak değil, veri formatı, güvenlik ve performans beklentisine göre projeye uyarlamaktır.