Web Güvenliğinin Görünmez Kahramanları: HTML Entity'ler
İnternet dünyasında gördüğünüz her web sayfası, arka planda HTML adı verilen bir işaretleme diliyle çalışır. Ancak bu dilin bazı "rezerve edilmiş" karakterleri vardır. Bir metin içinde küçüktür (<) veya büyüktür (>) işareti kullandığınızda, tarayıcı bunu bir kod parçası sanıp sitenizi bozabilir veya daha kötüsü, güvenlik açıklarına yol açabilir. İşte HTML Entity'ler burada devreye girer.
XSS Saldırıları ve Korunma Yöntemi
Güvenlik Uyarısı
Kötü niyetli bir kullanıcı, sitenizin yorum kısmına şu kodu yazabilir:<script>alert('Hacked!');</script>
Eğer bu metni olduğu gibi veritabanına kaydedip ekrana basarsanız, sayfayı açan herkesin tarayıcısında bu kod çalışır. Buna Cross-Site Scripting (XSS) denir.
Çözüm: Encode Etmek!
Tarayıcıya <script> gönderirseniz, kullanıcı ekranda `script` yazısını görür ama kod ARKA PLANDA ÇALIŞMAZ.
Nasıl Çalışır? (Syntax Yapısı)
Bir HTML Entity'si her zaman üç parçadan oluşur:
- Başlangıç: Ampersand işareti (
&) - Gövde: Karakterin ismi (örn:
copy) veya sayısal kodu (örn:#169) - Bitiş: Noktalı virgül (
;)
| Karakter | Anlamı | Named Entity | Numeric Entity |
|---|---|---|---|
| < | Küçüktür | < | < |
| > | Büyüktür | > | > |
| " | Çift Tırnak | " | " |
| & | Ampersand | & | & |
| © | Telif Hakkı | © | © |
Evrensel Uyumluluk (ASCII vs Unicode)
Eski bilgisayar sistemleri sadece 128 karakterlik (ASCII) tabloyu desteklerdi. Bu tabloda Türkçe karakterler (ğ, ş, ı) veya Emoji'ler yoktu. Günümüzde UTF-8 standardı ile milyonlarca karakteri gösterebiliyoruz. Ancak, e-posta başlıklarında veya çok eski veritabanlarında hala sorun yaşanabilir.
HTML Entity kullanmak, "Karakter Kodlaması" (Charset) ne olursa olsun sembolün doğru görünmesini garanti eder. Örneğin, ♥ yazdığınızda, tarayıcı Japonya'da da Amerika'da da bunu ♥ olarak gösterir.
Yazılımcılar İçin İpuçları
Yaygın Entity Referansları
< (<), > (>), & (&), " ("), ' (') en kritik beşlidir. kırılmayan boşluk; © telif; ® kayıt; ™ ticari marka. Sayısal format { ile karakter kodu yazılır; Unicode için 😀 (hex) kullanılır. Emoji ve özel semboller için numeric entity tercih edilir; named entity'ler sınırlı sayıdadır.
React / JSX Kullanımı
React, varsayılan olarak tüm string çıktılarını otomatik olarak escape eder (XSS koruması için). Ancak, veritabanından gelen HTML'i render etmek isterseniz dangerouslySetInnerHTML kullanmanız gerekir.
Boşluk Karakteri ( )
Normalde HTML birden fazla boşluğu tek boşluğa indirger. Kelimeler arasına 10 tane boşluk koymak isterseniz 10 tane (Non-Breaking Space) yazmalısınız.
PHP ve Node.js
PHP: htmlspecialchars() ve htmlentities() fonksiyonları encode yapar. Node.js: he veya entities paketleri kullanılır. Veritabanına kaydetmeden önce encode, ekrana basarken context'e göre decode veya güvenli render tercih edilir.
Özet ve Pratik Kullanım
Metni kutuya yapıştırın; Encode veya Decode seçin. Sonuç anında üretilir; Kopyala butonu ile alın. XSS koruması için <, >, ", ', & mutlaka encode edilmeli. Tüm metni encode etmek dosya boyutunu artırır; sadece tehlikeli karakterleri encode etmek genellikle yeterlidir. Backend tarafında da validation yapın; tek başına entity encoding tam güvenlik sağlamaz.
Named entity (<) okunabilir; numeric entity (<) evrensel. Eski tarayıcılarda numeric daha garantili. Decode işlemi API veya veritabanından gelen HTML'i okunabilir hale getirir. Bu araç ücretsiz; veri sunucuya gönderilmez. Mobil uyumludur. JSON içinde HTML saklarken tırnak ve ters slash escape edilir; HTML entity ayrı bir konudur. RSS feed'lerinde ve e-posta HTML'inde entity kullanımı yaygındır. SEO açısından sayfa başlığında özel karakter kullanmak isterseniz entity ile yazın; tarayıcı doğru gösterir. W3C standartlarında 2000+ named entity tanımlıdır; hepsi bu araçla encode/decode edilebilir.
Sıkça Sorulan Sorular
Kullanım Senaryoları
Blog yorumlarına kullanıcı metni yazıyorsa, form verisi veritabanına kaydedilmeden önce encode edilmelidir. E-posta şablonlarında HTML kullanıyorsanız tırnak ve özel karakterler entity'ye çevrilmelidir. PDF veya rapor oluştururken < ve > karakterleri escape edilmezse XML/HTML parser hata verebilir. API response'unda JSON içinde HTML string varsa çift encode (double encoding) yapmayın; bir kez yeterlidir. Tarayıcı otomatik decode eder; sunucuya gönderirken encode, kullanıcıya gösterirken decode mantığını uygulayın. Content-Security-Policy (CSP) header'ı XSS'i ek önlemlerle engeller; entity encoding tek başına yeterli olmayabilir. innerHTML kullanırken dikkatli olun; textContent tercih edilirse otomatik escape olur. Bu araç ile test verisi hazırlayabilir, güvenlik audit'inde encode/decode doğrulaması yapabilirsiniz. JavaScript'te textContent kullanarak otomatik escape sağlayın; innerHTML ile ham HTML verirseniz XSS riski oluşur. Python'da html.escape(), C#'ta HttpUtility.HtmlEncode kullanılır. Bu araç ücretsizdir; kayıt gerekmez. Veri sunucuya gönderilmez; tüm işlem tarayıcıda yapılır. Web geliştiriciler ve güvenlik test uzmanları için faydalıdır. Mobil cihazlarda da kullanılabilir. Anında encode/decode yapılır; büyük metinlerde de hızlı çalışır. Kopyala butonu ile sonucu kolayca alabilirsiniz. Reklamsız; anında dönüşüm. XSS koruması için encode kullanın. Web geliştiriciler için ideal. Veri saklanmaz; güvenli kullanım. Anında encode ve decode işlemi. Kayıt gerekmez. Mobil uyumludur. Reklamsızdır. Ücretsiz kullanım. Anında sonuç.
Decode işlemi neden gereklidir?
Bazen API'den veya veritabanından veri çektiğinizde metin size `<p>Merhaba</p>` şeklinde gelebilir. Bunu kullanıcıya okunabilir HTML olarak sunmak (render etmek) için önce decode etmeniz veya HTML parser kullanmanız gerekir.
Emoji'ler entity midir?
Evet, her emojinin bir Unicode karşılığı ve dolayısıyla bir HTML entity kodu vardır. Örneğin 😀 emojisi 😀 koduna sahiptir.