ترميز/فك ترميز URL

مبادئ ترميز URL وأهميته

عناوين URL تتبع مواصفة RFC 3986 التي تحدد الأحرف المسموح استخدامها بشكل مباشر. هذه الأحرف "الآمنة" تشمل الحروف الإنجليزية الكبيرة والصغيرة والأرقام وعدد محدود من الرموز: -, _, ., ~. أما باقي الأحرف، فيجب ترميزها باستخدام نظام الترميز المئوي (Percent Encoding).

الترميز بالنسبة المئوية: آلية العمل

الترميز المئوي يستبدل كل حرف غير آمن بعلامة % تتبعها قيمته الست عشرية في نظام ASCII أو UTF-8. على سبيل المثال:

• المسافة تصبح %20 (أو + في بعض السياقات)
• الرمز @ يصبح %40
• الشرطة المائلة / تصبح %2F
• علامة التساوي = تصبح %3D
• علامة الاستفهام ? تصبح %3F
• الرمز # يصبح %23

الأحرف العربية والـ UTF-8

الأحرف العربية تتراوح في UTF-8 بين بايتين وأربعة بايتات. عند ترميز الحرف العربي "أ" مثلًا، يُحوَّل أولًا إلى تمثيله بالبايتات في UTF-8 ثم تُرمَّز كل بايت منفردة. هذا يعني أن كلمة عربية قصيرة تتحول إلى سلسلة طويلة من الرموز %XX%XX%XX. المتصفحات الحديثة تعرض الأحرف العربية في شريط العنوان مباشرة لأغراض سهولة القراءة، لكن القيمة الفعلية المُرسَلة هي السلسلة المرمّزة.

الاستخدامات العملية في تطوير الويب

معاملات الاستعلام (Query Parameters)

أشيع استخدامات ترميز URL هي تمرير البيانات في معاملات الاستعلام. عند إنشاء رابط مثل:

https://example.com/search?q=برمجة+ويب&lang=ar

يجب ترميز قيمة المعامل q لأنها تحتوي على أحرف غير آمنة. عدم الترميز قد يتسبب في تفسير المتصفح أو الخادم للرابط بشكل خاطئ.

نماذج HTML (Form Submission)

حين يُرسَل نموذج HTML بطريقة GET، تُرمَّز البيانات تلقائيًا بصيغة application/x-www-form-urlencoded حيث تُستبدل المسافات بـ+ وترمَّز الأحرف الخاصة بالنسبة المئوية. فهم هذه الآلية يُساعد في معالجة البيانات على جانب الخادم.

واجهات برمجة التطبيقات (APIs)

عند استدعاء الـ API وتمرير بيانات في الـ URL، يجب ترميز كل قيمة على حدة قبل دمجها في الـ URL. استخدام encodeURIComponent() في JavaScript هو الأسلوب الصحيح لهذا الغرض.

الفرق الدقيق بين encodeURI وencodeURIComponent

هذا التمييز مهم جدًا للمطورين:

• encodeURI() تُرمّد الـ URI كاملًا وتحافظ على الأحرف التي لها معنى في بنية URL مثل :, /, ?, #, &, =. استخدمها عندما تريد ترميز عنوان كامل.

• encodeURIComponent() تُرمّد كل شيء باستثناء الأحرف والأرقام وعدد محدود من الرموز. استخدمها لترميز قيمة معامل واحدة داخل URL.

مثال توضيحي:

const url = "https://example.com/search";
const query = "hello world & more";

// صحيح: ترميز قيمة المعامل فقط
const finalUrl = url + "?q=" + encodeURIComponent(query);
// النتيجة: https://example.com/search?q=hello%20world%20%26%20more

الأخطاء الشائعة في الترميز

• الترميز المزدوج: ترميز URL الذي تم ترميزه مسبقًا، مما ينتج %2520 بدلًا من %20. تأكد من فك الترميز أولًا إذا لم تكن متأكدًا.
• ترميز URL الكامل بـ encodeURIComponent: سيُرمّد الـ / و: ما يُتلف بنية الرابط.
• إهمال الترميز في الروابط الديناميكية: ثغرة أمنية شائعة تفتح الباب أمام هجمات حقن الروابط (URL Injection).