HTML Escape / Unescape

Що таке екранування HTML?

Екранування HTML — це процес заміни символів, що мають спеціальне значення в HTML, відповідними посиланнями на сутності. П'ять символів, які обов'язково потрібно екранувати: амперсанд (&), знак «менше» (<), знак «більше» (>), подвійні лапки (") та одинарні лапки ('). Без екранування браузер інтерпретує ці символи як інструкції розмітки, а не як текст для відображення, що порушує рендеринг сторінки та відкриває двері для ін'єкційних атак.

Специфікація HTML (підтримується WHATWG) визначає дві форми посилань на символи: іменовані сутності, як-от &amp;, та числові сутності, як-от &#38; або &#x26;. Іменовані сутності легше читати у вихідному коді. Числові сутності (десяткові або шістнадцяткові) можуть представляти будь-яку кодову точку Unicode, що робить їх зручними для символів без іменованого аліасу. Обидві форми дають однаковий результат у браузері.

Розекранування (також декодування) — це зворотна операція: перетворення посилань на сутності назад у буквальні символи. Це часто потрібно при вилученні тексту з HTML-джерела, перенесенні контенту між системами або налагодженні шаблонів, що подвійно кодують сутності. Цей інструмент виконує обидві операції у браузері, тож ви можете перевірити логіку екранування або отримати звичайний текст із насиченого HTML-джерела за кілька секунд.

Навіщо використовувати інструмент для екранування HTML?

Ручна заміна кутових дужок і амперсандів у великих блоках тексту — це рутинна та помилконебезпечна робота. Спеціальний інструмент конвертує введені дані за один крок без жодної установки.

Випадки використання HTML-екранування

Таблиця довідки HTML-сутностей

У таблиці нижче наведено найуживаніші HTML-сутності. П'ять спеціальних символів (& < > " ') завжди потрібно екранувати в контенті HTML та значеннях атрибутів. Інші сутності необов'язкові, але зручні для символів, які важко набрати або які неоднозначні у вихідному коді.

Екранування проти розекранування: коли що використовувати

Дві операції є взаємно оберненими. Вибір неправильного напрямку призводить до подвійного кодування або незахищеного виводу.

Приклади коду

Нижче наведено робочі приклади екранування та розекранування HTML чотирма мовами. Кожен фрагмент охоплює обидва напрямки і обробляє граничні випадки, як-от вкладені лапки та числові сутності.

// 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>

Поширені запитання