Кодування

HTML Entities Encode/Decode

Кодування та декодування HTML-сутностей — безпечне відображення спецсимволів на сторінці.

HTML-сутності — це спосіб записати символи, які інакше зламали б розмітку (<, >, &) або не мають клавіші на клавіатурі, у безпечному текстовому вигляді на кшталт &lt; чи &amp;. Інструмент кодує й декодує такі сутності прямо в браузері.

Як користуватися

Типові сценарії

Що варто памʼятати

Екранування HTML-сутностей захищає лише від XSS через текстовий вміст сторінки — воно не захищає JavaScript-контекст (innerHTML, eval) чи атрибути href/src із невалідованими URL.

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

Стаття про цей інструмент: HTML Entities: як безпечно виводити спецсимволи на сторінці

Часті запитання

Навіщо кодувати текст у HTML-сутності?

Символи на кшталт <, > та & мають спеціальне значення в розмітці HTML і можуть зламати сторінку або відкрити шлях для XSS, якщо вставити їх у код напряму. Кодування в сутності дозволяє безпечно відобразити такий текст як звичайний вміст.

Чим "Основні" сутності відрізняються від "Усіх символів"?

Режим "Основні" кодує лише символи, критичні для розмітки: <, >, &, лапки та апостроф. Режим "Усі символи" додатково перетворює будь-які не-ASCII символи (кирилицю, емодзі тощо) у числові чи іменовані сутності.

У чому різниця між іменованою і числовою сутністю?

Іменована сутність — це мнемонічна назва, наприклад &amp; для амперсанда. Числова — код символу за Unicode: десятковий &#38; або шістнадцятковий &#x26;. Обидва варіанти відображаються однаково в браузері.

Чи потрібно екранувати текст в атрибуті інакше, ніж у тілі сторінки?

Основні символи (<, >, &) екранують однаково, але всередині атрибута в лапках додатково критично екранувати саме той тип лапок, яким обмежений атрибут, — інакше значення "розірветься" раніше, ніж очікувалось.

Чи захищає HTML-екранування від усіх видів XSS?

Ні. Воно закриває найпоширеніший вектор — вставку тексту в HTML-вміст, але не захищає від XSS через JavaScript-контекст (наприклад, innerHTML з подальшим виконанням коду) чи невалідовані URL у href/src.

Статті: Кодування

Base64: навіщо потрібне кодування і як воно працює

Як Base64 перетворює бінарні дані на текст ASCII і де це реально потрібно.

Base32: чим відрізняється від Base64 і коли зручніший

Регістронезалежний алфавіт Base32 і сценарії, де він зручніший за Base64.

URL Encode/Decode: percent-encoding у посиланнях

Як спецсимволи в адресних рядках і query-параметрах перетворюються на %XX-послідовності.

JWT: структура токена та що означає "декодувати" JWT

Header, payload і signature JWT-токена та чому декодування — це не те саме, що перевірка підпису.

Unicode Escape: що означають послідовності \uXXXX

Звідки в JSON і JS-рядках беруться послідовності виду \u0041 і що вони означають.

ROT13 і шифр Цезаря: проста заміна символів

Чому зсув на 13 літер робить ROT13 симетричним і навіщо його взагалі використовують сьогодні.

Punycode: як домени з кирилицею працюють у DNS

Як домен на кшталт «приклад.укр» перетворюється на ASCII-запис із префіксом xn--.

Азбука Морзе: як текст перетворюється на крапки й тире

Принцип кодування літер крапками й тире та де азбука Морзе застосовується зараз.

Data URI: коли вбудовувати зображення прямо в код

Як data:-URI вбудовує вміст файлу прямо в HTML чи CSS і коли це виправдано.

Gzip + Base64: стиснення даних для передачі текстом

Навіщо стиснені бінарні дані ще й кодують у Base64 перед тим, як покласти в текстове поле.

XML Entities: екранування символів у XML-документах

П’ять обов’язкових XML-entity, без яких документ ламається при парсингу.