DevToys Pro

бесплатные веб-инструменты для разработчиков

Блог
Оцените нас:
Попробуйте расширение для браузера:
← Назад к блогу

Рабочий процесс веб-полезных нагрузок: URL кодирование/декодирование + HTML экранирование + Quoted-Printable

•12 мин чтения

Вы создаёте форму поиска, которая должна кодировать параметры запроса для URL, безопасно отображать ввод пользователя в HTML и отправлять форматированные данные через email. Специальные символы, такие как &, < и пробелы, ломают каждый контекст по-разному. Это руководство проведёт вас через полный процесс кодирования веб-полезных нагрузок.

Сценарий: Поиск пользователя с уведомлением по email

Проблема: Пользователь ищет R&D: AI <Projects>. Вам нужно:

  1. URL кодировать поисковый запрос для API-запроса
  2. HTML экранировать запрос для безопасного отображения на странице результатов
  3. Закодировать результаты для email-уведомления используя Quoted-Printable

Сырой ввод пользователя

R&D: AI <Projects>

Почему это проблематично:

  • & в URL разделяет параметры запроса
  • <> в HTML создают теги
  • : имеет специальное значение в некоторых контекстах
  • Не-ASCII символы требуют кодирования для email

Шаг 1: URL кодирование для API-запроса

Инструмент: URL кодировщик/декодер

Цель: Закодировать поисковый запрос для включения в параметр запроса URL.

Действия

  1. Откройте URL кодировщик
  2. Вставьте поисковый запрос: R&D: AI <Projects>
  3. Нажмите "Encode"
  4. Скопируйте закодированный вывод

Закодированный вывод

R%26D%3A%20AI%20%3CProjects%3E

Как это работает

R       → R         (алфавитно-цифровой, без кодирования)
&       → %26       (зарезервированный символ)
D       → D         (алфавитно-цифровой)
:       → %3A       (зарезервирован в некоторых контекстах)
(пробел) → %20      (пробельный символ)
A       → A         (алфавитно-цифровой)
I       → I         (алфавитно-цифровой)
(пробел) → %20      (пробельный символ)
<       → %3C       (зарезервирован, HTML тег)
P       → P         (алфавитно-цифровой)
...

Использование в API-запросе

GET /api/search?q=R%26D%3A%20AI%20%3CProjects%3E&limit=10 HTTP/1.1
Host: api.example.com

// Декодировано сервером:
// query = "R&D: AI <Projects>"
// limit = "10"

Результат: Безопасный URL, который не нарушит парсинг параметров.

Шаг 2: HTML экранирование для отображения

Инструмент: HTML-сущности кодировщик/декодер

Цель: Отображать поисковый запрос безопасно на странице результатов без выполнения HTML или JavaScript.

Действия

  1. Откройте HTML-сущности кодировщик
  2. Вставьте поисковый запрос: R&D: AI <Projects>
  3. Нажмите "Encode"
  4. Скопируйте HTML-безопасный вывод

Закодированный вывод

R&amp;D: AI &lt;Projects&gt;

Как это работает

R       → R         (обычный символ)
&       → &amp;     (HTML-сущность для амперсанда)
D       → D         (обычный символ)
:       → :         (безопасен в HTML тексте)
(пробел) → (пробел) (безопасен в HTML тексте)
A       → A         (обычный символ)
I       → I         (обычный символ)
(пробел) → (пробел) (безопасен в HTML тексте)
<       → &lt;      (HTML-сущность для меньше)
P       → P         (обычный символ)
...
>       → &gt;      (HTML-сущность для больше)

Использование в HTML отображении

<div class="search-results">
  <h2>Результаты поиска для: <span>R&amp;D: AI &lt;Projects&gt;</span></h2>
  <p>Найдено 42 результата</p>
</div>

<!-- Браузер отображает: -->
<!-- Результаты поиска для: R&D: AI <Projects> -->
<!-- Но <Projects> не будет интерпретирован как HTML тег -->

Результат: Безопасное отображение, которое предотвращает XSS атаки и внедрение HTML.

Шаг 3: Quoted-Printable для Email

Инструмент: Quoted-Printable кодировщик/декодер

Цель: Закодировать уведомление с результатами поиска для передачи через email.

Шаблон тела письма

Здравствуйте,

Ваш поиск "R&D: AI <Projects>" вернул 42 результата.

Топ результат:
• Проект: Advanced AI Research & Development
• Статус: Активен
• Команда: R&D <AI Division>

Посетить: https://example.com/search?q=R%26D%3A%20AI%20%3CProjects%3E

С наилучшими пожеланиями,
Команда

Действия

  1. Откройте Quoted-Printable кодировщик
  2. Вставьте тело письма
  3. Нажмите "Encode"
  4. Используйте закодированный вывод в заголовках email

Закодированный вывод

=D0=97=D0=B4=D1=80=D0=B0=D0=B2=D1=81=D1=82=D0=B2=D1=83=D0=B9=D1=82=D0=B5,

=D0=92=D0=B0=D1=88 =D0=BF=D0=BE=D0=B8=D1=81=D0=BA "R&D: AI <Projects>" =D0=B2=
=D0=B5=D1=80=D0=BD=D1=83=D0=BB 42 =D1=80=D0=B5=D0=B7=D1=83=D0=BB=D1=8C=D1=82=
=D0=B0=D1=82=D0=B0.

=D0=A2=D0=BE=D0=BF =D1=80=D0=B5=D0=B7=D1=83=D0=BB=D1=8C=D1=82=D0=B0=D1=82:
=E2=80=A2 =D0=9F=D1=80=D0=BE=D0=B5=D0=BA=D1=82: Advanced AI Research & Deve=
lopment
=E2=80=A2 =D0=A1=D1=82=D0=B0=D1=82=D1=83=D1=81: =D0=90=D0=BA=D1=82=D0=B8=
=D0=B2=D0=B5=D0=BD
=E2=80=A2 =D0=9A=D0=BE=D0=BC=D0=B0=D0=BD=D0=B4=D0=B0: R&D <AI Division>

=D0=9F=D0=BE=D1=81=D0=B5=D1=82=D0=B8=D1=82=D1=8C: https://example.com/sear=
ch?q=3DR%26D%3A%20AI%20%3CProjects%3E

=D0=A1 =D0=BD=D0=B0=D0=B8=D0=BB=D1=83=D1=87=D1=88=D0=B8=D0=BC=D0=B8 =D0=BF=
=D0=BE=D0=B6=D0=B5=D0=BB=D0=B0=D0=BD=D0=B8=D1=8F=D0=BC=D0=B8,
=D0=9A=D0=BE=D0=BC=D0=B0=D0=BD=D0=B4=D0=B0

Как это работает

Обычный ASCII:  Без изменений
• (маркер):     =E2=80=A2 (байты UTF-8 как hex)
Длинные строки: Разбиты с = в конце
= символ:       =3D (закодирован как hex)

Использование в заголовках Email

Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: quoted-printable

=D0=97=D0=B4=D1=80=D0=B0=D0=B2=D1=81=D1=82=D0=B2=D1=83=D0=B9=D1=82=D0=B5,

=D0=92=D0=B0=D1=88 =D0=BF=D0=BE=D0=B8=D1=81=D0=BA "R&D: AI <Projects>" =D0=
=B2=D0=B5=D1=80=D0=BD=D1=83=D0=BB 42 =D1=80=D0=B5=D0=B7=D1=83=D0=BB=D1=8C=
=D1=82=D0=B0=D1=82=D0=B0.
...

Результат: Email-безопасное кодирование, которое сохраняет специальные символы и правильно обрабатывает Unicode.

Краткое описание полного процесса

Ввод: R&D: AI <Projects>

1. URL кодирование (для API запроса)
   Инструмент: URL кодировщик
   Вывод: R%26D%3A%20AI%20%3CProjects%3E
   Использование: GET /api/search?q=R%26D%3A%20AI%20%3CProjects%3E

2. HTML экранирование (для отображения)
   Инструмент: HTML-сущности кодировщик
   Вывод: R&amp;D: AI &lt;Projects&gt;
   Использование: <span>R&amp;D: AI &lt;Projects&gt;</span>

3. Quoted-Printable (для email)
   Инструмент: Quoted-Printable кодировщик
   Вывод: R&D: AI <Projects> (со специальными символами как =XX)
   Использование: Тело письма с Content-Transfer-Encoding: quoted-printable

Результат: Одни и те же данные, безопасно закодированные для каждого контекста

Продвинутые варианты использования

Случай 1: Отправка формы со специальными символами

Сценарий: Пользователь отправляет комментарий с кавычками и переносами строк.

Ввод пользователя:
Он сказал: "Это отлично!"
Лучшая функция: <autocomplete>

1. URL кодирование для тела POST (application/x-www-form-urlencoded):
   comment=%D0%9E%D0%BD+%D1%81%D0%BA%D0%B0%D0%B7%D0%B0%D0%BB%3A+%22%D0%AD%D1%82%D0%BE+%D0%BE%D1%82%D0%BB%D0%B8%D1%87%D0%BD%D0%BE%21%22%0A%D0%9B%D1%83%D1%87%D1%88%D0%B0%D1%8F+%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D1%8F%3A+%3Cautocomplete%3E

2. HTML экранирование для отображения:
   Он сказал: &quot;Это отлично!&quot;<br>Лучшая функция: &lt;autocomplete&gt;

3. Хранение в базе данных: Оригинальный формат (пусть БД обрабатывает экранирование)
   Он сказал: "Это отлично!"
   Лучшая функция: <autocomplete>

Случай 2: Многоязычный контент

Кодирование интернационализированного контента:

Ввод: Привет! 你好! مرحبا!

1. URL кодирование:
   %D0%9F%D1%80%D0%B8%D0%B2%D0%B5%D1%82%21%20%E4%BD%A0%E5%A5%BD%21%20%D9%85%D8%B1%D8%AD%D8%A8%D8%A7%21

2. HTML сущности (числовые):
   &#1055;&#1088;&#1080;&#1074;&#1077;&#1090;! &#20320;&#22909;! &#1605;&#1585;&#1581;&#1576;&#1575;!

3. Quoted-Printable:
   =D0=9F=D1=80=D0=B8=D0=B2=D0=B5=D1=82! =E4=BD=A0=E5=A5=BD! =D9=85=D8=B1=D8=AD=D8=A8=D8=A7!

Случай 3: Построение полных URL

Конструирование URL с несколькими параметрами:

Базовый URL: https://example.com/search
Параметры:
  q: "AI & ML"
  category: "R&D <Tech>"
  page: 1

Шаг 1: Закодировать каждое значение параметра
  q = AI+%26+ML
  category = R%26D+%3CTech%3E
  page = 1

Шаг 2: Построить URL
  https://example.com/search?q=AI+%26+ML&category=R%26D+%3CTech%3E&page=1

Шаг 3: Декодировать на стороне сервера
  q = "AI & ML"
  category = "R&D <Tech>"
  page = "1"

Распространённые паттерны кодирования

Паттерн 1: Поисковый запрос с операторами

Ввод пользователя: name:"John Doe" AND age:>25

URL закодирован:
name%3A%22John+Doe%22+AND+age%3A%3E25

HTML экранирован:
name:&quot;John Doe&quot; AND age:&gt;25

Паттерн 2: Путь к файлу в URL

Путь к файлу: /files/reports/Q1 2026/sales & revenue.pdf

URL закодирован:
%2Ffiles%2Freports%2FQ1%202026%2Fsales%20%26%20revenue.pdf

Использование в ссылке:
<a href="/download?file=%2Ffiles%2Freports%2FQ1%202026%2Fsales%20%26%20revenue.pdf">
  Скачать
</a>

Паттерн 3: JSON в параметре URL

JSON данные: {"name":"Alice","dept":"R&D"}

URL закодирован:
%7B%22name%22%3A%22Alice%22%2C%22dept%22%3A%22R%26D%22%7D

Полный URL:
https://api.example.com/users?filter=%7B%22name%22%3A%22Alice%22%2C%22dept%22%3A%22R%26D%22%7D

Советы по рабочему процессу

  1. Кодируйте на границе: Кодируйте данные прямо перед использованием в конкретном контексте
  2. Никогда не делайте двойное кодирование: Кодирование уже закодированных данных даёт неверные результаты
  3. Используйте правильное кодирование для контекста: URL кодирование ≠ HTML экранирование ≠ Quoted-Printable
  4. Декодируйте на стороне сервера: Большинство фреймворков автоматически декодируют параметры URL
  5. Тестируйте со специальными случаями: Попробуйте &, <>, ", пробелы, Unicode

Устранение распространённых проблем

Проблема: Двойное кодирование

Причина: Кодирование уже закодированных данных

// НЕПРАВИЛЬНО
const query = "R&D Projects";
const encoded1 = encodeURIComponent(query);  // "R%26D%20Projects"
const encoded2 = encodeURIComponent(encoded1); // "R%2526D%2520Projects" ❌

// ПРАВИЛЬНО
const query = "R&D Projects";
const encoded = encodeURIComponent(query);  // "R%26D%20Projects" ✓

Проблема: HTML сущности в URL

Причина: Использование HTML экранирования вместо URL кодирования

// НЕПРАВИЛЬНО
<a href="/search?q=R&amp;D">Поиск</a>
// Браузер отправляет: /search?q=R&amp;D (буквально)

// ПРАВИЛЬНО
<a href="/search?q=R%26D">Поиск</a>
// Браузер отправляет: /search?q=R%26D (затем декодируется в "R&D")

Проблема: Отсутствие кодирования в JavaScript

Причина: Построение URL без кодирования

// НЕПРАВИЛЬНО
const url = `/search?q=${userInput}`;
// Если userInput = "R&D", создаётся: /search?q=R&D
// Сервер видит: q="R", D="" (сломанные параметры)

// ПРАВИЛЬНО
const url = `/search?q=${encodeURIComponent(userInput)}`;
// Создаётся: /search?q=R%26D
// Сервер видит: q="R&D" ✓

Соображения безопасности

  1. Всегда HTML-экранируйте ввод пользователя: Предотвращает XSS атаки
  2. URL кодируйте параметры запроса: Предотвращает внедрение параметров
  3. Валидируйте после декодирования: Проверяйте на вредоносные паттерны
  4. Используйте Content-Security-Policy: Дополнительный слой защиты от XSS
  5. Санируйте, не только кодируйте: Удаляйте опасный контент, а не только экранируйте его

Инструменты, используемые в этом процессе

Резюме

Полный процесс кодирования веб-полезных нагрузок:

  1. URL кодирование: Для API-запросов и параметров запроса с URL кодировщиком
  2. HTML экранирование: Для безопасного отображения на веб-страницах с HTML-сущности кодировщиком
  3. Quoted-Printable: Для email контента с Quoted-Printable кодировщиком

Каждое кодирование служит определённой цели. Используйте правильный инструмент для каждого контекста, чтобы обеспечить целостность данных и безопасность в веб-приложениях.