URL Kodlama Geliştiricilerinin Hala Yaptığı Hatalar (ve Düzeltmeleri)

URL kodlama hataları incelikli, kalıcıdır ve sıklıkla üretim sırasında keşfedilir. Yanlış yerleştirilmiş bir %20, çift kodlanmış bir ve işareti veya karışık bir + vs alanı, API çağrılarını bozabilir, izleme verilerini bozabilir ve güvenlik açıkları oluşturabilir. En yaygın olanları düzeltelim.

Kodlamanızı URL Kodlayıcı/Kod Çözücü aracımızla test edin — herhangi bir dizeyi yapıştırın ve kodlanmış sonucu anında görün.

encodeURI ve encodeURIComponent

JavaScript'in iki yerleşik kodlama işlevi vardır ve yanlış olanı kullanmak hataların 1 numaralı kaynağıdır:

// WRONG — encodeURI sorgu değerlerinde &'yi korur
const url = 'https://api.example.com/search?q=' + encodeURI('tom ve jerry');
// Sonuç: https://api.example.com/search?q=tom%20&%20jerry
// & korunur — artık ayrı bir parametre gibi görünür! // DOĞRU
const url = 'https://api.example.com/search?q=' + encodeURIComponent('tom & jerry');
// Sonuç: https://api.example.com/search?q=tom%20%26%20jerry
Genel kural: Bireysel değerler için encodeURIComponent kullanın. encodeURI yalnızca ASCII olmayan karakterlerin kodlanmasını gerektiren tam bir URL'niz olduğunda kullanın.
Çift Kodlama Hataları
Çift kodlama, önceden kodlanmış bir dize yeniden kodlandığında gerçekleşir:
const name = 'merhaba dünya';
const kodlanmış = encodeURIComponent(isim); // merhaba%20dünya
const doubled = encodeURIComponent(kodlanmış); // merhaba%2520world
// %25, %'nin kendisinin kodlamasıdır!
Bu genellikle şu durumlarda meydana gelir:
Bir çerçeve, sorgu parametrelerini otomatik olarak kodlar ve siz de bunları önceden kodlarsınız
Bir URL saklanmadan önce kodlanır, ardından alındığında tekrar kodlanır
Middleware, URL'yi her biri kodlama ekleyen birden çok katmanda işler
Algılama
URL'lerde %25 ifadesini arayın — bu neredeyse her zaman çift kodlamanın bir işaretidir. %2520 (çift kodlu alan) dizisi klasik bir anlatımdır.
+ ve %20 Karışıklığı
HTML form gönderimlerinde (application/x-www-form-urlencoded), boşluklar + olur. Standart yüzde kodlamada (RFC 3986), boşluklar %20.
 olur
Bu önemli çünkü:
decodeURIComponent, not kodunu çözerek + uzaya geri döndürür - onu değişmez bir +
 olarak bırakır
Arka uç çerçeveleri, ayrıştırıcıya bağlı olarak + kodunu otomatik olarak çözebilir veya çözemeyebilir
API'niz %20 bekliyor ancak + alıyorsa, "kırmızı+araba" araması, "kırmızı araba" yerine "kırmızı+araba" (gerçek artı ile) sonucunu döndürür
// Hem + hem de %20'yi işleyen güvenli kod çözme
function güvenliDecodeParam(değer) { return decodeURIComponent(value.replace(/\+/g, '%20'));
}
UTF-8 Uç Kılıfları
é, ü, 日本語 gibi ASCII olmayan karakterler ve emojilerin UTF-8 bayt dizileri olarak yüzde olarak kodlanması gerekir:
encodeURIComponent('café') // caf%C3%A9
encodeURIComponent('日本語') // %E6%97%A5%E6%9C%AC%E8%AA%9E
encodeURIComponent('🔒') // %F0%9F%94%92
Sorun şu durumlarda ortaya çıkar:
Sunucu Latin-1 bekliyor ancak UTF-8 alıyor (mojibake — bozuk karakterler)
Veritabanı sütunları UTF-8'e ayarlanmamış, çok baytlı karakterler sessizce kesiliyor
Günlük dosyaları kodlanmış dizeleri yanlış karakter kümesiyle yorumluyor
Yönlendirme ve Geri Arama URL'si Tuzakları
OAuth geri aramaları ve yönlendirme URL'leri kodlama hatalarına özellikle açıktır:
// OAuth yönlendirmesi oluşturma
const yönlendirmeUri = 'https://myapp.com/callback?source=oauth';
const authUrl = `https://provider.com/auth?redirect_uri=${encodeURIComponent(redirectUri)}`;
// Doğru: geri çağırma URL'sinin tamamı (kendi ?'si dahil) tek bir parametre değeri olarak kodlanmıştır
Yaygın hatalar:
redirect_uri hiçbir şekilde kodlanmıyor — geri çağırmadaki ? ana URL
'yi bölüyor
redirect_uri kısmen kodlanıyor — sorgu değil, yol kodlanıyor
Yalnızca parametre değeri yerine tüm kimlik doğrulama URL'sini kodlama
Bu hatalar genellikle saldırganların kimlik avı amacıyla yararlandığı açık yönlendirme güvenlik açıkları oluşturur.
Hata Ayıklama Kontrol Listesi
Bir URL beklendiği gibi çalışmadığında şunları sırayla kontrol edin:
%25 öğesini arayın — çift kodlamayı belirtir
Check + vs %20 — boşluklar tutarlı bir şekilde işleniyor mu?
Ham isteği inceleyin — gönderilen gerçek kodlanmış URL'yi görmek için tarayıcı DevTools Ağı sekmesini kullanın
Özel karakterlerle test edin — & = ?'yi deneyin URL yapısını bozup bozmadıklarını görmek için değerlerde # /
Check Content-Type — application/x-www-form-urlencoded veya application/json?
 olarak ayrıştıran sunucudur
Sunucudaki kod çözmeyi doğrulayın — ham ve kodu çözülmüş değerleri sunucu tarafında günlüğe kaydedin
Güvenli Yardımcı İşlevler
// Güvenli bir şekilde sorgu dizesi oluşturun
function buildQueryString(params) { return Object.entries(params) .map(([anahtar, değer]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}` ) .join('&');
} // URLSearchParams'ı kullanın (modern tarayıcılar + Node.js)
const params = new URLSearchParams({ q: 'tom & jerry', page: '1' });
const url = `https://api.example.com/search?${params}`;
// Doğru: kodlamayı otomatik olarak yönetir
En iyi uygulama: Manüel dize birleştirme yerine URLSearchParams veya URL yapıcısını kullanın. Kodlamayı varsayılan olarak doğru şekilde işlerler.
FAQ
+ neden boşluk haline geliyor?
Bu, boşlukların + olarak kodlandığı HTML form kodlamasının (application/x-www-form-urlencoded) bir mirasıdır. Standart yüzde kodlamada (RFC 3986), boşluklar %20 şeklindedir. + kuralı yalnızca form gönderimlerindeki sorgu dizeleri için geçerlidir; yol bölümleri veya diğer URL parçaları için geçerli değildir.
Yuvalanmış URL'leri doğru şekilde nasıl kodlayabilirim?
Dış URL'nin sorgu parametresine yerleştirmeden önce iç URL'de encodeURIComponent kullanın. Bu, aksi takdirde dış URL'nin yapısının bir parçası olarak yorumlanacak olan :/? gibi karakterleri kodlar.
URL kodlamasından sonra imzalar neden bozuluyor?
İmzalar tam bayt dizileri üzerinden hesaplanır. Bir dizeyi kodlamadan önce (veya kod çözmeden sonra) imzalarsanız, ancak bunu kodlanmış biçimde doğrularsanız (veya tam tersi), baytlar farklılık gösterir ve imza başarısız olur. İmzalamadan önce daima kodlamayı normalleştirin.
İlgili Araçlar ve Makaleler
URL Kodlayıcı/Kod Çözücü — kodlamayı gerçek zamanlı olarak test edin
JWT Güvenlik Hataları — belirteç yönetimi için de kodlama önemlidir
Sağlama Toplamı Uyuşmazlığı Düzeltme — kodlamada bozuk dosya karmaları değiştiğinde