URL Kodlama ve Çözme

encodeURI ile encodeURIComponent arasındaki gerçek fark

JavaScript iki farklı kodlama fonksiyonu sunar ve aralarındaki fark tercih meselesi değildir. encodeURIComponent bir URL parçasının içinde geçebilecek her ayracı kaçırır: ampersand, eşittir, soru işareti, eğik çizgi. encodeURI ise tam bir adresi kodladığınızı varsayar ve bu ayraçlara dokunmaz, çünkü onları kodlarsa URL yapısını yok eder. Sadece birini sunan bir araç, kullanım durumlarının yarısında yanlış sonuç verir. Bu yüzden burada mod açıkça seçilir.

1const deger = 'a&b=c';2 3encodeURIComponent(deger); // 'a%26b%3Dc'  -> sorgu DEĞERİ için doğru4encodeURI(deger);          // 'a&b=c'      -> & ve = korundu5 6// Pratikte fark burada ortaya çıkar:7'/ara?q=' + deger;                       // '/ara?q=a&b=c'8// Sunucu bunu q=a ve ayrı bir b=c parametresi olarak okur.9 10'/ara?q=' + encodeURIComponent(deger);   // '/ara?q=a%26b%3Dc'11// Sunucu q parametresinin değerini 'a&b=c' olarak okur. Doğrusu bu.

Form kodlaması ve artı işareti tuzağı

HTML formları ve pek çok sorgu dizesi application/x-www-form-urlencoded biçimini kullanır. Bu biçim yüzde kodlamasının yakın akrabasıdır ama tek bir kritik farkı vardır: boşluk %20 yerine + olarak yazılır. Bunun sonucu, + karakterinin artık iki farklı anlam taşımasıdır. Gerçek bir artı işareti göndermek istiyorsanız onu %2B olarak kodlamanız gerekir, yoksa karşı taraf boşluk okur.

1// Kodlama: form modunda boşluk + olur, gerçek artı %2B olur2encodeURIComponent('bir iki+uc').replace(/%20/g, '+');3// 'bir+iki%2Buc'4 5// Çözme: + karakterini boşluğa çevirme işlemi decodeURIComponent'ten ÖNCE6// yapılmalıdır, aksi halde literal %2B önce + olur, sonra yanlışlıkla boşluğa döner.7const girdi = 'bir+iki%2Buc';8 9decodeURIComponent(girdi);                   // 'bir+iki+uc'  <-- yanlış10decodeURIComponent(girdi.replace(/\+/g, ' ')); // 'bir iki+uc'  <-- doğru11 12// Telefon numaraları bu hatanın klasik kurbanıdır:13decodeURIComponent('%2B905551234567'); // '+905551234567'14new URLSearchParams('tel=+905551234567').get('tel'); // ' 905551234567' <-- artı gitti

Türkçe karakterler UTF-8 baytları olarak kodlanır

Yüzde kodlaması karakterleri değil baytları kaçırır. ASCII dışındaki her karakter önce UTF-8 ile baytlara dönüştürülür, sonra her bayt ayrı ayrı %XX biçiminde yazılır. Türkçe harfler UTF-8 içinde iki bayt tuttuğu için tek harf iki yüzde dizisine açılır. Bu, kodlanmış bir URL'nin gözle okunmasını zorlaştırır ama davranış tamamen öngörülebilirdir.

1encodeURIComponent('ş'); // '%C5%9F'   (iki bayt)2encodeURIComponent('ı'); // '%C4%B1'3encodeURIComponent('İ'); // '%C4%B0'4encodeURIComponent('ğ'); // '%C4%9F'5encodeURIComponent('a'); // 'a'         (ASCII kodlanmaz)6 7encodeURIComponent('çiçek'); // '%C3%A7i%C3%A7ek'8 9// Bir emoji dört bayt tutar:10encodeURIComponent('🚀'); // '%F0%9F%9A%80'

Alan adının kendisi ayrı bir konudur. https://çiçek.com gibi bir adreste alan adı yüzde kodlamasıyla değil, punycode ile taşınır: tarayıcı bunu https://xn--iek-3lac.com biçimine çevirir. Yüzde kodlaması yalnızca yol, sorgu ve fragman kısımları için geçerlidir. Türkçe alan adlarıyla çalışıyorsanız sunucu tarafında karşılaştırma yaparken her iki gösterimi de normalleştirmeniz gerekir.

Çözme sırasında oluşan hatalar

decodeURIComponent geçersiz bir girdiyle karşılaştığında sessizce geçmez, URIError fırlatır. Tek başına duran bir yüzde işareti, eksik kalmış bir bayt dizisi veya geçersiz bir UTF-8 kombinasyonu bunu tetikler. React uygulamasında yakalanmayan böyle bir hata, doğrudan hata sınırına ulaşıp ekranı boşaltır. Bu araç çözme işlemini her zaman try/catch içinde çalıştırır ve hatayı normal bir doğrulama sonucu olarak gösterir.

Bozuk yüzde dizileri genellikle elle düzenlenmiş bağlantılardan, kırpılmış günlük kayıtlarından veya yüzde işaretini kaçırmadan yapıştıran arayüzlerden gelir. Kullanıcıdan gelen sorgu dizesini işleyen her sunucu ve istemci kodunun bu ihtimali hesaba katması gerekir, çünkü tek bir bozuk parametre tüm isteğin ayrıştırılmasını düşürebilir. Node tarafında da davranış aynıdır: URLSearchParams bozuk diziyi sessizce olduğu gibi bırakırken, decodeURIComponent aynı girdide istisna fırlatır. İki katmanın farklı davranması, hatanın nerede oluştuğunu bulmayı zorlaştırır.

1decodeURIComponent('%');        // URIError: URI malformed2decodeURIComponent('%E0%A4%A'); // URIError: eksik üçüncü bayt3decodeURIComponent('%ZZ');      // URIError: geçersiz onaltılık4 5// Doğru kullanım:6function guvenliCoz(metin) {7  try {8    return { ok: true, deger: decodeURIComponent(metin) };9  } catch {10    return { ok: false, hata: 'Bozuk yüzde dizisi' };11  }12}13 14// Kodlama tarafında da tek bir hata kaynağı vardır: eşi olmayan vekil karakter.15encodeURIComponent('\uD800'); // URIError: UTF-8 karşılığı yok