«Encoder» ve «decoder» ne anlama geliyor?
Bir URL'yi kodlamak («url encode», «urlencode») bir adresteki yasak her karakteri — boşluk, aksan, esperluette, artı işareti — yüzde işareti ve ardından gelen baytın iki onaltılık rakamından oluşan bir dizeye dönüştürür. Kodlanmış bir URL'yi çözmek («url decode», «decoder url») bu dizileri ters yönde okur: baytlar yeniden oluşturulur ve ardından bildirilen kodlamaya göre — en sık UTF-8 — karakterlere dönüştürülür. İnsanlar «encoder decoder url» ya da «percent encoding online» yazdığında tam olarak bu ikiliyi arar.
Percent-encoding ne sıkıştırma ne de şifrelemedir: aksanlı bir kelime iki kat uzar ve herkes gözle okuyabilir. Tek görevi, varsayılan olarak yalnızca ASCII alt kümesine izin veren bir URL'den herhangi bir baytı geçirmektir. Tersine Base64, baytları tamamen metin tabanlı kanallarda taşımak için kullanılır — ikisi görsel olarak benzer ama birbirinin yerine kullanılamaz.
Bir URL'yi percent-encoding ile nasıl kodlarsınız
Adım 1: metin, seçilen karakter kümesine göre baytlara dönüştürülür; varsayılan UTF-8. Adım 2: her bayt için ilgili karakterin seçilen kapsam için izin verilen karakterler listesinde olup olmadığına bakılır. Adım 3: listedeyse olduğu gibi kopyalanır; değilse şuna dönüşür %XX, burada XX baytın iki onaltılık rakamıdır. Adım 4: boşluk seçeneği + etkinse, 32 numaralı bayt yerine artı işareti yazılır, şununla değil: %20.
Somut örnek: « café & été » bileşen kapsamunda şunu verir: caf%C3%A9%20%26%20%C3%A9t%C3%A9. Bu metni kodlayıcıya yazmanız yeterli: sonuç, giriş boyutu, çıkış boyutu ve ek yük tuşu bırakmadan önce görünür.
Dört kodlama kapsamı
Bu bileşen kapsamı yalnızca harfleri, rakamları ve şunları korur - _ . ! ~ * ' ( ) : bir parametre değerinin kapsamıdır ve şuna karşılık gelir encodeURIComponent. Bir de sorgu dizesi esperluette ve eşitlik işaretlerini de koruyarak tam bir query string oluşturur. Öte yandan yol segmenti şu karakterlere izin verir: / : @ & = + $ , ; barlar bozulmasın diye. Tam URL şunları da ekler ?, #, [ ve ] : neredeyse hiçbir şey kodlanmaz; yalnızca boşluklar ve ASCII dışı karakterler %XX.
Kodlanmış bir URL'yi nasıl çözümlersiniz
Kod çözme, diziyi soldan sağa tarar: yüzde işaretini takip eden iki onaltılık rakam bir bayt verir, başka her karakter seçilen kodlamaya göre dönüştürülerek kopyalanır. Baytlar daha sonra gruplanıp karakterlere çevrilir — « é » için iki bayt, « 日 » için üç, bir emoji için dört. «Çöz» sekmesi bulunan her diziyi, dizideki konumunu, baytlarını ve karşılık gelen metni gösterir.
Yüzde işaretinden sonra iki geçerli rakam gelmiyorsa hata açıktır: eksik dizi veya geçersiz onaltılık karakter. «% işaretlerini düzelt» düğmesi yalın yüzde işaretlerini %25, bu da diziyi bilgi kaybetmeden kod çözülebilir hale getirir — kısmen kaçışı yapılmış bir URL ile başa çıkmanın en güvenli yoludur.
Boşluk: %20 veya + — formların kuralı
%20 percent-encoding'deki katı boşluktur: yol, sorgu, parça ve başlıklarda çalışır. Bu işaret +, yalnızca şu biçimde boşluktur: application/x-www-form-urlencoded HTML formlarının ve eskiden query string'lerin kullandığı biçimdir. Başka yerlerde artı işareti olarak kalır — ve karıştırması çok kolay olduğu için, bir değer kodlanırken şuna %2B olarak kodlanmalıdır.
Uygulamada: bir form alanını doldurmak veya bir <form>, «Boşluk yerine + » kutusunu işaretleyin. Bir yönlendirme URL'si, canonical veya paylaşılan bağlantı için her zaman %20. Kod çözücü ise + işaretini varsayılan olarak boşluk sayar ve bu davranışı tek tıkla kapatabilirsiniz.
RFC 3986: unreserved, sub-delims ve gen-delims
RFC 3986, ASCII karakterlerini üç kategoriye ayırır. Bunlar: rezerve edilmemiş karakterler — harfler, rakamlar, - _ . ~ — her zaman olduğu gibi korunur. Sırada alt ayraçlar ! $ & ' ( ) * + , ; = ve genel ayraçlar : / ? # [ ] @ yapısal anlama sahiptir: otoriteyi, yolu, sorguyu ve parçayı ayırırlar. Geri kalan her şey — boşluk, tırnaklar, köşeli ayraçlar, süslü parantezler, yüzde işareti — kodlanmalıdır.
Bu kategoriler tam olarak «RFC 3986 & referans» sekmesinin karakter karakter gösterdiği kategorilerdir: bir karoya tıklayarak onaltılık kodunu, kategorisini ve bu karakteri koruyan kapsamları görürsünüz. «Bu karakteri kodlamam gerekir mi?» sorusuna verilecek en hızlı yanıt budur.
Aksanlı karakterler, emojiler ve UTF-8
Bir URL yalnızca güvenli ASCII baytları taşır; bu yüzden U+007F ötesindeki her karakter kodlanmalıdır. UTF-8'de « é » şuna denk gelir C3 A9 ve şuna dönüşür: %C3%A9, « 日 » üç bayttır ve üç dizi üretir; bir emoji dörder bayt kullanır ve sekiz kodlanmış karaktere karşılık gelir. Sonuç size uzun görünüyorsa bu bir hata değildir: tüm protokollerle uyumun bedelidir. Son olarak kaynak karakter kümesine dikkat edin — Latin-1 ile kodlanmış bir diziyi UTF-8 ile çözmek bozuk karakterler üretir; bu yüzden «Çöz» sekmesinde dört seçenek sunulur.
encodeURIComponent her zaman neden yeterli değildir
encodeURIComponent şunları hariç hepsini kodlar A-Z a-z 0-9 - _ . ! ~ * ' ( ), bu bir parametre değeri için uygundur ama tam URL'yi bozar; çünkü eğik çizgileri, iki noktaları ve esperluetteleri de kodlar. encodeURI tam tersini yapar: URL'nin yapısını korur ama boşlukları ve aksanları geçirdiği için ham metinde başarısız olur. İkisi de burada kapsanmıştır — hem de fazlasıyla: «Sorgu dizesi» kapsamı ve «Yol segmenti» kapsamı ikisi arasındaki farkı kapatır.
Percent-encoding ve Base64: iki farklı araç
Percent-encoding bayt bayt değiştirir ve orijinal metnin okunabilirliğini korur, karşılığında ciddi bir uzama olur. Base64 baytları üçerli gruplar halinde alıp 64 karakterlik bir alfabeyle yeniden yazar: kompakt ama tamamen okunamaz ve URL-safe varyantı olmadan bir URL'de olduğu gibi kullanılamaz. «Çapraz kodlamalar» sekmesi ikisini birden tek bakışta sunar; ayrıca onaltılık baytlar, HTML varlıkları ve kaçışı yapılmış JSON dizisi de eklenir — böylece kopyalamadan önce doğru temsili seçebilirsiniz.
Sık yapılan hatalar: çift kodlama ve yalın %
En sık yapılan hata aynı diziyi iki kez kodlamaktır: bir boşluk %20, sonra %2520olur ve sunucu tam olarak « %20 » değerini alır. İkinci hata, yüzde işaretinin kendisini unutmaktır; şuna dönüşmesi gerekir %25 — yoksa kod çözücü onu bir dizenin başlangıcı sanır, hata verir ya da metni eksiltir. Son olarak, bir form parametresinde + işaretini kodlanmamış bırakmak, istemediğiniz bir boşluğu eklemek demektir. Kod çözücü hatalı dizileri bildirir ve «% işaretlerini düzelt» düğmesi bu ikinci durumu kayıpsız onarır.
Kodlanmış URL'ler nerede saklanır
Takip query string'lerinde UTM, ayrıca redirect_uri ve OAuth, ayrıca webhooks hedef URL'si iç içe parametreler içerdiği imzalı callback URL'ler de; sunucu günlüklerinde, sitemap ve canonical'larda, şunlarda <a href> istemci tarafında üretilen, şunlardaki JWT payload'ı Base64URL olan, şunlardaki data: ve şu başlıklar: Location, ayrıca GET ile gönderilen her HTML formunda. Kodlamayı ve kod çözmeyi bir saniyede bilmek, tek bir dize için terminal açmanızı önler.
Performans ve iyi uygulamalar
Tarayıcıda kodlama ve kod çözme doğrusaldır ve birkaç megabaytta bile gözle görülür bir maliyeti yoktur: her karakter yalnızca bir kez işlenir, özyineleme ya da karakter başına bellek ayırımı yoktur. Tek tuzak çift kodlamadır — depolamadan önce her zaman tur sonucunu (round-trip) kontrol edin — ve birkaç kilobaytlık URL'lerdir; bunlar genellikle 2 000 karakteri aşan yerlerde proxy'ler tarafından kırpılır. Üretilen dizenin yanında kullanılan kapsamı da belgeleyin: « bileşen » ve « tam URL » aynı metin için aynı sonucu vermez.
Kimler için önerilir
Back-end ve front-end geliştiricileri (query string'ler, yönlendirmeler, OAuth), entegratörler ve teknik yazarlar (UTM bağlantıları, canonical, izleme), sistem yöneticileri ve DevOps ekipleri (webhooks, imzalı URL'ler, günlükler), test uzmanları ve pentester'lar (parametre fuzzing'i, filtre aşma), öğrenciler (UTF-8, ASCII ve RFC 3986'yı anlamak) ve bir çevrimiçi URL çevirici ve kod çözücü arayan herkese — hızlı, kapsamlı ve gizli bir çözüm. Ayrıca Base64 çevirici ve kod çözücü ile JSON biçimlendirici.