Что такое кодирование URL и почему оно нам нужно?

Кодирование URL, также известное как percent-encoding, представляет собой фундаментальный механизм для кодирования информации в URL. Если вы когда-либо видели %20 или %3F в веб-адресе, вы столкнулись с кодированием URL в действии.

Почему существует кодирование URL

URL (Uniform Resource Locators) были разработаны в ранние дни интернета со строгими ограничениями. Они могут содержать только определённый набор ASCII-символов:

• Буквы: A-Z, a-z
• Цифры: 0-9
• Безопасные символы: -, _, ., ~

Но вот проблема: веб-приложениям нужно передавать все виды данных через URL — включая пробелы, специальные символы и символы из всех человеческих языков. Кодирование URL решает эту задачу.

Проблему которую решает кодирование URL

Зарезервированные символы имеют особое значение

Определённые символы в URL имеют специфические цели:

Что происходит без кодирования?

Представьте, что вы хотите найти "Tom & Jerry":

❌ Неправильно: example.com/search?q=Tom & Jerry

Браузер интерпретирует & как разделитель параметров, делая это двумя параметрами:

• q=Tom (неполный!)
• Jerry (что это?)

С кодированием:

✅ Правильно: example.com/search?q=Tom%20%26%20Jerry

Теперь ясно: один параметр q со значением "Tom & Jerry".

Международные символы не ASCII

Оригинальный набор символов ASCII не включает:

• Китайские символы: 中文
• Арабское письмо: العربية
• Эмодзи: 😀
• Буквы с диакритикой: café, naïve

Кодирование URL делает все эти символы передаваемыми.

Как работает кодирование URL

Процесс кодирования следует простому правилу:

Заменить специальные символы на % за которым следуют два шестнадцатеричных цифры, представляющие значение символа.

Общие кодировки символов

Как работает шестнадцатеричная система

Каждый символ имеет ASCII-код. Шестнадцатеричное (base-16) представление делает кодирование компактным:

Символ пробела:
- ASCII-код: 32 (десятичный)
- Шестнадцатеричный: 20
- Закодировано: %20

Амперсанд (&):
- ASCII-код: 38 (десятичный)
- Шестнадцатеричный: 26
- Закодировано: %26

UTF-8 и международные символы

Для символов вне ASCII (в основном всё что не английский), кодирование URL использует UTF-8:

1. Преобразовать символ в байты UTF-8
2. Закодировать каждый байт как %XX

Примеры

Китайский символ "中":

Символ: 中
Байты UTF-8: E4 B8 AD (3 байта)
Закодировано: %E4%B8%AD

Эмодзи "😀":

Символ: 😀
Байты UTF-8: F0 9F 98 80 (4 байта)
Закодировано: %F0%9F%98%80

Это делает каждый символ на каждом языке передаваемым через URL!

Реальные случаи использования

1. Поисковые запросы

Когда вы что-то ищете в Google:

Что вы вводите: "best coffee in tokyo"
URL становится: ?q=best%20coffee%20in%20tokyo

2. Отправки форм

HTML-формы с method="GET" кодируют данные формы:

<form method="GET" action="/search">
  <input name="product" value="women's shoes" />
  <input name="size" value="7" />
</form>

Отправляет на: /search?product=women%27s%20shoes&size=7

3. API-запросы

Построение RESTful API-вызовов с параметрами:

Оригинал: /api/users?name=John Doe&[email protected]
Закодировано: /api/users?name=John%20Doe&email=john%40example.com

4. Аутентификация

OAuth redirect URL часто содержат закодированные callback URL:

/oauth/authorize?redirect_uri=https%3A%2F%2Fmyapp.com%2Fcallback

5. Ссылки для шаринга

Кнопки шаринга в социальных медиа кодируют URL который шарится:

https://twitter.com/intent/tweet?url=https%3A%2F%2Fexample.com%2Farticle&text=Check%20this%20out%21

Когда кодировать

Всегда кодируйте:

✅ Пользовательский ввод в параметрах запроса
✅ Данные форм со специальными символами
✅ Международный текст (китайский, арабский, эмодзи и т.д.)
✅ Пути файлов с пробелами
✅ Email-адреса в URL
✅ JSON-данные в URL

Обычно не нужно кодировать:

❌ Сам путь (если нет специальных символов)
❌ Доменное имя
❌ Протокол (https://)
❌ Стандартную пунктуацию под вашим контролем

Как кодировать URL

JavaScript

// Для значений параметров (наиболее частое)
const query = "hello world!";
const encoded = encodeURIComponent(query);
// Результат: "hello%20world%21"

// Для полных URL
const url = "https://example.com/search?q=hello world";
const encoded = encodeURI(url);
// Результат: "https://example.com/search?q=hello%20world"

Python

from urllib.parse import quote, quote_plus

# Стандартное кодирование
text = "hello world!"
encoded = quote(text)  # 'hello%20world%21'

# Кодирование с плюсом (для данных формы)
encoded = quote_plus(text)  # 'hello+world%21'

PHP

// Для значений параметров
$query = "hello world!";
$encoded = urlencode($query);  // "hello+world%21"

// Для общего использования
$encoded = rawurlencode($query);  // "hello%20world%21"

Распространённые ловушки

1. Забывать кодировать пользовательский ввод

// ❌ Опасно - ломается со специальными символами
const url = `/search?q=${userInput}`;

// ✅ Безопасно - всегда кодируйте
const url = `/search?q=${encodeURIComponent(userInput)}`;

2. Двойное кодирование

// ❌ Неправильно - кодирование дважды
const text = "hello world";
const encoded = encodeURIComponent(encodeURIComponent(text));
// Результат: "hello%2520world" (сломано!)

// ✅ Правильно - кодировать один раз
const encoded = encodeURIComponent(text);
// Результат: "hello%20world"

3. Не декодировать после передачи

// ❌ Неправильно - показывать закодированный текст пользователям
console.log(params.get('name'));  // "John%20Doe"

// ✅ Правильно - декодировать для отображения
console.log(decodeURIComponent(params.get('name')));  // "John Doe"

Лучшие практики

1. Всегда кодируйте пользовательский ввод перед помещением в URL
2. Используйте встроенные функции - не пытайтесь кодировать вручную
3. Выбирайте правильную функцию - encodeURIComponent() для параметров
4. Декодируйте при чтении - не показывайте %20 пользователям
5. Тестируйте со специальными символами - включая пробелы, &, =, #
6. Тестируйте с международным текстом - китайский, арабский, эмодзи
7. Не помещайте чувствительные данные в URL - даже закодированные, они видимы

Тестирование ваших URL

Хотите поэкспериментировать с кодированием URL? Попробуйте эти бесплатные инструменты:

• Кодировщик URL - Безопасно кодируйте текст для URL
• Декодер URL - Декодируйте процентно-закодированные строки
• Парсер URL - Визуализируйте все компоненты URL

Заключение

Кодирование URL — это простая но важная концепция для веб-разработки. Она обеспечивает что:

• Специальные символы не ломают URL
• Международный текст может передаваться
• Данные безопасно текут между клиентом и сервером
• URL работают последовательно во всех системах

Помните: В случае сомнения, кодируйте! Ваши URL (и пользователи) будут благодарны.

---

Попробуйте наш бесплатный кодировщик URL чтобы мгновенно закодировать ваши URL, или используйте декодер URL чтобы декодировать процентно-закодированные строки!