HTML varlık kodlama nasıl çalışır
HTML varlığı, tarayıcının sayfa ayrıştırılırken tek karaktere geri çevirdiği bir karakter referansıdır. Beş ayrılmış HTML karakteri (<, >, &, ", ') metin HTML olarak oluşturulduğunda her zaman kodlanmalıdır; geri kalanlar isteğe bağlıdır ve belge kodlamasına bağlıdır.
- Mod ve kapsam seçin. Kodlama modu girişinizi karakter karakter işler. Çözme modu ise varlık kalıplarını arayarak girişi tarar. Kapsam geçişi yalnızca beş HTML-güvenli karakterin mi kodlanacağını, yoksa ASCII dışındaki her kod noktasının da mı yeniden yazılacağını belirler.
- Varlık stili seçin. Adlı varlıklar (
©) kaynak kodda okunabilir görünür. Ondalık (©) ve hex (©) referanslar isim gerektirmeden her Unicode kod noktasını taşır. Eski e-posta istemcileri ve XML ayrıştırıcıları sayısal formları tercih eder. - Girişi işleyin. Kodlamada her kod noktasını okur ve yaklaşık 200 yaygın adlı varlığı içeren yerleşik tabloya bakılır. Eşleşmeyenler sayısala dönüşür. Çözmede ise
&name;,&#NNN;ve&#xHH;kalıplarını tek geçişte eşleştiren tek bir regex ile taranır. - Karakterlere eşleyin. Adlı eşleşmeler ters tablo üzerinden çözülür. Sayısal eşleşmeler taban 10 veya taban 16 ile
String.fromCodePointüzerinden işlenir. Bilinmeyen adlı varlıklar değiştirilmeden bırakılır, böylece kısmi girişler kayıpsız geri döner. - Canlı mod. Canlı modu açın ve her tuş vuruşu 150 ms debounce ile dönüşümü yeniden çalıştırır. Bir parçacığı düzenlerken şablona yapıştırmadan önce anında geri bildirim almak istediğinizde kullanışlıdır.
HTML varlıkları neden kodlanır
- Kullanıcı girişinin düzeni bozmasını önleyin. Bir kullanıcı yorum kutusuna yanlış yerde
<yazdığında, bu metni doğrudan HTML'e eklersek sayfanın geri kalanı bozulur. Ayrılmış karakterleri önceden kodlamak, tarayıcının karakteri etiketin başlangıcı olarak ayrıştırmak yerine görüntülemesini sağlar. - Öznitelik değerlerini geçerli tutun. Bir HTML özniteliğinin içine tırnaklı dize gömmek için gömülü tırnağın
"(çift tırnaklı öznitelikler için) veya'(tek tırnaklı) ile değiştirilmesi gerekir. Aksi takdirde ayrıştırıcı özniteliği erken kapatır ve satırın geri kalanı kayıp biçimlendirme haline gelir. - Depolanan verideki kazara HTML'i etkisiz hale getirin. Günlükler, hata raporları ve sohbet dışa aktarmaları çoğunlukla gerçek açılı ayraç ve &-işareti içerir. Dökümü bir dokümantasyon sayfasına yapıştırmadan önce varlık kodlaması yapmak, bu kopyayı görünür metin olarak tutar ve oluşturucunun veya bağlantı otomatik algılayıcının tetiklenmesini önler.
- Kod parçacıklarını güvenle paylaşın. Bir blog gönderisine, e-postaya veya Slack mesajına
<script>alert(1)</script>gibi örnek bir etiket göndermek, parçacığın çalışmak yerine görüntülenmesi için köşeli parantezlerin kodlanmasını gerektirir. Aynı teknik RSS besleme gövdelerini ve JSON-LD `description` alanlarını da kapsar.
Yaygın uygulamalar
Varlık kodlama, çerçeve normalde sizin için halletse bile manuel aracın kullanışlı olduğu anlarda, çalışma zamanında ham metnin HTML'e yerleştirildiği her yerde karşımıza çıkar.
- Sunucu tarafı şablonlar: Jinja2, ERB, Twig ve Handlebars varsayılan olarak otomatik kaçış yapar; ancak ham bloklar ve `safe` işaretçileri bunu kapatır — codec, kaçışın ne üretmesi gerektiğini doğrulamanızı sağlar.
- E-posta ve bülten yazarlığı: Pek çok ESP şablon motoru birleştirme alanlarını otomatik kodlamaz; bu yüzden kullanıcı tarafından sağlanan adlardaki akıllı tırnaklar ve telif hakkı karakterlerinin önceden kodlanması gerekir.
- Dokümantasyon ve kod örnekleri: Bir Markdown blog gönderisine veya statik site parçacığına örnek HTML etiketi yapıştırmak, oluşturucunun görünür metin olarak işlemesi için köşeli parantezlerin kodlanmasını gerektirir.
Çalışan bir örnek
Girişe <script>alert('hi')</script> yapıştırın; mod Kodla, stil Adlı, kapsam Minimal olarak ayarlanmış olsun. Çıktı <script>alert('hi')</script> şeklinde okunur. Stili Sayısal hex'e çevirin; aynı giriş <script>alert('hi')</script> üretir. Modu Çöz'e çevirin, kodlanmış dizeyi geri yapıştırın ve orijinal etiket eksiksiz döner.
FAQ
HTML varlıkları nedir?
HTML varlıkları, tarayıcının sayfayı ayrıştırırken tekrar tek karakterlere dönüştürdüğü karakter referanslarıdır. Üç formda gelirler: adlı (örneğin & için &), ondalık sayısal (&) ve hex sayısal (&). Beş ayrılmış HTML karakteri (<, >, &, ", ') metin HTML'e düşürüldüğünde her zaman kodlanmalıdır. Geri kalan yaklaşık 2.225 adlı varlık sembolleri, aksanları ve Yunan harflerini kapsar; ancak belge kodlaması UTF-8 olduğunda bunlar isteğe bağlıdır.
Adlı ve sayısal varlık arasında ne zaman hangisini kullanmalıyım?
Kaynağın net okunmasını istediğinizde adlı varlıkları kullanın (bir şablonda © gören biri hemen anlar). Tüketici eski veya daha katıysa sayısal (ondalık veya hex) kullanın — XML ayrıştırıcıları, eski e-posta istemcileri ve bazı akış okuyucuları yalnızca HTML5 adlı varlıklarının küçük bir alt kümesini tanır; hepsi sayısal formları tanır. Hex, spesifikasyon belgelerindeki Unicode kod noktası gösterimiyle bire bir örtüştüğü için güvenlik odaklı bağlamlarda tercih edilir.
Çözücü & gibi hex varlıkları işler mi?
Evet. Çözücü, üç varlık formunun tümünü tek geçişte eşleştiren tek bir regex kullanır: &name;, &#NNN; ve &#xHH;. Sayısal eşleşmeler taban 10 veya taban 16 ile String.fromCodePoint üzerinden çözülür. Karma girişler (aynı dizede adlı ve sayısal) doğru şekilde çözülür; bilinmeyen adlar, kısmi girişlerin kayıpsız geri dönmesi için değişmeden bırakılır.
Güvenilir olmayan girişlerle kullanmak güvenli midir?
Codec'in kendisi yalnızca tarayıcı tabanlıdır ve girişinizi hiçbir yere göndermez. Çıktının gömülmeye uygun olup olmadığı bağlama göre değişir. Varlık kodlama HTML gövde ve öznitelik değeri bağlamlarını karşılar; bu OWASP Kural #1 durumunu kapsar. JavaScript bağlamları (satır içi olay işleyicileri, `<script>` blokları), CSS bağlamları ve URL bağlamları her biri kendi kodlama kurallarına ihtiyaç duyar — yalnızca varlık kodlama orada yeterli değildir. Sunucu tarafında derinlemesine savunma için bunu DOMPurify gibi bağlam duyarlı bir şablon motoru veya çerçevenizin otomatik kaçışıyla eşleştirin.
Tarayıcı tarafı varlık kodlama, kullanıcı girişi ile oluşturulan HTML arasındaki sınırda yer alır. Dönüşümü yerel olarak yapmak, orijinal metni hiçbir zaman üçüncü taraf araca göndermeden çerçevenizin ne ürettiğini doğrulamanızı sağlar.