Ücretsiz HTML Varlık Kodlayıcı — HTML Escape

HTML Varlık Kodlaması Nedir?

// Server-side templates auto-escape, but when you build HTML by hand you must escape yourself.
// The five reserved characters and their safe entities:
//   <  →  &lt;     >  →  &gt;     &  →  &amp;     "  →  &quot;     '  →  &#x27;

// Node.js — escape untrusted input before inserting it into HTML element content.
function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')   // & first, so later entities are not double-escaped
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;'); // numeric form — safe in HTML4, HTML5 and XML
}

const userInput = `<a href="x">Tom & Jerry's</a>`;
const safe = escapeHtml(userInput);
// → &lt;a href=&quot;x&quot;&gt;Tom &amp; Jerry&#x27;s&lt;/a&gt;
document.getElementById('out').innerHTML = `<p>${safe}</p>`; // renders as literal text

// ---------------------------------------------------------------
// In practice, prefer the platform's built-in escaping where it exists:
//   - React / Vue / Angular escape interpolated text by default
//   - Use textContent instead of innerHTML when you only need text:
//       el.textContent = userInput;  // the browser escapes for you
//   - Server frameworks (Jinja, ERB, Blade) auto-escape unless you opt out

Öne Çıkan Özellikler

Çözümlü Örnekler

<a href="x">Tom & Jerry's</a>

<a href="x">Tom & Jerry's</a>

Visit our café — it's 😀

Visit our café — it's 😀

<>&"'

<>&"'

<>&"'

<>&"'

café

café  (named)  ·  café  (decimal)  ·  café  (hex)

HTML Varlık Kodlayıcı Nasıl Kullanılır

1. 1

   HTML veya metninizi yapıştırın

   Escape etmek istediğiniz işaretlemeyi ya da düz metni giriş kutusuna bırakın. Kodlanmış çıktı siz yazdıkça canlı güncellenir — gönder düğmesi yoktur ve hiçbir yere bir şey gönderilmez.

2. 2

   Varlık biçimini seçin

   Adlı, okunabilir varsayılandır (<, &, ©). Tüketen bir sistem sayısal referans tercih ettiğinde ya da adlı varlıkların desteklendiğini garanti edemediğinizde Ondalık (<) veya Hex (<) biçimine geçin.

3. 3

   İsteğe bağlı olarak tüm ASCII dışını kodlayın

   Aksanların ve emojilerin okunabilir ham karakterler olarak kalması için modern UTF-8 sayfalarında bunu kapalı bırakın. Yalnızca metnin eski bir tek baytlık karakter kümesinden geçmesi gerektiğinde işaretleyin; bu, 0x7F üzerindeki her karakteri ASCII güvenli bir varlığa dönüştürür.

4. 4

   Kodlanmış sonucu kopyalayın

   Escape edilmiş dizeyi panonuza koymak için Kopyala'ya tıklayın; bir şablona, bir belge sayfasına ya da bir veritabanı alanına yapıştırmaya hazırdır. Temizle, bir sonraki parçacık için her iki bölmeyi de sıfırlar.

5. 5

   Tersi mi gerekiyor? Yönü değiştirin

   Varlıkları temsil ettikleri karakterlere geri dönüştürmek istediğinizde HTML Varlık Çözücü'ye geçmek için Yönü değiştir'i kullanın.

Yaygın HTML Kodlama Hataları

replace < and > first, then &  →  &lt;  becomes  &amp;lt;

escape & first, then the rest  →  <  stays  <

It's here  →  may render as  It's here

It's here  →  renders as  It's here

&  encoded again  →  &  shows as  &

&  left as-is  →  renders as  &

href="/search?q=a&b c"  →  the space still breaks the URL

href="/search?q=a%26b%20c"  →  URL-encoded, valid

café on a UTF-8 page  →  needless, harder to read

café on a UTF-8 page  →  valid and clean

title="He said "hi""  →  attribute breaks out

title="He said "hi""  →  contained

Bu Aracı Kimler Kullanır

Bir Web Sayfasında Kod Örnekleri Gösterin

Düz metin HTML göstermesi gereken bir öğretici ya da belge mi yazıyorsunuz? Parçacığı escape edin ki <strong>bold</strong> işlenmek yerine metin olarak görünsün. İşaretlemeyi yapıştırın, escape edilmiş çıktıyı kopyalayın ve bir <pre> ya da <code> bloğunun içine bırakın.

XSS'e Karşı Kullanıcı Girdisini Temizleyin

Kullanıcı tarafından sağlanan herhangi bir dizeyi HTML'inize eklemeden önce beş ayrılmış karakteri escape edin ki <script>…</script> gibi bir yük etkisiz metne dönüşsün. İşaretlemeyi elle oluşturduğunuzda siteler arası betik çalıştırmaya karşı temel savunma budur.

İşaretlemeyi Bir Veritabanı Alanında veya JSON'da Saklayın

Bir HTML parçacığını, aşağı akışta yorumlanmadan düz dize olarak kaydetmeniz mi gerekiyor? Önce kodlayın ki açılı parantezler ve ve işaretleri depolamadan ve yeniden gösterimden sağlam çıksın, sonra dönüş yolunda çözün.

E-posta Şablonları ve CMS İçeriği Yazın

E-posta istemcileri ve içerik yönetim sistemleri ham özel karakterler konusunda affetmezdir. Ayrılmış kümeyi — ve isteğe bağlı olarak tüm ASCII dışını — escape edin ki şablonunuz, karakter kümenizi paylaşmayan istemciler arasında tutarlı işlensin.

Metni Eski Bir Karakter Kümesi İçin Dönüştürün

Ham UTF-8'i işleyemeyen bir sistemi mi hedefliyorsunuz? Her aksanlı harfi, simgeyi ve emojiyi ASCII güvenli bir varlığa yeniden yazmak için "Tüm ASCII dışını kodla" seçeneğini açın; böylece metin 7 bit temiz boru hatlarından sağlam geçer.

XML ve SVG Öznitelik Değerlerini Escape Edin

XML ve satır içi SVG, HTML'in ayrılmış karakterlerini paylaşır. Gömülü işaretleme içeren bir dize, belge yapısını bozmadan bir öznitelik değerine güvenle yerleşsin diye tırnakları ve açılı parantezleri kodlayın.

Bir Varlığı Hızla Arayın

Ticari marka işaretinin ™ mi yoksa ™ mi olduğunu mu unuttunuz? Karakteri yazın, adlı, ondalık ve hex varlığını çıktıdan okuyun ya da sayfadan ayrılmadan yerleşik hızlı başvuru tablosuna bakın.

Kodlayıcı Nasıl Çalışır

Özel Karakterler Modu (Varsayılan)

Varsayılan olarak yalnızca beş HTML-ayrılmış karakter escape edilir — & < > " ' — güvenli çıktı için WHATWG HTML serileştirme kurallarını izleyerek. Diğer karakterler için üretilen varlıkların iki kez escape edilmemesi adına önce & değiştirilir. ASCII dışı dahil tüm diğer karakterler değişmeden geçer.

Kesme İşareti ' Kullanır

HTML4'te tanımsız ve bazı eski ayrıştırıcılarda güvensiz olan adlı ' yerine, tek tırnak sayısal ' (ondalık ') olarak verilir ve U+0027'ye referans verir. Bu, he gibi iyi test edilmiş kütüphanelerin uzlaşımıyla eşleşir ve çıktının HTML4, HTML5 ve XML'de aynı şekilde güvenli olmasını garanti eder.

Adlı, Ondalık ve Hex Kodlama

Biçim seçici her escape edilmiş karakterin nasıl yazıldığını denetler: Adlı, var olan tanımlı etiketleri kullanır (<, ©), Ondalık Unicode kod noktasını 10 tabanında yazar (<) ve Hex onu 16 tabanında yazar (<). Sayısal biçimler adlı biçimlerle aynı kod noktalarına referans verir ve ayrıştırıldığında birbirinin yerine geçer.

Tüm-ASCII-Dışını-Kodla Seçeneği

Etkinleştirildiğinde 0x7F üzerinde kod noktasına sahip her karakter, seçilen biçimde bir varlığa dönüştürülür — café, café (adlı), café (ondalık) ya da café (hex) olur. Emoji gibi astral karakterler tam kod noktalarıyla kodlanır (😀 → 😀). Bu, eski taşıma için 7 bit temiz ASCII çıktısı üretir.

Karakter Kümesi ile Varlıklar Karşılaştırması

Bir karakter kümesi metnin bayt olarak nasıl saklandığını tanımlar; bir varlık ise bir karakteri yalnızca ASCII kullanarak yazmanın bir yoludur. Bir UTF-8 sayfasında ASCII dışı karakterler hiç varlık gerektirmez, bu yüzden varsayılan onları ham bırakır. Her şeyi kodlamak yalnızca çıktının Unicode olmayan bir karakter kümesinden ya da UTF-8'e düşman bir sistemden geçmesi gerektiğinde gereklidir.

Tarayıcıda Yerel, Sıfır Ağ

Kodlama, ana iş parçacığında JavaScript ile eşzamanlı çalışır; API çağrısı, bir sunucuya işçi gidip gelmesi ya da kalıcılık yoktur. Girdi sayfadan hiç ayrılmaz; bunu yazarken boş bir Network panelini izleyerek doğrulayabilirsiniz.

HTML Escape En İyi Uygulamaları

Çıktıda, Doğru Bağlamda Escape Edin

Veriyi aldığınızda değil, HTML'e eklediğiniz anda kodlayın ve kodlamayı bağlama uydurun. HTML varlık kodlaması HTML öğe ve öznitelik içeriği içindir; URL'ler içinde URL kodlaması, betik blokları içinde JavaScript/JSON escape'i kullanın. Yanlış bağlamda escape etmek bir açık bırakır.

Güvenilmeyen Girdiyi Her Zaman Escape Edin

Bir kullanıcıdan, bir yüklemeden ya da harici bir API'den gelen her dize, işaretlemenize girmeden önce escape edilmelidir. Temel XSS savunması budur: <script>alert(1)</script> gibi bir yük, açılı parantezler varlık olunca etkisiz metne dönüşür.

Var Olduğunda Yerleşik Escape'i Tercih Edin

React, Vue ve çoğu sunucu şablon motoru ara değer atanan metni otomatik escape eder; element.textContent atamak da sizin için escape eder. Bu aracı tek seferlik dönüşümler ve çıktıyı anlamak için kullanın — ama uygulama kodunda escape'i elle yazmak yerine çatının otomatik escape'ine yaslanın.

UTF-8 Sayfalarında ASCII Dışını Ham Bırakın

Sayfanız <meta charset="utf-8"> bildiriyorsa aksanları ve emojileri varlıklara kodlamayın — ham UTF-8 daha kısa, daha okunabilir ve aynı ölçüde doğrudur. "Tüm ASCII dışını kodla" seçeneğini gerçekten gerektiren hakiki eski karakter kümesi durumlarına saklayın.

Karışık Bağlamlarda Sayısal Kesme İşaretini Kullanın

Çıktı eski ayrıştırıcılar, XML işlemcileri ya da e-posta istemcileri tarafından tüketilebilecekse, tek tırnak için adlı ' yerine sayısal ' tercih edin. Sayısal biçim her yerde anlaşılır; adlı biçim değil ve işlenen metinde başıboş bir düz metin "'" yaygın, önlenebilir bir hatadır.

Sıkça Sorulan Sorular