URL Kodlama ve Kod Çözme Rehberi

Bir URL, özel anlam taşıyan veya yazıldığı gibi güvenilir biçimde gönderilemeyen karakterler içerebilir. Yüzde kodlama, bu karakterleri % ve ardından iki basamaklı onaltılık bayt değeriyle temsil eder; metni önce baytlara dönüştürmek için genellikle UTF-8 kullanılır. Bir URL bileşeninin içine girecek değer için encodeURIComponent, yapısı zaten hazır olan tam bir URL'yi kodlarken yalnızca encodeURI kullanın.

Yüzde kodlama ne yapar?

Bir URL'nin farklı bölümleri vardır: şema, ana bilgisayar (host), yol, sorgu ve bazen parça (fragment). /, ?, & ve # gibi karakterler bu bölümleri veya içeriklerini ayırabilir. Bu karakterlerden biri yapı değil de bir değerin parçasıysa, ayırıcı sanılmaması için kodlanmalıdır.

Yüzde kodlamada bir bayt, % ve ardından onaltılık değeriyle yazılır. Örneğin, boşluk genellikle %20, ve işareti ise %26 olarak gösterilir. Yüzde işaretinin kendisi veri olduğunda %25 olarak kodlanır. Kaçışlardaki onaltılık harfler büyük veya küçük olabilir; her iki biçim de aynı baytı temsil eder.

Yüzde kodlama şifreleme değildir. Veriyi URL bağlamına yerleştirmek için güvenli hale getirir; URL'yi okuyabilen herkes kodu çözebilir. Tarayıcı geçmişinde, günlüklerde veya yönlendiren (referrer) verilerinde kaydedilebileceği için şifreleri, erişim belirteçlerini veya diğer sırları URL'lere koymaktan kaçının.

Ayrılmış karakterler ve URL yapısı

Bazı karakterler, URI sözdiziminde tanımlı bir rolleri olduğu için ayrılmış olarak adlandırılır. Örnekler arasında yoldaki /, sorgudan önceki ?, sorgu parametreleri arasındaki &, parametre adı ile değeri arasındaki = ve parçadan önceki # bulunur. Ayrılmış bir karakter veri olarak da bulunabilir, ancak bu bağlamda yüzde olarak kodlanması gerekebilir.

Örneğin, bir arama teriminin tea & coffee olduğunu varsayalım. Sorgu parametresinde ve işareti, başka bir parametrenin ayırıcısı olarak değil, değerin parçası olarak ele alınmalıdır. Değeri tea%20%26%20coffee olarak kodlayın ve ardından URL'ye yerleştirin:

https://example.com/search?q=tea%20%26%20coffee

? ve = URL yapısıdır. Boşluk ve ve işareti değere aittir, bu yüzden kodlanır. Neyin kodlanması gerektiği verinin nereye yerleştirildiğine bağlıdır; tüm URL'deki her karakteri ayrım gözetmeden kodlamak için tek bir kural yoktur.

encodeURI vs encodeURIComponent

JavaScript, URL metnini kodlamak için yaygın olarak kullanılan iki işlev sağlar:

• encodeURI(value) tam bir URI için tasarlanmıştır. :, /, ?, &, = ve # dahil olmak üzere yapısını oluşturabilecek karakterleri korur.
• encodeURIComponent(value) sorgu parametresi adı veya değeri gibi tek bir bileşen için tasarlanmıştır. Bu yapısal karakterleri, URL ayırıcıları olarak değerlendirilmek yerine bileşenin parçası kalacak şekilde kodlar.

Arama terimi örneğinde değer üzerinde encodeURIComponent kullanın:

const term = "tea & coffee";
const url = `https://example.com/search?q=${encodeURIComponent(term)}`;

console.log(url);
// https://example.com/search?q=tea%20%26%20coffee

Yaygın bir hata, tam bir URL üzerinde encodeURIComponent çalıştırmaktır. Bu, iki nokta ve eğik çizgileri de kodlar; böylece sonuç artık normal yapılandırılmış bir URL olmaz. Tersi hata—kodlanmamış bir sorgu değerinde encodeURI kullanmak—& veya # işaretlerinin ayırıcı olarak etkin kalmasına yol açabilir. Her dinamik değeri bir bileşen olarak kodlayın, ardından URL'yi birleştirin.

JavaScript işlevleri her noktalama işaretini kodlamaz. Örneğin, encodeURIComponent harflere, rakamlara ve birkaç başka karaktere ek olarak !, ', (, ) ve * karakterlerini kaçışsız bırakır. Bu, işlevin kodlama kurallarına göre izin verilir; ancak daha katı gereksinimleri olan bir uygulama bu karakterlerden bazılarını da kodlamayı seçebilir.

Tam bir adresi inceliyorsanız veya bölümlerini ayrı ayrı görmeniz gerekiyorsa, URL Parser şema, ana bilgisayar, yol, sorgu ve parçayı belirlemenize yardımcı olabilir. Metni doğrudan kodlamak veya çözmek için URL Encoder / Decoder aracını kullanın.

Boşluklar neden + veya %20 olarak görünür?

%20, boşluğun yüzde kodlanmış biçimidir. Artı işareti, her URL'de boşluk için evrensel bir karşılık değildir. Sorgu verileri için yaygın olarak kullanılan form kodlama kuralında (application/x-www-form-urlencoded) boşluğu temsil eder. Bu kuralda, gerçek bir artı işareti boşluktan ayırt edilebilmesi için %2B olarak kodlanır.

Bu ayrım kod çözerken önemlidir. JavaScript'in decodeURIComponent("a+b") çağrısı a+b döndürür; artıyı boşluğa dönüştürmez. Buna karşılık URLSearchParams, serileştirilmiş sorgu verilerinde artının boşluğa karşılık geldiği form tarzı sorgu işleme kullanır:

const params = new URLSearchParams();
params.set("q", "tea & coffee");

console.log(params.toString());
// q=tea+%26+coffee
console.log(params.get("q"));
// tea & coffee

Parametreler olarak sorgu parametreleriyle çalışırken URLSearchParams kullanın. Tek bir bileşeni kendiniz kodlamanız gerektiğinde encodeURIComponent kullanın. Biçimi bilmeden her + işaretini boşlukla değiştirmeyin: artı gerçek veri olabilir.

UTF-8 ve ASCII olmayan metin

Yüzde kodlama, doğrudan karakterlerin tamamını değil baytları temsil eder. Temel ASCII aralığının dışındaki metinler için metin önce bayt olarak kodlanır (genellikle UTF-8) ve her bayt bir %HH kaçışı olarak yazılır. Bu nedenle bir karakter birden çok kaçışa dönüşebilir.

Örneğin, é UTF-8'de C3 A9 iki baytı olarak kodlanır; bu nedenle JavaScript café için caf%C3%A9 üretir:

encodeURIComponent("café");
// "caf%C3%A9"

Bir emoji dört UTF-8 baytı ve dolayısıyla dört yüzde kaçışı kullanabilir. Kod çözerken baytlar aynı karakter kodlamasıyla, normalde UTF-8 ile yorumlanmalıdır. Bir kaçış dizisi, baytlar metin olarak çözülene kadar mutlaka okunabilir değildir.

Güvenli kod çözme ve yaygın hatalardan kaçınma

Kod çözme, kaçışlar geçerli olduğunda yüzde kodlamayı tersine çevirir. JavaScript'te decodeURIComponent bir bileşeni çözer; decodeURI ise tam bir URI için tasarlanmıştır ve kod çözmenin URI'nin yapısını değiştirebileceği durumlarda ayrılmış karakterlerin kodlanmış biçimlerini korur.

Birkaç pratik kontrol hatayı önlemeye yardımcı olur:

• Bir değeri URL'ye eklendiği noktada yalnızca bir kez kodlayın. Zaten kodlanmış bir değeri kodlamak %20'yi %2520'ye dönüştürebilir; bu sürece çift kodlama denir.
• Yalnızca orijinal değere ihtiyacınız olduğunda kodu çözün. Bir tarayıcı veya sunucu sizin için URL bileşenini zaten ayrıştırmış olabilir; tekrar çözmek anlamını değiştirebilir.
• URL yapısını veriden ayrı tutun. Parametre adlarını ve değerlerini bileşenler olarak kodlayın, aralarındaki ayırıcıları değil.
• Hatalı kaçışları ele alın. JavaScript kod çözme işlevleri, giriş geçersiz bir kaçış dizisi veya geçersiz UTF-8 kodlaması içeriyorsa URIError fırlatır.
• Çözülmüş girdiyi güvenilmez olarak ele alın. Kod çözme temsili değiştirir, güvenliği değil; değeri HTML veya veritabanı sorgusu gibi sonraki kullanımı için doğrulayın veya kaçışlayın.

Özet

• Yüzde kodlama baytları %HH olarak yazar; ASCII olmayan metni bayt olarak temsil etmek için UTF-8 kullanılır.
• Bir URL bileşeni için encodeURIComponent, yapısı zaten kurulmuş tam bir URL için encodeURI kullanın.
• %20 yüzde kodlanmış boşluktur; + her URL bağlamında değil, form tarzı sorgu kodlamasında boşluk anlamına gelir.
• Dinamik değerleri bir kez kodlayın, URL bölümleri arasındaki ayırıcıları koruyun ve ele aldığınız biçime göre kodu çözün.