Кодування й декодування HTML-сутностей
Екрануйте символи, які HTML сприймає як розмітку, за бажанням також усі символи поза ASCII, або перетворіть сутності на кшталт é і — назад на звичайний текст. Обидва напрямки працюють у вашому браузері, а декодований вміст ніколи не відображається як живий HTML.
0 символів · 0 слів · 0 рядків
0 символів · 0 слів · 0 рядків
Працює повністю у вкладці браузера. Ваш текст ніколи не завантажується на сервер і не зберігається.
Поширені символи та їхні сутності
Іменована, десяткова й шістнадцяткова форми декодуються в один і той самий символ. Кодувальник знає 216 поширених іменованих сутностей; декодер розуміє всі іменовані посилання зі стандарту HTML.
| Символ | Іменовані | Десяткові | Шістнадцяткові |
|---|---|---|---|
& | & | & | & |
< | < | < | < |
> | > | > | > |
" | " | " | " |
' | ' | ' | ' |
(нерозривний пробіл) | |   |   |
© | © | © | © |
® | ® | ® | ® |
™ | ™ | ™ | ™ |
€ | € | € | € |
£ | £ | £ | £ |
¥ | ¥ | ¥ | ¥ |
— | — | — | — |
– | – | – | – |
… | … | … | … |
« | « | « | « |
» | » | » | » |
° | ° | ° | ° |
× | × | × | × |
÷ | ÷ | ÷ | ÷ |
é | é | é | é |
π | π | π | π |
→ | → | → | → |
😀 | — | 😀 | 😀 |
Від 252 сутностей у HTML 4 до 2 231 у HTML5
Посилання на символ — це спосіб записати символ лише за допомогою ASCII. Числові посилання працюють для будь-якої кодової точки Unicode, у десятковому (é) або шістнадцятковому (é) вигляді. Іменовані посилання легше запам’ятати: у HTML 4 їх визначено 252, і вони охоплюють літери Latin-1, як-от é, грецькі літери, математичні символи та типографські знаки, як-от — і …. Цікаво, що ' серед них не було: він прийшов із XML і став чинним у HTML лише з HTML5.
HTML5 розширив список до 2231 іменованого посилання на символ, увібравши набір сутностей MathML, тож імена на кшталт ✓, ★ і ≂̸ тепер працюють в усіх сучасних браузерах. У цю кількість входять застарілі написання без завершальної крапки з комою, як-от & і ©: парсери досі приймають їх для сумісності, але писати їх не слід. Кодувальник тут використовує поширені імена з HTML 4 плюс ', а для решти символів застосовує числове посилання; декодувальник передає текст власному парсеру браузера, тож розуміє всі 2231 імена.
Що екранувати і коли самого екранування замало
Only & < > " ' — налаштування для щоденної роботи: воно екранує п’ять символів, які можуть завершити текстовий вузол або атрибут у лапках. Цього достатньо, щоб показати приклад коду на сторінці або безпечно вставити текст користувача в HTML. Also every non-ASCII character перетворює на посилання також é, € та емодзі, для рідкісних каналів, що не передають UTF-8, наприклад деяких застарілих поштових шаблонів або систем, які псують кодування. Named, Decimal і Hex змінюють лише спосіб запису посилання; усі три декодуються в той самий символ. Сторінці в UTF-8 сутності для літер з діакритикою не потрібні.
Екранування захищає лише контекст HTML і нічого більше. Текст, який вставляється в блок script, вбудований обробник подій на кшталт onclick, атрибут style або href, що може починатися з javascript:, потребує іншого оброблення, і самого кодування сутностей там недостатньо для захисту від міжсайтового скриптингу. Фреймворки на кшталт React екранують текст за замовчуванням, тому в сучасних застосунках частіше трапляється подвійне екранування: користувачі бачать & замість амперсанда. Щоб повністю прибрати теги, перетворіть розмітку за допомогою HTML у TXT; для екранування всередині URL скористайтеся кодуванням і декодуванням URL.
Поширені запитання
- Які символи обов’язково треба екранувати в HTML?
- У тексті обов’язкові & і <, а > екранують за домовленістю. Усередині значення атрибута екрануйте ще й лапку, яка його обмежує. Екранування всіх п’яти символів охоплює обидва випадки.
- Чим відрізняється від звичайного пробілу?
— нерозривний пробіл, U+00A0. Він виглядає як пробіл, але забороняє перенесення рядка в цьому місці й, на відміну від звичайних пробілів у HTML, не згортається, коли їх кілька поспіль.- Чому на сторінці видно & замість амперсанда?
- Текст екранували двічі: спочатку у ваших даних, а потім ваш шаблон або фреймворк. Зберігайте сирий текст і нехай екранує один шар, зазвичай шаблон, під час виведення.
- Чи безпечно декодувати тут HTML з ненадійного джерела?
- Так. Декодувальник обробляє вхідні дані як звичайний текстовий вміст, тому теги не створюються, скрипти не виконуються, а зображення не завантажуються. У символи перетворюються лише посилання на сутності.
- Які сутності кращі: іменні чи числові?
- Іменовані легше читати, а числові працюють для будь-якого символу та в кожному XML-парсері. В XML без DTD попередньо визначено лише
&,<,>,"і'.