HTML Kaçış / Çözme

HTML Kaçışı Nedir?

HTML kaçışı, HTML'de özel anlamı olan karakterleri karşılık gelen varlık referanslarıyla değiştirme işlemidir. Kaçış uygulanması gereken beş karakter şunlardır: ve işareti (&), küçüktür (<), büyüktür (>), çift tırnak (") ve tek tırnak ('). Kaçış uygulanmadan bırakılırsa tarayıcı bu karakterleri görüntülenebilir metin yerine işaretleme yönergesi olarak yorumlar; bu durum sayfa oluşturmayı bozar ve enjeksiyon saldırılarına kapı aralar.

HTML belirtimi (WHATWG tarafından yönetilen) iki tür karakter referansı tanımlar: &amp; gibi adlandırılmış varlıklar ve &#38; ya da &#x26; gibi sayısal varlıklar. Adlandırılmış varlıklar kaynak kodda daha kolay okunur. Sayısal varlıklar (ondalık veya onaltılık) herhangi bir Unicode kod noktasını temsil edebilir; bu da adlandırılmış karşılığı olmayan karakterler için yararlı kılar. Her iki biçim de tarayıcıda aynı çıktıyı üretir.

Çözme (kod çözme olarak da bilinir) ters işlemdir: varlık referanslarını gerçek karakterlere geri dönüştürür. Bu işlem HTML kaynağından metin çıkarırken, içeriği sistemler arasında taşırken veya varlıkları çift kodlayan şablonlarda hata ayıklarken yaygın olarak kullanılır. Bu araç her iki yönü de tarayıcıda gerçekleştirir; böylece kaçış mantığınızı doğrulayabilir veya yoğun HTML içeren bir kaynaktan saniyeler içinde düz metin elde edebilirsiniz.

Neden HTML Kaçış Aracı Kullanmalısınız?

Büyük metin bloklarında köşeli parantezleri ve ve işaretlerini elle değiştirmek zahmetli ve hata yapmaya açıktır. Özel bir araç, girdinizi tek adımda dönüştürür; kurulum gerektirmez.

HTML Kaçış Kullanım Senaryoları

HTML Varlık Referans Tablosu

Aşağıdaki tablo yaygın olarak kullanılan HTML varlıklarını listelemektedir. Beş özel karakter (& < > " ') HTML içeriğinde ve öznitelik değerlerinde her zaman kaçış uygulanmalıdır. Diğer varlıklar isteğe bağlıdır ancak yazılması zor ya da kaynak kodda belirsiz karakterler için kullanışlıdır.

Kaçış ve Çözme: Hangisi Ne Zaman Kullanılır

İki işlem birbirinin tersidir. Yanlış yönü seçmek çift kodlanmış veya korumasız çıktı üretir.

Kod Örnekleri

Aşağıda dört dilde HTML kaçış ve çözme işleminin çalışan örnekleri yer almaktadır. Her kod parçacığı her iki yönü de kapsar ve iç içe tırnaklar ile sayısal varlıklar gibi sınır durumları ele alır.

// Escape HTML entities manually
function escapeHtml(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
}

escapeHtml('<img src="x" onerror="alert(1)">')
// → "&lt;img src=&quot;x&quot; onerror=&quot;alert(1)&quot;&gt;"

// Unescape using DOMParser (browser only)
function unescapeHtml(str) {
  const doc = new DOMParser().parseFromString(str, 'text/html')
  return doc.documentElement.textContent
}

unescapeHtml('&lt;div&gt;Hello&lt;/div&gt;')
// → "<div>Hello</div>"

import html

# Escape special characters
html.escape('<script>alert("XSS")</script>')
# → '&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;'

# Escape including single quotes (quote=True is default in Python 3.8+)
html.escape("It's <b>bold</b>", quote=True)
# → 'It&#x27;s &lt;b&gt;bold&lt;/b&gt;'

# Unescape entities back to characters
html.unescape('&lt;p&gt;Price: &euro;10&lt;/p&gt;')
# → '<p>Price: €10</p>'

# Unescape numeric entities
html.unescape('&#60;div&#62;&#38;amp;&#60;/div&#62;')
# → '<div>&amp;</div>'

package main

import (
    "fmt"
    "html"
)

func main() {
    // Escape HTML special characters
    escaped := html.EscapeString(`<a href="page?id=1&sort=name">Link</a>`)
    fmt.Println(escaped)
    // → &lt;a href=&quot;page?id=1&amp;sort=name&quot;&gt;Link&lt;/a&gt;

    // Unescape back to original
    original := html.UnescapeString("&lt;b&gt;Go &amp; HTML&lt;/b&gt;")
    fmt.Println(original)
    // → <b>Go & HTML</b>
}

<?php
// Escape HTML entities (ENT_QUOTES escapes both " and ')
echo htmlspecialchars('<p class="info">Tom & Jerry's</p>', ENT_QUOTES, 'UTF-8');
// → &lt;p class=&quot;info&quot;&gt;Tom &amp; Jerry&#039;s&lt;/p&gt;

// Convert all applicable characters to HTML entities
echo htmlentities('Price: 10€ — 50% off', ENT_QUOTES, 'UTF-8');
// → Price: 10&euro; &mdash; 50% off

// Decode entities back
echo html_entity_decode('&lt;div&gt;&amp;copy; 2026&lt;/div&gt;');
// → <div>&copy; 2026</div>

Sıkça Sorulan Sorular