URL: кодування / декодування

Для чого призначений кодувальник і декодувальник URL

Щойно ви розміщуєте довільний текст у веб-адресі, частина цього тексту стає небезпечною: пробіл, амперсанд, знак питання, скісна риска або нелатинський символ можуть змінити значення URL або взагалі його зламати. Цей інструмент застосовує процентне кодування до тексту, щоб його можна було безпечно вставити в посилання, рядок запиту, параметр переспрямування або виклик API, а також декодує процентно закодовані рядки назад у зрозумілий людині текст. Ви звертаєтеся до нього, коли вручну будуєте URL, шукаєте причину, чому параметр запиту приходить спотвореним на сервер, читаєте переспрямування OAuth або копіюєте значення з адресного рядка, повного послідовностей %20 та %2F, і просто хочете дізнатися, що там написано.

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

Процентне кодування замінює небезпечний символ на знак відсотка, за яким ідуть дві шістнадцяткові цифри значення байта цього символу. Пробіл стає %20, скісна риска — %2F, а амперсанд — %26. Для всього, що виходить за межі ASCII, текст спочатку кодується як UTF-8, а потім екранується кожен отриманий байт — саме тому одна літера з діакритикою або емодзі може розгорнутися в кілька пар %XX. Недоторканим лишається тільки невеликий набір «незарезервованих» символів: літери, цифри та чотири знаки — дефіс, підкреслення, крапка й тильда. Усе інше є кандидатом на екранування, а те, наскільки агресивно воно екранується, залежить від того, який із двох кодувальників ви оберете.

Цей інструмент надає обидва кодувальники, які насправді постачає веб-платформа, і вибір правильного — це вся суть справи:

• Режим компонента відповідає encodeURIComponent і екранує агресивно, включно зі структурними символами &, =, ?, / та #. Використовуйте його для одного фрагмента даних, що живе всередині URL, наприклад для значення одного параметра запиту чи одного сегмента шляху.
• Режим цілого URL відповідає encodeURI і навмисно лишає структурні символи, як-от :, /, ?, & та #, недоторканими. Використовуйте його, коли у вас уже є повний, коректний URL і ви хочете лише виправити зайві пробіли чи символи поза ASCII, не руйнуючи його структури.

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

Припустімо, відвідувач шукає fish & chips. У режимі компонента це стає fish%20%26%20chips, і це можна безпечно розмістити після ?q=, бо амперсанд тепер екранований і його більше не сплутати з роздільником параметрів. Закодуйте всю адресу https://example.com/a b у режимі цілого URL — і виправиться лише пробіл, даючи https://example.com/a%20b, тоді як :// та скісні риски лишаються цілими. Декодування виконує ту саму логіку у зворотному напрямку, тож вставлення перехопленого переспрямування на кшталт next=%2Fdashboard%3Ftab%3Dbilling відкриває зрозумілий /dashboard?tab=billing, що ховався під ним.

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

Класична помилка — вибір неправильного режиму. Закодуйте цілий URL у режимі компонента — і ви екрануєте :// та кожну скісну риску, отримавши рядок, який є коректним текстом, але вже не робочим посиланням. Закодуйте одне значення в режимі цілого URL — і вбудований & чи = лишиться буквальним і непомітно зіпсує довколишній рядок запиту. Друга пастка — знак плюса: процентне кодування не перетворює пробіли на + — ця домовленість належить до надсилання HTML-форм із використанням application/x-www-form-urlencoded, тож +, який ви декодуєте, міг означати буквальний плюс або пробіл залежно від того, звідки він узявся. Насамкінець ніколи не кодуйте двічі: пропускання вже закодованого рядка через кодувальник ще раз перетворює кожен % на %25 й дає нісенітницю.

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

Усе це відбувається локально у вашому браузері — текст та URL, які ви вставляєте, ніколи не залишають ваш пристрій, ніколи не завантажуються на сервер і ніколи не журналюються. Оскільки URL-адреси так часто містять сеансові токени, адреси електронної пошти та інші ідентифікаційні параметри, збереження операції на вашій власній машині — це справжній виграш для приватності, а не гасло, і це означає, що інструмент продовжує працювати навіть із вимкненим з'єднанням. Якщо вам частіше треба розібрати URL на частини, ніж побудувати його, наш парсер рядка запиту розбиває повну адресу на окремі декодовані пари ключ/значення, і він теж повністю працює у браузері.