Base64 وترميز URL وكيانات HTML: ما يحتاج كل مطوّر أن يعرفه
إذا كنت تطوّر تطبيقات ويب منذ فترة، فلا بدّ أنك صادفت مشاكل في الترميز. رابط URL ينكسر بسبب رمز & في المكان الخطأ. صفحة HTML تعرض < حرفياً بدلاً من بدء تاغ. واجهة API تعيد سلسلة مثل SGVsbG8gV29ybGQ= دون أي تفسير. هذه كلها مشاكل ترميز، وثلاثة أنظمة تظهر أكثر من غيرها: Base64، وترميز URL، وكيانات HTML.
يشرح هذا الدليل آلية عمل كل نظام، مع أمثلة عملية، ويقترح أدوات مجانية أونلاين للترميز وفك الترميز دون الحاجة إلى تثبيت أي برنامج.
ما هو Base64؟
Base64 هو أسلوب لتمثيل البيانات الثنائية باستخدام أحرف ASCII القابلة للطباعة فقط. يحوّل أي تسلسل من البايتات إلى أبجدية مكوّنة من 64 حرفاً: A–Z، وa–z، و0–9، و+، و/. الناتج دائماً نص، مما يجعله آمناً للاستخدام في السياقات التي لا تقبل البيانات الثنائية الخام — مرفقات البريد الإلكتروني، وحمولات JSON، وروابط data: في CSS، وتوكنات JWT كلها تعتمد على Base64.
مثال — ترميز "مرحبا بالعالم" (Hello World) بـ Base64:
- المدخل:
Hello World - الناتج بـ Base64:
SGVsbG8gV29ybGQ=
علامات = في النهاية هي حشو للمحاذاة. يكون طول ناتج Base64 دائماً من مضاعفات 4.
متى تستخدمه:
- تضمين الصور أو الخطوط مباشرةً في CSS أو HTML (
data:image/png;base64,...) - ترميز البيانات الثنائية لـ APIs التي تقبل النصوص فقط
- قراءة أو توليد توكنات JWT (قسما الـ header والـ payload مُرمَّزان بـ Base64url)
Base64 ليس تشفيراً. أي شخص يرى السلسلة يستطيع فك ترميزها في ثوانٍ. استخدمه للترميز، لا لإخفاء المعلومات.
جرّب أداة تشفير وفك تشفير Base64 أونلاين من FileCrank.
ما هو ترميز URL (الترميز المئوي)؟
لا يمكن لروابط URL استيعاب كل الأحرف بأمان. المسافات، و&، و=، والشُرط المائلة، والأحرف غير الـ ASCII لها معنى بنيوي في URL — أو ببساطة غير صالحة. يستبدل ترميز URL (المعروف رسمياً بالترميز المئوي) الأحرف غير الآمنة بعلامة % تليها رقمان بالنظام الست عشري يمثّلان قيمة البايت بـ UTF-8.
مثال — ترميز "Hello World" في URL:
- المدخل:
Hello World - الناتج المُرمَّز:
Hello%20World
المسافة تصبح %20، و& تصبح %26، والشرطة المائلة / تصبح %2F.
متى تستخدمه:
- بناء سلاسل الاستعلام:
?q=hello%20world&lang=ar - تمرير أحرف خاصة في بيانات النماذج
- بناء طلبات API تحتوي على مدخلات من المستخدم
توفّر JavaScript الحديثة encodeURIComponent() لهذا الغرض، لكن حين تحتاج إلى فحص URL مُرمَّز أو تصحيح أخطائه، تكون أداة أونلاين أسرع بكثير من فتح الـ console.
استخدم أداة ترميز وفك ترميز URL أونلاين من FileCrank.
ما هي كيانات HTML؟
يستخدم HTML بعض الأحرف كعناصر بنيوية في صياغته. الأقواس الزاوية < و> تحدّد حدود التاغات، وعلامة & تبدأ مرجع كيان، وعلامة الاقتباس المزدوجة " تحدّد قيم الخصائص. إذا تضمّن محتواك هذه الأحرف بشكل حرفي — مثلاً لعرض كود مصدري على صفحة — فيجب تحويلها إلى كيانات HTML حتى لا يفسّرها المتصفح على أنها ترميز.
تستبدل كيانات HTML هذه الأحرف بمراجع ذات أسماء أو مراجع رقمية:
مثال — عرض تاغ HTML كنص عادي:
لعرض السلسلة الحرفية <h1>Hello World</h1> كنص في صفحة ويب، نكتب:
<h1>Hello World</h1>
متى تستخدمها:
- عرض أمثلة الكود في التوثيق أو المقالات
- الحماية من ثغرات XSS بتحويل مدخلات المستخدم قبل إدراجها في HTML
- إدراج رموز طباعية (
—،©، )
استخدم أداة كيانات HTML أونلاين من FileCrank لتحويل وعكس تحويل HTML في ثوانٍ.
مقارنة الأنظمة الثلاثة جنباً إلى جنب
نفس المدخل بعد معالجته بكل طريقة:
كل نظام يحل مشكلة مختلفة ولا يمكن الاستعاضة بأحدها عن الآخر:
- Base64: يحوّل البيانات الثنائية إلى نص. استخدمه حين تحتاج إلى تضمين بيانات ثنائية في سياق نصي بحت.
- ترميز URL: يتعامل مع الأحرف غير الصالحة أو الملتبسة في URL. استخدمه عند بناء روابط أو سلاسل استعلام.
- كيانات HTML: تتعامل مع الأحرف المحجوزة في بنية HTML. استخدمها عند إخراج نص داخل مستندات HTML.
أخطاء شائعة
الخطأ الأول: استخدام Base64 لأغراض أمنية. يبدو ناتج Base64 غير مفهوم، لكنه يُعكس بسهولة تامة. لا تستخدمه لـ"إخفاء" كلمات المرور أو التوكنات. استخدم التشفير أو التجزئة المناسبَين.
الخطأ الثاني: الترميز المزدوج لـ URL.
تطبيق encodeURIComponent() على سلسلة مُرمَّزة مسبقاً ينتج %2520 عوضاً عن %20. افك الترميز أولاً ثم أعد ترميزه.
الخطأ الثالث: نسيان تحويل HTML في القوالب. إدراج مدخلات المستخدم مباشرةً في HTML دون تحويل هو السبب الرئيسي لثغرات XSS. احرص دائماً على التحويل قبل العرض.
جرّب الأدوات
الأدوات الثلاث مجانية تماماً، وتعمل في المتصفح مباشرةً، ولا تتطلب إنشاء حساب:
احفظها في المفضّلة. ستحتاج إلى واحدة منها على الأقل كل أسبوع.