Greșeli de codificare URL pe care dezvoltatorii le fac încă (și remediază)

Erorile de codificare URL sunt subtile, persistente și adesea descoperite în producție. Un %20 greșit, un ampersand dublu codificat sau un + confuz față de spațiu poate întrerupe apelurile API, corupa datele de urmărire și poate crea vulnerabilități de securitate. Să le reparăm pe cele mai comune.

Testează-ți codarea cu instrumentul nostru Codificator/Decodor de adrese URL — inserează orice șir și vezi rezultatul codificat instantaneu.

JavaScript are două funcții de codare încorporate, iar utilizarea pe cea greșită este sursa #1 de erori:

// GREȘIT — codulURI păstrează și în valorile de interogare
const url = 'https://api.example.com/search?q=' + encodeURI('tom & jerry');
// Rezultat: [
// & este păstrat — acum arată ca un parametru separat! // CORECT
const url = 'https://api.example.com/search?q=' + encodeURIComponent('tom & jerry');
// Rezultat: [
[Regula generală: Utilizați encodeURIComponent pentru valori individuale. Utilizați [ numai atunci când aveți o adresă URL completă care are nevoie doar de caractere non-ASCII codificate.
 [ de codificare dublă
Codificarea dublă are loc atunci când un șir deja codificat este din nou codificat:
[const name = 'bună lume';
const encoded = encodeURIComponent(nume); // salut%20world
const dublat = encodeURIComponent(encoded); // salut%2520world
// %25 este codificarea lui % în sine!

Căutați %25 în adrese URL - este aproape întotdeauna un semn de dublă codificare. Secvența [ (spațiu codificat dublu) este clasicul indicator.

// Decodare sigură care gestionează atât + cât și %20
function safeDecodeParam(valoare) { return decodeURIComponent(value.replace(/\+/g, '%20'));
}

encodeURIComponent('café') // caf%C3%A9
encodeURIComponent('日本語') // %E6%97%A5%E6%9C%AC%E8%AA%9E
encodeURIComponent('🔒') // %F0%9F%94%92

Capcane ale adreselor URL de redirecționare și apel invers

Apelurile inverse OAuth și adresele URL de redirecționare sunt în mod special predispuse la erori de codificare:

// Crearea unei redirecționări OAuth
const redirectUri = 'https://myapp.com/callback?source=oauth';
const authUrl = `https://provider.com/auth?redirect_uri=${encodeURIComponent(redirectUri)}`;
// Corect: întreaga adresă URL de apel invers (inclusiv a sa?) este codificată ca o singură valoare a parametrului

Aceste erori creează adesea vulnerabilități de redirecționare deschise pe care atacatorii le exploatează pentru phishing.

Când o adresă URL nu funcționează conform așteptărilor, verificați-le în ordine:

// Creați un șir de interogare în siguranță
funcția buildQueryString(params) { returnează Object.entries(params) .map(([cheie, valoare]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}` ) .join('&');
} // Folosiți URLSearchParams (browserele moderne + Node.js)
const params = URLSearchParams noi({ q: 'tom & jerry', page: '1' });
url const = `https://api.example.com/search?${params}`;
// Corect: gestionează codificarea automat

Aceasta este o moștenire de la codificarea formularelor HTML (application/x-www-form-urlencoded), unde spațiile sunt codificate ca +. În codificarea procentuală standard (RFC 3986), spațiile sunt [. Convenția [ se aplică numai șirurilor de interogări din trimiterile formularelor, nu și segmentelor de cale sau altor părți URL.

Utilizați encodeURIComponent pe adresa URL interioară înainte de a o plasa în parametrul de interogare a adresei URL externe. Aceasta codifică caractere precum :/? care altfel ar fi interpretate ca parte a structurii URL-ului extern.

Semnăturile sunt calculate pe secvențe exacte de octeți. Dacă semnați un șir înainte de codare (sau după decodare), dar îl verificați în formă codificată (sau invers), octeții diferă și semnătura eșuează. Normalizați întotdeauna codificarea înainte de a semna.