HTML-сутності: кодування / декодування

Як працює кодування HTML-сутностей

Сутність — це короткий код, що заміщує символ, який браузер інакше витлумачив би особливим чином. Сутності бувають двох видів. Іменовані сутності використовують мнемоніку між амперсандом і крапкою з комою, наприклад послідовність для нерозривного пробілу або для самого амперсанда. Числові сутності посилаються на символ безпосередньо за його кодовою позицією Unicode — або в десятковому вигляді, як-от шаблон © для знака авторського права, або у шістнадцятковому з префіксом x, як-от © для того самого символу. Напрям кодування тут зосереджений на п’яти символах, що справді важливі для безпеки всередині HTML: амперсанд, дві кутові дужки, а також подвійні й одинарні лапки. Екранувати амперсанд першим украй важливо, адже саме цей символ починає кожну сутність — переплутайте порядок, і ви подвійно екрануєте все інше.

Декодування навмисно широке. Інструмент розпізнає весь діапазон іменованих і числових сутностей, які знає сам браузер, бо декодує, передаючи рядок власному HTML-парсеру браузера й зчитуючи назад результат у вигляді звичайного тексту. Це означає, що маловідома іменована сутність, десяткове посилання та шістнадцяткове посилання, які всі вказують на той самий символ, кожне правильно декодуються в цей єдиний символ, і вам не потрібна таблиця відповідностей.

Конкретні приклади та сценарії використання

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

Поради та підводні камені

Найпоширеніша помилка — екранувати в неправильному порядку або екранувати двічі. Оскільки амперсанд відкриває кожну сутність, кодування тексту, що вже містить сутності, знову екранує ці амперсанди, тож значення, яке вже було безпечним, стає явно зіпсованим із подвоєними кодами на кшталт <. Екранування також залежить від контексту: екранування сутностей — правильний захист, коли текст потрапляє в HTML, але воно не замінює належне кодування в інших контекстах, кожен з яких має власні правила — рядок JavaScript, URL та інструкція SQL потребують власного екранування, а не HTML-сутностей. Декодуючи, пам’ятайте, що справжній HTML-парсер також нормалізує чи відкидає деякі конструкції, тож декодування найкраще застосовувати до справжніх рядків із сутностями, а не для спроб полагодити довільну зламану розмітку.

Усе залишається на вашому пристрої

Цей кодувальник і декодувальник працюють на сто відсотків локально у вашому браузері; ніщо з того, що ви вставляєте, не завантажується, не передається й ніде не журналюється. Це варто підкреслити саме тому, що кодування сутностей — це засіб безпеки: текст, який ви знешкоджуєте, дуже часто є недовіреним або конфіденційним вмістом, який ви найменше хотіли б відправляти через випадковий онлайн-сервіс лише заради очищення. Тримання роботи на власній машині повністю усуває цей ризик і дозволяє інструменту працювати офлайн. Якщо ви створюєте сторінки чи API, які мають безпечно екранувати свій вивід, наша документація для розробників пояснює, де серверне екранування має бути в конвеєрі обробки запитів, а цей браузерний інструмент — зручний супутник для ручної перевірки значень.