ترميز URL مقابل ترميز Base64: ما الفرق بينهما؟

ما هو ترميز URL؟

ترميز URL، ويُسمى أيضًا ترميز النسبة المئوية (percent-encoding)، مُعرَّف في معيار RFC 3986 باعتباره الآلية المستخدمة لتمثيل الأحرف في الـ URI التي لا يُسمح بها أو التي تحمل معنى خاصًا. يُحوَّل كل حرف مراد ترميزه إلى بايت واحد أو أكثر (باستخدام UTF-8)، ويُمثَّل كل بايت بعلامة النسبة المئوية (%) متبوعة برقمين ست عشريين بأحرف كبيرة.

على سبيل المثال، تصبح مسافة الفراغ %20، وتصبح علامة العطف (&) %26، ويصبح حرف غير ASCII مثل رمز اليورو %E2%82%AC (ثلاثة بايتات UTF-8، كل منها مُرمَّز بالنسبة المئوية).

// أمثلة على ترميز URL في JavaScript
encodeURIComponent('hello world');   // "hello%20world"
encodeURIComponent('price=10&qty=2'); // "price%3D10%26qty%3D2"
encodeURIComponent('cafe');         // "caf%C3%A9"

صُمِّم ترميز URL خصيصًا لجعل الروابط آمنة وصالحة. فهو يرمّز فقط الأحرف غير المسموح بها أو التي تحمل معاني محجوزة في الـ URI، تاركًا الأحرف الأبجدية الرقمية وبعض الرموز الآمنة دون تغيير.

ما هو ترميز Base64؟

ترميز Base64، المُعرَّف في معيار RFC 4648، هو أسلوب لترميز البيانات الثنائية إلى نص، ويمثّل البيانات الثنائية باستخدام مجموعة من 64 حرفًا من أحرف ASCII: A-Z وa-z و0-9 و+ و/، مع استخدام = للحشو (padding). كل ثلاثة بايتات من المدخلات تنتج أربعة أحرف في المخرجات.

صُمِّم Base64 لنقل البيانات الثنائية عبر قنوات تدعم النص فقط بشكل موثوق، مثل البريد الإلكتروني (MIME) أو تضمين البيانات في XML/JSON. وهو ليس خاصًا بالروابط، ويرمّز جميع بايتات المدخلات وليس فقط الأحرف الخاصة.

// أمثلة على ترميز Base64 في JavaScript
btoa('hello world');         // "aGVsbG8gd29ybGQ="
btoa('price=10&qty=2');      // "cHJpY2U9MTAmcXR5PTI="

// بالنسبة لسلاسل Unicode، رمّزها إلى UTF-8 أولاً
function toBase64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}
toBase64('cafe');           // "Y2Fmw6k="

هناك أيضًا نسخة آمنة للروابط من Base64 (تُسمى Base64url) تستبدل + بـ - و/ بـ _، وغالبًا ما تحذف حشو =. تُستخدم هذه النسخة في رموز JWT، وعناوين البيانات (data URIs) داخل الروابط، وفي سياقات أخرى قد تتعارض فيها أحرف Base64 القياسية مع بنية الـ URL.

الفروق الرئيسية

الميزة	ترميز URL	ترميز Base64
المعيار	RFC 3986	RFC 4648
الغرض	جعل الروابط آمنة	تمثيل البيانات الثنائية كنص
ما يُرمَّز	الأحرف الخاصة/المحجوزة فقط	جميع بايتات المدخلات
صيغة المخرجات	تسلسلات ست عشرية بصيغة %XX	A-Z, a-z, 0-9, +, /, =
زيادة الحجم	متغيرة (تكبر الأحرف المُرمَّزة فقط)	دائمًا أكبر بنحو 33%
قابل للعكس	نعم	نعم
قابل للقراءة البشرية	جزئيًا (تبقى الأحرف غير المحجوزة)	لا
آمن للروابط افتراضيًا	نعم (بحكم التصميم)	لا (يحتوي على +، /، =)

متى تستخدم أيًّا منهما

استخدم ترميز URL عندما تحتاج إلى تضمين أحرف خاصة في رابط، مثل قيم معاملات الاستعلام، أو مقاطع المسار، أو معرّفات الأجزاء (fragment identifiers). ترميز URL هو الخيار الصحيح لأي حالة يجب فيها تضمين البيانات داخل بنية الرابط.

استخدم ترميز Base64 عندما تحتاج إلى تمثيل بيانات ثنائية (صور، ملفات، حمولات مُشفَّرة) كنص، أو تضمين محتوى ثنائي في JSON أو XML، أو نقل البيانات عبر قنوات نصية فقط. يُستخدم Base64 أيضًا في ترويسات مصادقة HTTP الأساسية (HTTP Basic Authentication) ورموز الويب JSON (JWTs).

// ترميز URL: تضمين مصطلح بحث في رابط
const searchUrl = 'https://example.com/search?q=' +
  encodeURIComponent('C++ & Java');
// "https://example.com/search?q=C%2B%2B%20%26%20Java"

// Base64: تضمين صورة في CSS أو HTML
const imageData = 'data:image/png;base64,iVBORw0KGgoAAAANS...';

// Base64: ترويسة مصادقة HTTP الأساسية
const credentials = btoa('username:password');
const header = 'Authorization: Basic ' + credentials;

هل يمكن الجمع بينهما؟

نعم، وفي بعض الحالات يجب عليك ذلك. إذا احتجت إلى تمرير بيانات مُرمَّزة بـ Base64 كمعامل في رابط، فقد تحتوي مخرجات Base64 القياسية على أحرف + و/ و=، وهي أحرف تحمل معاني خاصة في الروابط. أمامك خياران:

الخيار 1: رمّز سلسلة Base64 بترميز URL قبل وضعها في الرابط. فيصبح + هو %2B، ويصبح / هو %2F، ويصبح = هو %3D.

الخيار 2: استخدم نسخة Base64url (القسم 5 من RFC 4648)، التي تستبدل + بـ -، و/ بـ _، وتزيل الحشو. وهذا هو النهج المستخدم في رموز JWT والعديد من واجهات API الحديثة.

// الخيار 1: ترميز Base64 القياسي بترميز URL
const base64 = btoa('binary data here'); // "YmluYXJ5IGRhdGEgaGVyZQ=="
const urlSafe = encodeURIComponent(base64);
// "YmluYXJ5IGRhdGEgaGVyZQ%3D%3D"

// الخيار 2: ترميز Base64url
function toBase64url(str) {
  return btoa(str)
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
}
toBase64url('binary data here');
// "YmluYXJ5IGRhdGEgaGVyZQ"