Escape и Unescape: экранирование HTML, JSON, JavaScript и URL

Экранирование (escape) — замена специальных символов на безопасные последовательности, чтобы они интерпретировались как данные, а не как код или разметка. Обратная операция — unescape (unescaping) — восстановление исходных символов. Понимание типов экранирования и правильное применение критично для безопасности (защита от XSS), целостности данных и корректной работы API. В этой статье разберём HTML entities, JSON, JavaScript, URL encoding, Base64, примеры кода и частые ошибки.

Для экранирования и восстановления строк используйте Escape/Unescape на reChecker.

Что такое экранирование и зачем оно нужно

Определение

Escape — преобразование символов с особым значением в нейтральные последовательности. Например, < в HTML может начать тег — его заменяют на <, чтобы отобразить как текст.

Unescape — обратное преобразование: < → <.

Зачем нужно экранирование

Безопасность (XSS) — пользовательский ввод, содержащий <script>, " или ', может выполнить вредоносный код или сломать разметку. Экранирование превращает опасные символы в безопасный текст.

Целостность данных — при передаче JSON, URL или вставке в JavaScript строки с кавычками, переносами и спецсимволами должны быть корректно закодированы, иначе парсер выдаст ошибку или исказит данные.

Совместимость — не все системы поддерживают все символы. URL, например, допускает ограниченный набор; кириллица и пробелы кодируются в percent-encoding.

Типы экранирования

HTML Entities

Спецсимволы HTML заменяются на именованные или числовые сущности:

Символ	Именованная	Числовая (десятичная)
<	&lt;	&#60;
>	&gt;	&#62;
"	&quot;	&#34;
'	&apos;	&#39;
&	&amp;	&#38;

Когда использовать: вывод пользовательского контента в HTML, чтобы предотвратить XSS и корректно отобразить <, >, &.

<!-- Пользователь ввёл: <script>alert(1)</script> -->
<!-- Экранированный вывод: -->
&lt;script&gt;alert(1)&lt;/script&gt;

JSON

В JSON строки заключаются в двойные кавычки. Символы ", \, переносы строк, табуляция экранируются обратным слэшем:

Символ	Escape
"	\"
\	\\
newline	\n
tab	\t
Unicode	\uXXXX

const str = 'He said "Hello"';
JSON.stringify(str); // '"He said \\"Hello\\""'

JavaScript

В JS-строках экранируются кавычки (в зависимости от типа строки), \, переносы. Для вставки в атрибуты HTML нужна двойная защита: JS-экранирование + HTML entities.

const userInput = 'O\'Reilly';
const inAttr = 'onclick="alert(\'' + userInput.replace(/'/g, "\\'") + '\')"';

URL Encoding (Percent-encoding)

Символы вне набора A-Za-z0-9-_.~ кодируются как %XX (hex байта в UTF-8):

Символ	Encoded
Пробел	%20 или +
&	%26
=	%3D
Кириллица «П»	%D0%9F

Когда использовать: query-параметры, path-сегменты, form data.

encodeURIComponent('hello world'); // "hello%20world"
encodeURIComponent('a&b=c');      // "a%26b%3Dc"

Base64

Кодирование бинарных данных или текста в строку из символов A-Za-z0-9+/=. Не экранирование в классическом смысле, но часто используется вместе с escape-инструментами для передачи данных в JSON, URL или других контекстах, где бинарные данные недопустимы.

btoa('Hello');  // "SGVsbG8="
atob('SGVsbG8='); // "Hello"

Примечание: btoa/atob в браузере работают только с Latin1. Для UTF-8 используйте encodeURIComponent + btoa с доработкой или библиотеку вроде base64-js.

Примеры кода

HTML-экранирование (JavaScript)

function escapeHtml(str) {
  const map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;'
  };
  return str.replace(/[&<>"']/g, c => map[c]);
}

JSON (встроенные методы)

const obj = { message: 'Say "Hi"' };
JSON.stringify(obj); // '{"message":"Say \\"Hi\\""}'

URL (встроенные методы)

// Для целого URL — encodeURI (не трогает :/?@&=+$,#)
encodeURI('https://example.com/path?q=hello world');
// "https://example.com/path?q=hello%20world"

// Для значений параметров — encodeURIComponent
const params = { q: 'поиск', page: 1 };
const query = new URLSearchParams(params).toString();

Python: HTML

import html
html.escape('<script>')  # '&lt;script&gt;'
html.unescape('&lt;')    # '<'

Python: URL

from urllib.parse import quote, unquote
quote('a&b=c')   # 'a%26b%3Dc'
unquote('a%26b%3Dc')  # 'a&b=c'

Частые ошибки

Двойное экранирование

Если строка уже экранирована, повторное экранирование исказит её: & → &. Проверяйте источник данных.

Путаница encodeURI и encodeURIComponent

• encodeURI — для целого URL, не кодирует ;/?:@&=+$,#
• encodeURIComponent — для значений параметров, кодирует почти всё

Для query-параметров всегда используйте encodeURIComponent.

Экранирование в неправильном месте

HTML-экранирование нужно при выводе в HTML. Не экранируйте при сохранении в БД — храните сырые данные, экранируйте при рендере.

Игнорирование контекста

Один и тот же текст может попасть в HTML, атрибут, JavaScript, URL. Каждый контекст требует своего экранирования. Универсального «escape всего» не существует. Например, HTML-entity " в JavaScript-строке будет отображаться буквально, а не как кавычка. Всегда определяйте целевой контекст и применяйте соответствующий тип экранирования.

Экранирование при хранении вместо при выводе

Некоторые системы экранируют данные при сохранении в базу. Это усложняет поиск, отображение в разных форматах и повторное использование. Рекомендуется хранить сырые данные и экранировать только при выводе в конкретный контекст (HTML, JSON, URL).

Инструмент Escape/Unescape на reChecker

Сервис Escape/Unescape на reChecker поддерживает:

• HTML — entities (именованные и числовые)
• JSON — экранирование кавычек, слэшей, Unicode
• JavaScript — строки в кавычках
• URL — percent-encoding и декодирование
• Base64 — кодирование и декодирование

Вставьте текст, выберите тип преобразования и получите результат. Удобно для отладки, подготовки данных и проверки корректности экранирования. Поддержка нескольких форматов в одном интерфейсе избавляет от переключения между разными утилитами при работе со смешанным контентом (HTML + JSON + URL).

FAQ

В чём разница между HTML entity и URL encoding?

HTML entity заменяет символы вроде <, >, & на <, >, & для безопасного отображения в HTML. URL encoding (percent-encoding) заменяет символы на %XX для передачи в URL. Разные контексты — разные форматы.

Нужно ли экранировать данные при сохранении в базу?

Обычно нет. Храните сырые данные. Экранирование выполняйте при выводе — в HTML, JSON, URL. Исключение: если БД или ORM требуют экранирования (например, старые подходы к SQL), но современные практики используют параметризованные запросы.

Как защититься от XSS при выводе пользовательского ввода?

Экранируйте все пользовательские данные при выводе в HTML: < → <, > → >, & → &, " → ", ' → '. Используйте шаблонизаторы с авто-экранированием (React, Vue, Jinja2 с включённым escape) или явно вызывайте функцию escape.

Почему encodeURIComponent, а не encodeURI для параметров?

encodeURI не кодирует &, =, + и другие символы, важные в query string. Значение a&b без кодирования сломает разбор параметров. encodeURIComponent кодирует всё необходимое для безопасной подстановки в ?key=value.

Какой инструмент использовать для escape/unescape онлайн?

Escape/Unescape на reChecker — бесплатный онлайн-инструмент для экранирования и восстановления строк. Поддерживает HTML, JSON, JavaScript, URL и Base64. Подходит для разработчиков при отладке, подготовке данных и проверке корректности кодирования.